@habx/apollo-multi-endpoint-link

Apollo link which add an api directive to fetch data from multi endpoints


$3

We wrote an article about why and how we did this link if you want more details.

$3

``bash
npm i @habx/apollo-multi-endpoint-link
`

$3

`typescript
import { createHttpLink } from "apollo-link-http";

new ApolloClient({
link: ApolloLink.from([
new MultiAPILink({
endpoints: {
housings: 'https://housings.api',
projects: 'https://projects.api',
...
},
createHttpLink: () => createHttpLink(),
}),
])
})
`

NB: Since default value of httpSuffix is /graphql, endpoints above will be transformed to https://housings.api/graphql and https://projects.api/graphql.
If you do not have common suffix, you can pass an empty string as httpSuffix to avoid this transformation.

NB 2: Supports apollo-link-rest library

##### API

`typescript
new MultiAPILink(config, request);
`

###### config

| Parameter | Description | Default | Required |
| --------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------- |
| endpoints | Dictionary of endpoints | | Yes |
| defaultEndpoint | Default endpoint | | No |
| createHttpLink | Function to generate http link like apollo-link-http | | Yes |
| createWsLink | Function to generate wsLink like apollo-link-ws | | No |
| wsSuffix | Suffix added to endpoint for subscriptions queries | /graphql/subscriptions | No |
| httpSuffix | Suffix added to endpoint for http queries | /graphql | No |
| getContext | Callback function called to set custom context like headers | | No |
| prefixTypenames | Add name argument passed in @api directive to every \_\_typename contained in network data response | | No |

$3

#### Query with static api name :

`graphql
query projectList($params: Params) @api(name: projects) {
projects(params: $params) {
nodes {
id
name
}
}
}
`

`ts
const response = useQuery(myQuery);
`

#### Query with dynamic api name

`graphql
query projectList($params: Params) @api(contextKey: "apiName") {
projects(params: $params) {
nodes {
id
name
}
}
}
`

`ts
const response = useQuery(myQuery, { context: { apiName: "projects" } });
`

#### Setting custom context

Sometimes you might need to set custom apollo link context like headers for authentication purpose.
This link allows it by doing as following.

`typescript
new MultiAPILink({
getContext: (endpoint) => {
if (endpoint === 'yourendpoint-with-auth') {
return ({
headers: {
'Authorization': 'xxxx',
}
})
}
return {}
},
...
})
``