Error: WebSocket implementation missing

[xndyz]

Screenshot

Visualising is always helpful.

Expected Behaviour
I expected it to do this -
No error

Actual Behaviour
but instead it did this.
Shows this error until you refresh the page.

Debug Information
Help us debug the bug?
This app communicates with Hasura Cloud via WS. I am setting up the client like so:

const client = createClient({
  url: process.env.NEXT_PUBLIC_GRAPHQL_WS,

  connectionParams: () => {
    const token = Cookies.get("token");
    if (!token) {
      return {};
    }

    return {
      Authorization: `Bearer ${token}`,
    };
  },
});

[enisdenjo]

The error is self-explanatory, WebSocket implementation is missing, you aren't running the client in the browser. Please consult the "Client usage in Node" recipe and provide the webSocketImpl argument.

Or alternatively, if you're using SSR, see #215 (comment).

[xndyz]

I get this error after using the ws module as webSocketImpl:

[xndyz]

You think this has to do with SSR in Next.js?

[enisdenjo]

Yes, please see also #215 (comment).

[xndyz]

Thanks! That fixed it.

[61ue5peed]

Yep: !!!

import { w3cwebsocket } from 'websocket';
...
const myWSClient =  createClient({
  url: websockerUrl || "",
  webSocketImpl: w3cwebsocket,
});
const wsLink = new GraphQLWsLink(myWSClient);