feat: support graphql-ws client for GraphiQL IDE (#152)

README.md

@@ -150,6 +150,8 @@ The `graphqlHTTP` function accepts the following options:
 
   - **`subscriptionEndpoint`**: An optional GraphQL string contains the WebSocket server url for subscription.
 
+  - **`websocketClient`**: An optional GraphQL string for websocket client used for subscription, `v0`: subscriptions-transport-ws, `v1`: graphql-ws. Defaults to `v0` if not provided
+
   - **`shouldPersistHeaders`**
 
   - **`editorTheme`**: By passing an object you may change the theme of GraphiQL.

examples/index.ts

@@ -1,6 +1,5 @@
 import Koa from 'koa';
 import mount from 'koa-mount';
-
 import { buildSchema } from 'graphql';
 
 import { graphqlHTTP } from '../src/index';

examples/index_subscription.ts

@@ -0,0 +1,51 @@
+import { createServer } from 'http';
+
+import Koa from 'koa';
+import mount from 'koa-mount';
+import { execute, subscribe } from 'graphql';
+import ws from 'ws';
+import { useServer } from 'graphql-ws/lib/use/ws';
+
+import { graphqlHTTP } from '../src';
+
+import { schema, roots, rootValue } from './schema';
+
+const PORT = 4000;
+const subscriptionEndpoint = `ws://localhost:${PORT}/subscriptions`;
+
+const app = new Koa();
+app.use(
+  mount(
+    '/graphql',
+    graphqlHTTP({
+      schema,
+      rootValue,
+      graphiql: {
+        subscriptionEndpoint,
+        websocketClient: 'v1',
+      },
+    }),
+  ),
+);
+
+const server = createServer(app.callback());
+
+const wsServer = new ws.Server({
+  server,
+  path: '/subscriptions',
+});
+
+server.listen(PORT, () => {
+  useServer(
+    {
+      schema,
+      roots,
+      execute,
+      subscribe,
+    },
+    wsServer,
+  );
+  console.info(
+    `Running a GraphQL API server with subscriptions at http://localhost:${PORT}/graphql`,
+  );
+});

examples/index_subscription_legacy.ts

@@ -0,0 +1,56 @@
+import { createServer } from 'http';
+
+import Koa from 'koa';
+import mount from 'koa-mount';
+import { execute, subscribe } from 'graphql';
+import { SubscriptionServer } from 'subscriptions-transport-ws';
+
+import { graphqlHTTP } from '../src';
+
+import { schema, rootValue } from './schema';
+
+const PORT = 4000;
+const subscriptionEndpoint = `ws://localhost:${PORT}/subscriptions`;
+
+const app = new Koa();
+app.use(
+  mount(
+    '/graphql',
+    graphqlHTTP({
+      schema,
+      rootValue,
+      graphiql: { subscriptionEndpoint },
+    }),
+  ),
+);
+
+const ws = createServer(app.callback());
+
+ws.listen(PORT, () => {
+  console.log(
+    `Running a GraphQL API server with subscriptions at http://localhost:${PORT}/graphql`,
+  );
+});
+
+const onConnect = (_: any, __: any) => {
+  console.log('connecting ....');
+};
+
+const onDisconnect = (_: any) => {
+  console.log('disconnecting ...');
+};
+
+SubscriptionServer.create(
+  {
+    schema,
+    rootValue,
+    execute,
+    subscribe,
+    onConnect,
+    onDisconnect,
+  },
+  {
+    server: ws,
+    path: '/subscriptions',
+  },
+);

examples/schema.ts

@@ -0,0 +1,37 @@
+import { buildSchema } from 'graphql';
+
+function sleep(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export const schema = buildSchema(`
+type Query {
+    hello: String
+}
+type Subscription {
+    countDown: Int
+}
+`);
+
+export const roots = {
+  Query: {
+    hello: () => 'Hello World!',
+  },
+  subscription: {
+    /* eslint no-await-in-loop: "off" */
+
+    countDown: async function* fiveToOne() {
+      for (const number of [5, 4, 3, 2, 1]) {
+        await sleep(1000); // slow down a bit so user can see the count down on GraphiQL
+        yield { countDown: number };
+      }
+    },
+  },
+};
+
+export const rootValue = {
+  hello: roots.Query.hello,
+  countDown: roots.subscription.countDown,
+};