Moving from apollo-boost to GraphQL subscriptions with apollo-client

This is a simple tutorial on how to use GraphQL subscriptions with Apollo.

Let’s say you have the basic apollo-client working and now you want to enable subscriptions.

This is what you probably have:

import { ApolloProvider } from "react-apollo";
import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://w5xlvm3vzz.lp.gql.zone/graphql"
});
ReactDOM.render(
  (<ApolloProvider client={client}>
   <App />
  </ApolloProvider>),
  document.getElementById('root'));

Now, to move to subscriptions, this is what you need to change your apollo-client setup to:

import { ApolloProvider } from "react-apollo";
// Remove the apollo-boost import and change to this:
import ApolloClient from "apollo-client";
// Setup the network "links"
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { InMemoryCache } from 'apollo-cache-inmemory';
const wsurl = wss://hasura-demo.herokuapp.com/v1alpha1/graphql;
const httpurl = https://hasura-demo.herokuapp.com/v1alpha1/graphql;

const wsLink = new WebSocketLink({
  uri: wsurl,
  options: {
    reconnect: true
  }
});
const httpLink = new HttpLink({
  uri: httpurl,
});

const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  wsLink,
  httpLink,
)

const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
});
// Use the client just as before
ReactDOM.render(
  (<ApolloProvider client={client}>
   <App />
  </ApolloProvider>),
  document.getElementById('root'));

This reads as:

1. Create a wsLink
2. Create an httpLink
3. Create a new apollo-link which delegates all GraphQL queries to httpLink unless they are subscription queries
4. Create a ApolloClient which uses the link object we created above
5. Enable InMemoryCache because that’s what we had with apollo-boost

These are the packages you need to install:

npm install --save apollo-client apollo-link-ws apollo-link-http apollo-link apollo-utilities apollo-cache-inmemory

And that’s it. You’re ready to start using Subscriptions!