Craft GraphQL APIs in Elixir with Absinthe/

...

/

Different Configuration of Apollo Client

Different Configuration of Apollo Client

Learn about the different configurations of Apollo Client.

We'll cover the following...

Using a hybrid configuration

To give our GraphQL client the ability to use HTTP/S, we pull in another dependency named apollo-link-http:

yarn add apollo-link-http

Now we modify our client code and use a special function, ApolloLink.split(), to configure when each transport method should be used:

Press + to interact
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory"; 
import { ApolloLink } from "apollo-link";
import { createHttpLink } from "apollo-link-http"; 
import { hasSubscription } from "@jumpn/utils-graphql";
import absintheSocketLink from "./absinthe-socket-link";
const link = new ApolloLink.split(
  operation => hasSubscription(operation.query), 
  absintheSocketLink,
  createHttpLink({uri: "http://localhost:4000/api/graphql"})
);
export default new ApolloClient({ 
  link,
  cache: new InMemoryCache() 
});

The hasSubscription() function, from one of @absinthe/socket’s dependencies, is a handy utility that checks our GraphQL for a subscription. In the event one is found, we use our WebSocket link. Otherwise, we send the request over HTTP to the configured URL. Let’s see if this works.

When we ...