Configuring the Apollo Client for Subscriptions with WebSockets

This article is part of a series of articles using Angular or React with the Apollo Client.

As a front-end developer, you want to configure the Apollo Client for Subscriptions using:

• WebSockets
• A separate URI
• Frontend framework agnostic

You want the Apollo Client to abstract the complexities of using WebSockets.

The client configuration can be used in any front-end framework: Angular, React, etc.

Why a separate URI/URL for subscriptions?
Subscriptions have a very different work load. i.e. subscribe once and wait for many published events. This is often segregated to a separate server path and/or a separate implementation to scale the event solution.

This example is for a “generic” Angular or React application with deliberately verbose code.

Here is how to do it

The solution is in two parts:

1. Create and configure a GraphQLWsLink to manage the WebSocket and any Subscriptions
2. Create a split link that sends requests to different URIs based on the OperationDefinition

The split link, or the terminating link, may be part of a chain of links used by the Apollo Client instance.

Using the Apollo Client abstracts front-end developers from the complexities of managing WebSockets and the orderly handling of events generated from a Server.

The Solution

The solution uses:

• Apollo Client instance — a single instance shared between ALL components
• GraphQLWsLink - A specialized ApolloLink to manage WebSockets
• split() function - Splits the request based on the Operation definition, in this case, ‘subscription’.

GraphQLWsLink

The GraphQLWsLink object is configured with a function to create a WebSocket listener createClient(). This function is invoked by the ApolloClient instance as needed.

wsLink constant

Lines 2-12: The function configuration, including URL, connection parameters, and on methods.
Note: the connectionParams is a place to add to the header

split()

The split() function returns an ApolloLink object containing a function to perform the split.

split function

Lines 2-7 are the split logic

Line 8 wsLink is the WebSocket link.

Line 9 opsLink is the operations link (mutations, queries)

You can see that we are splitting the subscription traffic based on the operation.

Apollo Client instance

The client instance is configured using the terminatingLink (described above) at Line 3. The client splits the request by calling the function in the split link.

The complete source code

Note that the links are created in a sequence:
1. wsLink

2. httpLink

3. authLink

4. errorLink

5. retryLink

then sequenced into opsLink using the from() function.

The opsLink and the wsLink are passed to the split() function and the resulting terminatingLink is used in the Apollo Client instance

Conclusion

Subscriptions and WebSockets are made easy by using the Apollo Client.
Be super careful of the import of the correct packages

Check all the articles

How to use the Apollo Client in Angular

GraphQL query from an Angular component

How to make GraphQL mutation from an Angular Component

How to make GraphQL subscriptions in an Angular Component

Configuring the Apollo Client for Subscriptions with WebSockets