Search⌘ K
Home
Courses
Craft GraphQL APIs in Elixir with Absinthe

Different Configuration of Apollo Client

Explore how to configure Apollo Client for both HTTP and WebSocket transport methods using ApolloLink.split. Understand how to set up subscriptions in a React app to update the UI with real-time data from your GraphQL API. Gain practical skills in integrating GraphQL subscriptions with frontend applications.

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:

Java
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 ...