Subscription

When we had initially set up Apollo, we used Apollo Boost to install the required dependencies. But subscriptions is an advanced use case which Apollo Boost does not support. So we have to install more dependencies to set up subscriptions.

Angular Apollo Subscriptions Setup

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

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

Open src/app/app.module.ts and update the following imports:

githubsrc/app/app.module.ts
+ import { WebSocketLink } from '@apollo/client/link/ws';

Update to integrate WebSocketLink.

providers: [{
provide: APOLLO_OPTIONS,
useFactory: () => {
return {
cache: new InMemoryCache(),
- link: httpLink.create({
+ link: new WebSocketLink({
- uri: 'https://hasura.io/learn/graphql',
+ uri: 'wss://hasura.io/learn/graphql',
+ options: {
+ reconnect: true,
+ connectionParams: {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
+ }
+ }
})
};
},
deps: [HttpLink]
}],

Note that we are replacing HttpLink with WebSocketLink and hence all GraphQL queries go through a single websocket connection.

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