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 as per 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: ""
  (<ApolloProvider client={client}>
   <App />

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://;
const httpurl =;

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';

const client = new ApolloClient({
  cache: new InMemoryCache()
// Use the client just as before
  (<ApolloProvider client={client}>
   <App />

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!

Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.

PS: We’re hiring!

Tanmai Gopal

Tanmai Gopal

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

Read More