Sign up for Hasura Newsletter

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:

githubsrc/components/App.tsx
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.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2021 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin