Moving graphql-ws to a dynamic import and display a nice message when not found

.changeset/four-mangos-warn.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/toolkit': patch
+---
+
+Move `graphql-ws` dependency to a dynamic import, and add a nice error message when it's not installed

packages/graphiql-toolkit/src/create-fetcher/__tests__/lib.spec.ts

@@ -102,3 +102,18 @@ describe('getWsFetcher', () => {
     expect(SubscriptionClient.mock.calls).toHaveLength(0);
   });
 });
+
+describe('missing graphql-ws dependency', () => {
+  it('should throw a nice error', () => {
+    jest.resetModules();
+    jest.doMock('graphql-ws', () => {
+      throw { code: 'MODULE_NOT_FOUND' };
+    });
+
+    expect(() =>
+      createWebsocketsFetcherFromUrl('wss://example.com'),
+    ).toThrowError(
+      /You need to install the 'graphql-ws' package to use websockets when passing a 'subscriptionUrl'/,
+    );
+  });
+});

packages/graphiql-toolkit/src/create-fetcher/lib.ts

@@ -1,10 +1,10 @@
 import { DocumentNode, visit, GraphQLError } from 'graphql';
 import { meros } from 'meros';
 import {
-  createClient,
   Client,
   ClientOptions,
   ExecutionResult,
+  createClient as createClientType,
 } from 'graphql-ws';
 import {
   isAsyncIterable,
@@ -19,6 +19,10 @@ import type {
   CreateFetcherOptions,
 } from './types';
 
+const errorHasCode = (err: unknown): err is { code: string } => {
+  return typeof err === 'object' && err !== null && 'code' in err;
+};
+
 /**
  * Returns true if the name matches a subscription in the AST
  *
@@ -76,13 +80,24 @@ export const createWebsocketsFetcherFromUrl = (
 ) => {
   let wsClient;
   try {
+    const { createClient } = require('graphql-ws') as {
+      createClient: typeof createClientType;
+    };
+
     // TODO: defaults?
     wsClient = createClient({
       url,
       connectionParams,
     });
     return createWebsocketsFetcherFromClient(wsClient);
   } catch (err) {
+    if (errorHasCode(err)) {
+      if (err.code === 'MODULE_NOT_FOUND') {
+        throw Error(
+          "You need to install the 'graphql-ws' package to use websockets when passing a 'subscriptionUrl'",
+        );
+      }
+    }
     console.error(`Error creating websocket client for:\n${url}\n\n${err}`);
   }
 };