Graphql-ws with apollo client v2

[alexsserban]

Hello,

My setup consists of a backend based on apollo server, a frontend app based on Nuxt JS - which has only compatibility with Apollo client V2, and a new Frontend App with Vue3 with Apollo Client V3.

On the new app everything related to Graphql-ws works as expected, but is there a way I can make Graphql-ws work with Apollo Client v2? The recipe for apollo client from what I can see is based on apollo client v3.

Any recommendations for how I could approach the problem would be very appreciated, as I've transitioned the backend and the new front end app to graphql-ws but I also need to be able to use it in the NuxtJS app with Apollo v2.

[enisdenjo]

v3 is not much different from v2. Here's a quick and untested integration of graphql-ws with Apollo Client v2:

import { print } from 'graphql';
import { createClient, ClientOptions, Client } from 'graphql-ws';
import { ApolloLink, Operation, FetchResult, Observable } from 'apollo-link'; // yarn add apollo-link

// **literally** copied over from the "Client usage with Apollo" recipe
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 (Array.isArray(err))
              // GraphQLError[]
              return sink.error(
                new Error(err.map(({ message }) => message).join(', ')),
              );

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

            return sink.error(err);
          },
        },
      );
    });
  }
}

You can then use the WebSocketLink as showcased in Apollo's v2 subscriptions documentation with graphql-ws client options.

P.S. Updated the recipe to reflect the subtle differences too: d980213.

[enisdenjo]

The Messages tab is what I was looking for, thanks (it was named Frames some time ago, chrome probably changed it).

Nevertheless, interesting... From the looks of it, the client seems to be sending a broken message. In the 1st screenshot, on the bottom, there could be a close code + reason, can you read it out for me if there (or just give a full screenshot)?

Furthermore, please attach a console.log in the WebSocketLink request method. Like this:

class WebSocketLink extends ApolloLink {
    client;

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

    request(operation) {
        return new Observable((sink) => {
+           console.log({ ...operation, query: print(operation.query) });
            return this.client.subscribe(
                { ...operation, query: print(operation.query) },
                {
                    next: sink.next.bind(sink),
                    complete: sink.complete.bind(sink),
                    error: (err) => {
                        if (Array.isArray(err))
                            // GraphQLError[]
                            return sink.error(new Error(err.map(({ message }) => message).join(', ')));

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

                        return sink.error(err);
                    },
                }
            );
        });
    }
}

and share please what it reports, thanks!

[alexsserban]

Both screenshots are attached below, but I can't see any close code you were saying about. Also, another pretty weird thing is that when I reload the page, it automatically opens the browser print functionality to print the page and if I disable the subscription that doesn't happen anymore.

Also, in the console.log, the operationName is correct, that is the name of my subscription.

[enisdenjo]

Thats fine, no close event because the error is scoped to a single subscription, hence not fatal (just wanted to confirm).

However, I see the problem, notice the operation query field - it is undefined - this is why the client is failing. The query field is required and must be always present, please check your Apollo implementation see #269 (reply in thread). 😄

[enisdenjo]

@AlexandruSerban142 I figured out the exact problem, looking at your config over at: #269 (reply in thread), you dont seem to import the print function from graphql, you're using the browser's window print instead haha (explains the print dialog too).

By importing print from graphql, you should be good to go.

import { onError } from 'apollo-link-error';
import { HttpLink } from 'apollo-link-http';
import { ApolloLink, Observable, split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { createClient} from 'graphql-ws';
+ import { print } from 'graphql';

class WebSocketLink extends ApolloLink {
    client;

    constructor(options) {
        super();

...

[alexsserban]

Hahah, yes, now everything looks good... Thanks a lot for all the help.