Apollo link which add an api directive to fetch data from multi endpoints
Why ?
We wrote an article about why and how we did this link if you want more details.
Install
npm i @habx/apollo-multi-endpoint-linkSetup
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
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 |
Queries
Query with static api name :
query projectList($params: Params) @api(name: projects) {
projects(params: $params) {
nodes {
id
name
}
}
}const response = useQuery(myQuery);Query with dynamic api name
query projectList($params: Params) @api(contextKey: "apiName") {
projects(params: $params) {
nodes {
id
name
}
}
}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.
new MultiAPILink({
getContext: (endpoint) => {
if (endpoint === 'yourendpoint-with-auth') {
return ({
headers: {
'Authorization': 'xxxx',
}
})
}
return {}
},
...
})