Subscription

When we had initially set up Apollo, we installed the required dependencies for a http client. But subscriptions is an advanced use case with websockets. We have to install more dependencies to set up subscriptions.

React Apollo Subscriptions Setup

Copy
$ yarn add subscriptions-transport-ws

Now we need to update our ApolloClient instance to point to the subscription server.

Open src/components/App.tsx and update the following imports:

src/components/App.tsx

Copy
  import { InMemoryCache } from 'apollo-cache-inmemory';
- import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache } from "@apollo/client";
+ import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+ import { WebSocketLink } from "@apollo/client/link/ws";

Update the createApolloClient function to integrate WebSocketLink.

Copy
const createApolloClient = (authToken: string) => {
  return new ApolloClient({
-   link: new HttpLink({
+   link: new WebSocketLink({
-     uri: 'https://hasura.io/learn/graphql',
+     uri: 'wss://hasura.io/learn/graphql',
+     options: {
+       reconnect: true,
+       connectionParams: {
          headers: {
            Authorization: `Bearer ${authToken}`
          }
+       }
+     }
    }),
    cache: new InMemoryCache(),
  });
};

Note that we are replacing HttpLink with WebSocketLink and hence all GraphQL queries go through a single websocket connection. This means not just subscriptions, but also GraphQL queries and mutations also go through websockets.