Subscription

We need one more dependency to setup subscriptions. Let's install it.

Apollo Subscriptions Setup

+ $ npm install subscriptions-transport-ws --save

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

Open src/apollo.js and update the following imports:

githubsrc/apollo.js

Update the createApolloClient function to integrate WebSocketLink.

import { split, HttpLink, InMemoryCache, ApolloClient } from "@apollo/client/core";
import { getMainDefinition } from "@apollo/client/utilities";
import { WebSocketLink } from "@apollo/client/link/ws";
export function createApolloClient(authToken) {
const headers = {
Authorization: `Bearer ${authToken}`,
};
const httpLink = new HttpLink({
uri: "https://hasura.io/learn/graphql",
headers,
});
+ const wsLink = new WebSocketLink({
+ uri: "wss://hasura.io/learn/graphql",
+ options: {
+ reconnect: true,
+ connectionParams: {
+ headers,
+ },
+ },
+ });
+
+ const link = split(
+ ({ query }) => {
+ const definition = getMainDefinition(query);
+ return (
+ definition.kind === "OperationDefinition" &&
+ definition.operation === "subscription"
+ );
+ },
+ wsLink,
+ httpLink
+ );
const cache = new InMemoryCache();
const client = new ApolloClient({
link,
cache,
});
return client;
}

split is used to choose WebSocketLink for subscription queries and HttpLink for queries and mutations.

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
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin