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
$ yarn add apollo-link-ws 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:
import ApolloClient from 'apollo-client';import { InMemoryCache } from 'apollo-cache-inmemory';- import { HttpLink } from 'apollo-link-http';+ import { WebSocketLink } from 'apollo-link-ws';import { ApolloProvider } from '@apollo/react-hooks';
Update the createApolloClient function to integrate WebSocketLink.
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.