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

25 July, 2018

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!

search icon

About Hasura

Hasura allows you to mobilize & federate your organisation’s data by building a powerful, secure & flexible GraphQL API, that can query data in your databases, HTTP services, serverless functions as well as third party APIs.
Like what you read? Join our team! We’re hiring

Tanmai Gopal

Tanmai Gopal

Tanmai is the co-founder of hasura.io. He is passionate about making it easier to build things.

Read More