Subscriptions with Vue Apollo Next

Hey, everyone :wave:

My question regards the usage of Subscriptions with the latest version of Vue Apollo.

When implementing the subscription, we are returned the following error:

WebSocket connection to 'wss://ws.8base.com/' failed
WebSocket connection to 'wss://ws.8base.com/' failed
WebSocket connection to 'wss://ws.8base.com/' failed

I have been following the indications from the following resources:

Here is how is structured the apolloClient.js file :point_down:

// apolloClient.js

import { onError } from "apollo-link-error";
import { setContext } from "apollo-link-context";
import { ApolloClient } from "@apollo/client/core";
import { HttpLink, split } from "@apollo/client/core";
import { InMemoryCache } from "@apollo/client/core";
import { WebSocketLink } from "@apollo/client/link/ws";
import { getMainDefinition } from "@apollo/client/utilities";
/**
 * Source code provided by Sebastien Scholl @8base.com
 *
 *     Github: https://gist.github.com/sebscholl/dc8319ba1db3854cdff72e8dba63814f
 */
/**
 * Import store to handle logout on expired token.
 */
import store from "@/store";
/**
 * A terminating link that fetches GraphQL results from
 * a GraphQL endpoint over an http connection.
 *
 *   docs: https://www.apollographql.com/docs/link/links/http/
 *
 * The 8base workspace endpoint goes here.
 */
const httpLink = new HttpLink({
  uri: process.env.VUE_APP_WORKSPACE_ENDPOINT
});

// Create the subscription websocket link
const wsLink = new WebSocketLink({
  uri: "wss://ws.8base.com/",
  options: {
    reconnect: true,
    connectionParams: {
      /**
       * WorkspaceID MUST be set or the Websocket Endpoint won't be able to
       * map the request to the appropriate workspace
       */
      workspaceId: process.env.VUE_APP_WORKSPACE_ID
    }
  }
});
/**
 * Common error handlers.
 */
/* NOTE DYLAN */
const errorHandlers = {
  /* Logout on expired token */
  TokenExpiredError: () => store.dispatch("session/logout"),
  /* Invalid token supplied */
  InvalidTokenError: ({ message }) =>
    console.log(`[Token error]: Message: ${message}`),
  /* Default error handler */
  default: ({ message, locations, path }) => {
    console.log(
      `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
    );
  }
};
/**
 * Error Link takes a function that is called in the event of an error.
 * This function is called to do some custom logic when a GraphQL or
 * network error happens.
 *
 *   docs: https://www.apollographql.com/docs/link/links/error/
 */
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.map(args =>
      (errorHandlers[args.code] || errorHandlers.default)(args)
    );
  }

  if (networkError) console.log(`[Network error]: ${networkError}`);
});
/**
 * Takes a function that returns either an object or a promise that
 * returns an object to set the new context of a request.
 *
 *   docs: https://www.apollographql.com/docs/link/links/context/
 *
 * Here we collect the authentication token from the auth module to
 * add required bearer token to the headers.
 */
const authLink = setContext((_, { headers }) => ({
  headers: {
    authorization: `Bearer ${store.state.session.idToken}`,
    ...headers
  }
}));

/**
 * using the ability to split links, you can send data to each link
 * depending on what kind of operation is being sent
 */
//
const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  wsLink,
  errorLink.concat(authLink.concat(httpLink)) // Concatenate the many links
);

/**
 * The ApolloClient class is the core API for Apollo, which we're using
 * to handle are GraphQL requests to the API.
 */
const apolloClient = new ApolloClient({
  /* Split link */
  link,
  /* Initialize the cache for helping performance */
  cache: new InMemoryCache(),
  connectToDevTools: true,
  defaultOptions: {
    query: "cache-and-network"
  }
});

export default apolloClient;

Queries and Mutation are working fine. However, subscriptions don’t work.

Can someone help me find a solution?

Thanks :v:
Andréas

Hey.
First of all - check you declare VUE_APP_WORKSPACE_ID right.
The next thing to try - pass your auth token to the payload of WebSocket.

connectionParams: {
      ...
      token: authToken,
    }

Also please provide screenshot of your websocket response log from devtools just after you try to call subscription (Network - WS) like this one: