Invalid (or missing) WebSocket implementation with SSR (server-side rendering)

[furkandmrblk]

Hi, I am using Apollo-Express for my backend, so I implemented the given example from this repo. For the frontend, I also used the given link & created a splitLink for my httpLink & wsLink. My issue is that my frontend is giving me the following error: Invalid WebSocket implementation provided
I do not have any errors in my network in the chrome browser nor do I have any errors in my backend.

Here is a snippet of my backend code that is affiliated with graphql-ws:

const server = app.listen(port, () => {
    const wsServer = new ws.Server({
      server: server,
      path: '/graphql',
    });

    useServer(
      {
        schema: typeDefs as any,
        roots,
        context: ({ extra }) => ({ req: extra.request }),
        // execute,
        // subscribe,
      },
      wsServer
    );

    console.log(`Server is ready at http://localhost:${port}`);
  });

And here is the frontEnd code:

import {
  ApolloClient,
  split,
  createHttpLink,
  from,
  InMemoryCache,
  NormalizedCacheObject,
} from '@apollo/client';

import { TokenRefreshLink } from 'apollo-link-token-refresh';

import {
  accessTokenExpired,
  fetchAccessToken,
  getAccessToken,
  setAccessToken,
} from '../helpers/Tokens';

import { setContext } from '@apollo/client/link/context';
import { onError } from '@apollo/client/link/error';

// import { WebSocketLink } from '@apollo/client/link/ws';

import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from './WebSocket';
import WebSocket from 'ws';

const wsLink = new WebSocketLink({
  url: 'ws://localhost:4000/graphql',
  connectionParams: () => {
    const accessToken = getAccessToken().valueOf();

    if (!accessToken) return {};

    return {
      Authorization: accessToken ? `Bearer ${accessToken}` : '',
    };
  },
  webSocketImpl: WebSocket,
});

const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
  credentials: 'include',
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

const refreshLink: any = new TokenRefreshLink({
  accessTokenField: 'accessToken',
  isTokenValidOrUndefined: () => accessTokenExpired(),
  fetchAccessToken: () => fetchAccessToken(),
  handleFetch: (accessToken: string) => setAccessToken(accessToken),
  handleResponse: (operation, accessTokenField) => (response) => {
    if (!response) return { accessToken: null };

    return { accessToken: response.data?.updateTokens?.accessToken };
  },
  handleError: (err: Error) => {
    console.log('An error occurred');
    console.log(err);
  },
});

const authLink = setContext((_, { headers }) => {
  const accessToken = getAccessToken().valueOf();

  return {
    headers: {
      ...headers,
      authorization: accessToken ? `Bearer ${accessToken}` : '',
    },
  };
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

export const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  ssrMode: true,
  cache: new InMemoryCache(),
  link: from([refreshLink, authLink, errorLink, splitLink]),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
    },
  },
});

The WebSocketLink:

import { Client, createClient, ClientOptions } from 'graphql-ws';
import { print, GraphQLError } from 'graphql';

import {
  ApolloLink,
  FetchResult,
  Observable,
  Operation,
} from '@apollo/client/core';

export class WebSocketLink extends ApolloLink {
  private client: Client;

  constructor(options: ClientOptions) {
    super();
    this.client = createClient(options); <==================== The error is pointing at this place 
  }

  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(', ')
              )
            );
          },
        }
      );
    });
  }
}

Sorry for the inconvenience & thank you for taking your time to read this.

[enisdenjo]

Hey there, the error claims that the webSocketImpl you provided is invalid - it probably is. Are you sure you have ws installed on the frontend? What does the WebSocket from import WebSocket from 'ws'; look like?

Nevertheless, if you're running the client in a browser, you dont even need ws. Browsers have their own WebSocket implementation which I would absolutely recommend using instead (ws module is just for backend/NodeJS environments).

const wsLink = new WebSocketLink({
  url: 'ws://localhost:4000/graphql',
  connectionParams: () => {
    const accessToken = getAccessToken().valueOf();

    if (!accessToken) return {};

    return {
      Authorization: accessToken ? `Bearer ${accessToken}` : '',
    };
  },
- webSocketImpl: WebSocket,
});

P.S. The "Client usage with Apollo" recipe does not use the webSocketImpl.

[furkandmrblk]

Hey, thank you for the quick answer!

Yeah I imported it correctly and I also tried it without the webSocketImpl: WebSocket but then I get the following error:
WebSocket Implementation missing with a status code of 500 for the localhost in the network tab.

[praful-chandra]

try this in split

const splitLink = process.browser ? split( //only create the split in the browser
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink ?? httpLink,
  httpLink,
) : httpLink;

[enisdenjo]

This is because you're using the splitLink and it is null. @praful-chandra example completely disables the WebSocketLink if it is not running in a browser environment.

Please refactor your code so that you dont use the WebSocketLink until process.browser === true. Like @praful-chandra showcased above.

[furkandmrblk]

Yeah it works, my solution isn't the best right now and I will try to make it clean. But I can assure you that his solution works

[furkandmrblk]

This is my work around for now:

const wsLink = process.browser
  ? new WebSocketLink({
      url: 'ws://localhost:4000/graphql',
      connectionParams: () => {
        const accessToken = getAccessToken().valueOf();

        return {
          Authorization: accessToken ? `Bearer ${accessToken}` : '',
        };
      },
    })
  : null;

const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
  credentials: 'include',
});

const splitLink =
  wsLink !== null
    ? split(
        ({ query }) => {
          const definition = getMainDefinition(query);
          return (
            definition.kind === 'OperationDefinition' &&
            definition.operation === 'subscription'
          );
        },
        wsLink,
        httpLink
      )
    : createHttpLink({
        uri: 'http://localhost:4000/graphql',
        credentials: 'include',
      });

export const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  // ssrMode: true,
  cache: new InMemoryCache(),
  link: from([refreshLink, authLink, errorLink, splitLink]),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
    },
  },
});

Thank you guys again!

[enisdenjo]

Awesome! Glad you got it working.

[enisdenjo]

The issue here is that the client is being instantiated during server-side rendering on the server. Because the browser's WebSocket is not available there, this issue appears.

Recommended solution, as suggested by @praful-chandra in #215 (reply in thread), is to skip over WebSocket parts when not in a browser environment.

const wsLink = typeof window === 'undefined' ? null : new WebSocketLink({
  url: "ws://localhost:4000/graphql",
  connectionParams: () => {
    const accessToken = getAccessToken().valueOf();

    if (!accessToken) return {};

    return {
      Authorization: accessToken ? `Bearer ${accessToken}` : '',
    };
  },
});

process.browser can be used for checking the environment too; but beware, it is deprecated: vercel/next.js#5354 (comment)

---

An alternative, would be to use the isomorphic W3CWebSocket class from websocket.

import { w3cwebsocket } from 'websocket';

const wsLink = new WebSocketLink({
  webSocketImpl: w3cwebsocket,
  url: 'ws://localhost:4000/graphql',
  connectionParams: () => {
    const accessToken = getAccessToken().valueOf();

    if (!accessToken) return {};

    return {
      Authorization: accessToken ? `Bearer ${accessToken}` : '',
    };
  },
});