In addition to fetching data using queries and modifying data using mutations, the GraphQL spec will soon be gaining a third operation type, called
subscription. You can read the RFC on GitHub. While minor changes in the specification might happen before it’s finalized, you can use subscriptions today with Apollo.
GraphQL subscriptions are a way to push data from the server to the clients that choose to listen to real time messages from the server. Subscriptions are similar to queries in that they specify a set of fields to be delivered to the client, but instead of immediately returning a single answer, a result is sent every time a particular event happens on the server.
A common use case for subscriptions is notifying the client side about particular events, for example the creation of a new object, updated fields and so on.
GraphQL subscriptions have to be defined in the schema, just like queries and mutations:
On the client, subscription queries look just like any other kind of operation:
The response sent to the client looks as follows:
In the above example, the server is written to send a new result every time a comment is added on GitHunt for a specific repository. Note that the code above only defines the GraphQL subscription in the schema. Read setting up subscriptions on the client and setting up GraphQL subscriptions for the server to learn how to add subscriptions to your app.
When to use subscriptions
In most cases, intermittent polling or manual refetching are actually the best way to keep your client up to date. So when is a subscription the best option? Subscriptions are especially useful if:
- The initial state is large, but the incremental change sets are small. The starting state can be fetched with a query and subsequently updated through a subscription.
- You care about low-latency updates in the case of specific events, for example in the case of a chat application where users expect to receive new messages in a matter of seconds.
A future version of Apollo or GraphQL might include support for live queries, which would be a low-latency way to replace polling, but at this point general live queries in GraphQL are not yet possible outside of some relatively experimental setups.
The most popular transport for GraphQL subscriptions today is
Let’s look at how to add support for this transport to Apollo Client.
subscriptions-transport-ws from npm:
Then, initialize a GraphQL subscriptions transport client:
Then, extend your existing Apollo Client network interface using the
Now, queries and mutations will go over HTTP as normal, but subscriptions will be done over the websocket transport.
With GraphQL subscriptions your client will be alerted on push from the server and you should choose the pattern that fits your application the most:
- Use it as a notification and run any logic you want when it fires, for example alerting the user or refetching data
- Use the data sent along with the notification and merge it directly into the store (existing queries are automatically notified)
subscribeToMore, you can easily do the latter.
subscribeToMore is a function available on every query result in
react-apollo. It works just like
fetchMore, except that the update function gets called every time the subscription returns, instead of only once.
Here is a regular query:
Now, let’s add the subscription.
Add a function called
subscribeToNewComments that will subscribe using
subscribeToMore and update the query’s store with the new data using
and start the actual subscription by calling the
subscribeToNewComments function with the subscription variables:
Authentication over WebSocket
In many cases it is necessary to authenticate clients before allowing them to receive subscription results. To do this, the
SubscriptionClient constructor accepts a
connectionParams field, which passes a custom object that the server can use to validate the connection before setting up any subscriptions.
You can use
connectionParamsfor anything else you might need, not only authentication, and check its payload on the server side with SubscriptionsServer.