Errors Initiating connection to subscription service: It was most likely caused due to an unsupported subprotocol "graphql-ws" requested by the client.graphql-ws implements exclusively the "graphql-transport-ws" subprotocol, please make sure that the client implements it too

[Efosaok]

Expected Behaviour
Following an upgrade of Apollo Server Express from version 2 to 3 using Nestjs. It was recommended to use Graphql-ws to keep Apollo subscription related events functional. However, I ran into issues trying to connect the client(now set up to use Graphql-ws) to the server. The error stack is as below;

WebSocket protocol error occured. It was most likely caused due to an unsupported subprotocol "graphql-ws" requested by the client. graphql-ws implements exclusively the "graphql-transport-ws" subprotocol, please make sure that the client implements it too.

Debug Information
Client Setup

wsLink.ts

import { ApolloLink, FetchResult, Observable, Operation } from '@apollo/client/core';
import { GraphQLError, print } from 'graphql';
import { Client, ClientOptions, createClient } from 'graphql-ws';

export class WebSocketLink extends ApolloLink {
  private client: Client;

  constructor(options: ClientOptions) {
    super();
    this.client = createClient(options);
  }

  public request(operation: Operation): Observable<FetchResult> {
    return new Observable((sink) => {
      return this.client.subscribe<FetchResult>(
        { ...operation, query: print(operation.query) },
        {
          next: sink.next.bind(sink),
          complete: sink.complete.bind(sink),
          error: (err) => {
            if (err instanceof Error) {
              return sink.error(err);
            }

            if (err instanceof CloseEvent) {
              return sink.error(
                // reason will be available on clean closes
                new Error(`Socket closed with event ${err.code} ${err.reason || ''}`),
              );
            }

            return sink.error(
              new Error((err as GraphQLError[]).map(({ message }) => message).join(', ')),
            );
          },
        },
      );
    });
  }
}

const wsLink = new WebSocketLink({
  url: socketUrl,
  lazyCloseTimeout: 50000,
  retryAttempts: Infinity,
  lazy: true,
  connectionParams: () => {
    const token = sessionStorage.getItem('key');
    return {
      authorization: token ? `Bearer ${token}` : '',
    };
  },
});

Further Information
Installed version of graphql-ws is 5.5.0.
I have tried downgrading to the graphql-transport-ws package but the error still persist.

[enisdenjo]

Hey there, as the server error suggest, your client is somewhere still using the subscriptions-transport-ws. No need to downgrade, the graphql-transport-ws subprotocol is used in all versions of this library - please update to the latest version.

Can you share (or check) more of your client-side code? Is this the only client? Do you use any GraphQL playground tools (like GraphQL Playground, Altair or GraphiQL)? You must have a subscriptions-transport-ws instance lurking somewhere.

[mrparkersson]

@enisdenjo I have implemented this subscriptions: { 'graphql-ws': true, 'subscriptions-transport-ws': true, }, on my Nest Js and I get undefined when I try making a request. Do you have any idea or how to solve this?

[enisdenjo]

@mrparkersson I really don't know - am not a user of NestJS. You could ask them instead.

[mrparkersson]

@enisdenjo sure brother thank you. :)

[enisdenjo]

@mrparkersson you're very welcome, sorry I couldn't be of help.

[mrparkersson]

@enisdenjo oh don't worry. We all don't know everything