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

25 July, 2018 | 1 min read

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!

Close

Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.

Tanmai Gopal

Tanmai Gopal

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

Read More

Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Get monthly product updates
Sign up for full access to our community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule. ✌️