title: Apollo GraphQL: GraphQLWsLink (Subscriptions) Troubles. Cannot get WebSocket implementation to work w/ Next.js
body: <p>So I have a GraphQL server that I wrote in Go, following <a href="https://betterprogramming.pub/graphql-subscriptions-with-go-6eb25dec5cd1" rel="nofollow noreferrer">this tutorial</a> pretty closely. I have my front-end written as a Next.js application, and I am currently trying to create a client to connect to my server and even following the <a href="https://www.apollographql.com/docs/react/data/subscriptions/" rel="nofollow noreferrer">subscription docs</a> to the T, I cannot seem to get it to work. How is it that the examples provided do not include a <code>webSocketImpl</code>?</p>
  <p>If I don't provide a <code>webSocketImpl</code>, I get this:</p>
  <pre><code>Error: WebSocket implementation missing; on Node you can `import WebSocket from 'ws';` and pass `webSocketImpl: WebSocket` to `createClient`
  </code></pre>
  <p>So, naturally, I <code>import { WebSocket } from &quot;ws&quot;;</code> , and have:</p>
  <pre><code>const wsLink = new GraphQLWsLink(
      createClient({
          webSocketImpl: WebSocket,
          url: &quot;ws://localhost:8080/subscriptions&quot;,
      })
  );
  </code></pre>
  <p>Where I then get:</p>
  <pre><code>error - ./node_modules/node-gyp-build/index.js:1:0
  Module not found: Can't resolve 'fs'
  </code></pre>
  <p>Here is the full code, basically all I need is to create a ApolloClient and export it for use in my React code.</p>
  <pre><code>import { ApolloClient, HttpLink, InMemoryCache, split } from &quot;@apollo/client&quot;;
  import { GraphQLWsLink } from &quot;@apollo/client/link/subscriptions&quot;;
  import { createClient } from &quot;graphql-ws&quot;;
  import { getMainDefinition } from &quot;@apollo/client/utilities&quot;;
  import { WebSocket } from &quot;ws&quot;;
  
  const wsLink = new GraphQLWsLink(
      createClient({
          webSocketImpl: WebSocket,
          url: &quot;ws://localhost:8080/subscriptions&quot;,
      })
  );
  
  const httpLink = new HttpLink({
      uri: `http://localhost:8080/query`,
  });
  
  const link = split(
      ({ query }) =&gt; {
          const def = getMainDefinition(query);
          return (
              def.kind === &quot;OperationDefinition&quot; &amp;&amp; def.operation === &quot;subscription&quot;
          );
      },
      wsLink,
      httpLink
  );
  
  export const Client = new ApolloClient({
      link,
      cache: new InMemoryCache(),
  });
  
  </code></pre>
  <p>Am I totally missing something here? Is there not a default WebSocket implementation in my installation? Obviously the <code>&quot;ws&quot;</code> implementation isn't cutting it, probably because <code>fs</code> is not available in-browser?</p>