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.

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/main.js and update the following imports:

- import { HttpLink } from 'apollo-link-http';
+ import { WebSocketLink } from 'apollo-link-ws';

Update the link by removing HttpLink and adding a WebSocketLink function to integrate WebSocketLink.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import AuthPlugin from "./plugins/auth";
import VueApollo from 'vue-apollo'
import ApolloClient from "apollo-client";
import { WebSocketLink } from 'apollo-link-ws';
import { InMemoryCache } from "apollo-cache-inmemory";
Vue.config.productionTip = false;
const getHeaders = () => {
const headers = {};
const token = window.localStorage.getItem('apollo-token');
if (token) {
headers.Authorization = `Bearer ${token}`;
return headers;
- // Create an http link:
- const link = new HttpLink({
- uri: '',
- fetch,
- headers: getHeaders()
- });
+ // Create a WebSocket link:
+ const link = new WebSocketLink({
+ uri: 'wss://',
+ options: {
+ reconnect: true,
+ timeout: 30000,
+ connectionParams: () => {
+ return { headers: getHeaders() };
+ },
+ }
+ });
const client = new ApolloClient({
link: link,
cache: new InMemoryCache({
addTypename: true
const apolloProvider = new VueApollo({
defaultClient: client,
new Vue({
render: h => h(App)

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


Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.
Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Stay in the know
Sign up for full access to our community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule. ✌️