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

Author: junminstorage

README.md

@@ -138,6 +138,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
+
 - **`rootValue`**: A value to pass as the `rootValue` to the `execute()`
   function from [`GraphQL.js/src/execute.js`](https://github.com/graphql/graphql-js/blob/main/src/execution/execute.js#L129).
 

examples/index_subscription.ts

@@ -0,0 +1,48 @@
+import { createServer } from 'http';
+
+import express from 'express';
+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 = express();
+app.use(
+  '/graphql',
+  graphqlHTTP({
+    schema,
+    rootValue,
+    graphiql: {
+      subscriptionEndpoint,
+      websocketClient: 'v1',
+    },
+  }),
+);
+
+const server = createServer(app);
+
+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,53 @@
+import { createServer } from 'http';
+
+import express from 'express';
+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 = express();
+app.use(
+  '/graphql',
+  graphqlHTTP({
+    schema,
+    rootValue,
+    graphiql: { subscriptionEndpoint },
+  }),
+);
+
+const ws = createServer(app);
+
+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,
+};