Skip to content

Latest commit

 

History

History
120 lines (94 loc) · 4.47 KB

README.md

File metadata and controls

120 lines (94 loc) · 4.47 KB

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

CircleCI Version Size License

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-link

Setup

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 {}
    },
    ...
})