This course is no longer maintained and may be out-of-date. While it remains available for reference, its content may not reflect the latest updates, best practices, or supported features.
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 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 { 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.
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.
Build apps and APIs 10x faster
Built-in authorization and caching
8x more performant than hand-rolled APIs

