How to Query from Two GraphQL Endpoints with Apollo Client

At some point, you may find a case where you need to query from two separate GraphQL endpoints. Instantiating multiple Apollo Clients, nesting them in the JSX, and trying to select between the two can get quickly out of hand!

Luckily, with the ApolloLink utilities, we can easily accomplish this goal.

You can select between two HttpLink instances using the split function provided by the ApolloLink class. The split function takes a test function and two ApolloLink instances (or, in this case, HttpLink instances that terminate the Link chain). A test function is used to decide which link will handle the request; this can be accomplished via something added to the operation context.

Here is an example:

import { ApolloLink, HttpLink } from '@apollo/client';

const link1 = new HttpLink({ uri: 'http://localhost:4000/graphql' });
const link2 = new HttpLink({ uri: 'http://localhost:5000/graphql' });

const link = ApolloLink.split(
  operation => operation.getContext().version === 1,
  link1, // used if test is true
  link2, // used if test is false
);

In this example, the operation.getContext().version is used to decide which link to use. If the version is 1, then link1 is used, otherwise link2 is used.

Bonus: Setting Context on an Operation

You can add context to an operation using the setContext function. This function is part of the ApolloLink API is used to create a new link that sets the context for an operation.

Here is an example of how to use setContext:

import { setContext } from "@apollo/client/link/context";

const contextLink = setContext((_, previousContext) => {
  // return the new context
  return {
    ...previousContext,
    headers: {
      ...previousContext.headers,
      authorization: "Bearer token",
    },
  };
});

In this example, the setContext function creates a new link that sets the authorization header for each operation. The setContext function takes a function as an argument, which is called for each operation. This function takes two arguments: the operation being executed and the previous context. It should return the new context for the operation.

You can replace the test function with any condition you need to decide which link to use.

Another example of a test function could utilize directives in the query using the hasDirectives function included with Apollo Client.

The hasDirectives function checks if a given set of directives exists in a GraphQL document. It takes two arguments: an array of directive names and a GraphQL document. It returns a boolean indicating whether the document contains all the specified directives.

import { hasDirectives, getDirectiveInfoFromField } from '@apollo/client/utilities';
import gql from 'graphql-tag';

const query = gql`
  query {
    field @include(if: true)
  }
`;

const hasIncludeDirective = hasDirectives(['include'], query);