⛓ Apollo link which add an api directive to fetch data from multi endpoints
We wrote an article about why and how we did this link if you want more details.
npm i @habx/apollo-multi-endpoint-link
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
new MultiAPILink(config, request);
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 |
query projectList($params: Params) @api(name: projects) {
projects(params: $params) {
nodes {
id
name
}
}
}
const response = useQuery(myQuery);
query projectList($params: Params) @api(contextKey: "apiName") {
projects(params: $params) {
nodes {
id
name
}
}
}
const response = useQuery(myQuery, { context: { apiName: "projects" } });
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 {}
},
...
})