add sse

Author: dimaMachina

packages/graphiql-toolkit/package.json

@@ -32,17 +32,22 @@
   "devDependencies": {
     "graphql": "^17.0.0-alpha.7",
     "graphql-ws": "^5.5.5",
+    "graphql-sse": "^2.5.3",
     "isomorphic-fetch": "^3.0.0",
     "subscriptions-transport-ws": "0.11.0",
     "tsup": "^8.2.4"
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
-    "graphql-ws": ">= 4.5.0"
+    "graphql-ws": ">= 4.5.0",
+    "graphql-sse": "^2"
   },
   "peerDependenciesMeta": {
     "graphql-ws": {
       "optional": true
+    },
+    "graphql-sse": {
+      "optional": true
     }
   },
   "keywords": [

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

@@ -0,0 +1,84 @@
+import type {
+  ClientOptions,
+  createClient as createClientType,
+  ExecutionResult,
+} from 'graphql-sse';
+import { Fetcher, FetcherParams } from './types';
+
+export async function createSseFetcher(opts: ClientOptions): Promise<Fetcher> {
+  const { createClient } =
+    process.env.USE_IMPORT === 'false'
+      ? (require('graphql-sse') as { createClient: typeof createClientType })
+      : await import('graphql-sse');
+
+  const sseClient = createClient({
+    retryAttempts: 0,
+    // @ts-expect-error
+    singleConnection: true, // or use false if you have an HTTP/2 server
+    // @ts-expect-error
+    lazy: false, // connect as soon as the page opens
+    ...opts,
+  });
+
+  function subscribe(payload: FetcherParams) {
+    let deferred: {
+      resolve: (arg: boolean) => void;
+      reject: (arg: unknown) => void;
+    };
+
+    const pending: ExecutionResult<Record<string, unknown>, unknown>[] = [];
+    let throwMe: unknown;
+    let done = false;
+
+    const dispose = sseClient.subscribe(
+      {
+        ...payload,
+        // types are different with FetcherParams
+        operationName: payload.operationName ?? undefined,
+      },
+      {
+        next(data) {
+          pending.push(data);
+          deferred?.resolve(false);
+        },
+        error(err) {
+          throwMe = err;
+          deferred?.reject(throwMe);
+        },
+        complete() {
+          done = true;
+          deferred?.resolve(true);
+        },
+      },
+    );
+
+    return {
+      [Symbol.asyncIterator]() {
+        return this;
+      },
+      async next() {
+        if (done) {
+          return { done: true, value: undefined };
+        }
+        if (throwMe) {
+          throw throwMe;
+        }
+        if (pending.length) {
+          return { value: pending.shift() };
+        }
+        return (await new Promise((resolve, reject) => {
+          deferred = { resolve, reject };
+        }))
+          ? { done: true, value: undefined }
+          : { value: pending.shift() };
+      },
+      async return() {
+        dispose();
+        return { done: true, value: undefined };
+      },
+    };
+  }
+
+  // @ts-expect-error todo: fix type
+  return subscribe;
+}

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

@@ -6,11 +6,12 @@ import {
   isSubscriptionWithName,
   getWsFetcher,
 } from './lib';
+import { createSseFetcher } from './create-sse-fetcher';
 
 /**
- * build a GraphiQL fetcher that is:
+ * Build a GraphiQL fetcher that is:
  * - backwards compatible
- * - optionally supports graphql-ws or `
+ * - optionally supports graphql-ws or graphql-sse
  */
 export function createGraphiQLFetcher(options: CreateFetcherOptions): Fetcher {
   const httpFetch =
@@ -40,7 +41,13 @@ export function createGraphiQLFetcher(options: CreateFetcherOptions): Fetcher {
           graphQLParams.operationName || undefined,
         )
       : false;
+
     if (isSubscription) {
+      if (options.sseUrl) {
+        const sseFetcher = await createSseFetcher({ url: options.sseUrl });
+        return sseFetcher(graphQLParams);
+      }
+
       const wsFetcher = await getWsFetcher(options, fetcherOpts);
 
       if (!wsFetcher) {

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

@@ -84,6 +84,10 @@ export interface CreateFetcherOptions {
    * url for websocket subscription requests
    */
   subscriptionUrl?: string;
+  /**
+   * url for graphql-sse
+   */
+  sseUrl?: string;
   /**
    * `wsClient` implementation that matches `ws-graphql` signature,
    * whether via `createClient()` itself or another client.

packages/graphiql-toolkit/tsup.config.ts

@@ -4,7 +4,6 @@ const opts: Options = {
   entry: ['src/**/*.ts', '!**/__tests__'],
   bundle: false,
   clean: true,
-  dts: true,
   minifySyntax: true,
 };
 
@@ -17,6 +16,7 @@ export default defineConfig([
     env: {
       USE_IMPORT: 'true',
     },
+    dts: true,
   },
   {
     ...opts,

packages/graphiql/cypress/e2e/incremental-delivery.cy.ts

@@ -19,36 +19,16 @@ describeOrSkip('IncrementalDelivery support via fetcher', () => {
     const mockStreamSuccess = {
       data: {
         streamable: [
-          {
-            text: 'Hi',
-          },
-          {
-            text: '你好',
-          },
-          {
-            text: 'Hola',
-          },
-          {
-            text: 'أهلاً',
-          },
-          {
-            text: 'Bonjour',
-          },
-          {
-            text: 'سلام',
-          },
-          {
-            text: '안녕',
-          },
-          {
-            text: 'Ciao',
-          },
-          {
-            text: 'हेलो',
-          },
-          {
-            text: 'Здорово',
-          },
+          { text: 'Hi' },
+          { text: '你好' },
+          { text: 'Hola' },
+          { text: 'أهلاً' },
+          { text: 'Bonjour' },
+          { text: 'سلام' },
+          { text: '안녕' },
+          { text: 'Ciao' },
+          { text: 'हेलो' },
+          { text: 'Здорово' },
         ],
       },
     };
@@ -141,22 +121,10 @@ describeOrSkip('IncrementalDelivery support via fetcher', () => {
           person: {
             name: 'Mark',
             friends: [
-              {
-                name: 'James',
-                age: 1000,
-              },
-              {
-                name: 'Mary',
-                age: 1000,
-              },
-              {
-                name: 'John',
-                age: 1000,
-              },
-              {
-                name: 'Patrica',
-                age: 1000,
-              },
+              { name: 'James', age: 1000 },
+              { name: 'Mary', age: 1000 },
+              { name: 'John', age: 1000 },
+              { name: 'Patrica', age: 1000 },
             ],
             age: 1000,
           },

packages/graphiql/resources/renderExample.js

@@ -78,6 +78,7 @@ root.render(
     fetcher: GraphiQL.createFetcher({
       url: getSchemaUrl(),
       subscriptionUrl: 'ws://localhost:8081/subscriptions',
+      sseUrl: parameters.sseUrl
     }),
     query: parameters.query,
     variables: parameters.variables,

packages/graphiql/test/beforeDevServer.js

@@ -9,7 +9,7 @@ const express = require('express');
 const path = require('node:path');
 // eslint-disable-next-line import-x/no-extraneous-dependencies
 const { createHandler } = require('graphql-http/lib/use/express');
-const schema = require('./schema');
+const { schema } = require('./schema');
 const badSchema = require('../cypress/fixtures/bad-schema.json');
 
 module.exports = function beforeDevServer(app, _server, _compiler) {

packages/graphiql/test/e2e-server.js

@@ -15,8 +15,9 @@ const {
   sendResult,
 } = require('graphql-helix'); // update when `graphql-http` is upgraded to support multipart requests for incremental delivery https://github.com/graphql/graphiql/pull/3682#discussion_r1715545279
 const WebSocketsServer = require('./afterDevServer');
-const schema = require('./schema');
+const { schema, sseSchema } = require('./schema');
 const { customExecute } = require('./execute');
+const { createHandler } = require('graphql-sse/lib/use/express');
 
 const app = express();
 
@@ -42,6 +43,33 @@ async function handler(req, res) {
   sendResult(result, res);
 }
 
+app.use('/graphql/stream', (req, res, next) => {
+  // Fixes
+  // Access to fetch at 'http://localhost:8080/graphql/stream' from origin 'http://localhost:5173' has been blocked by
+  // CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'
+  // header is present on the requested resource. If an opaque response serves your needs, set the request's mode to
+  // 'no-cors' to fetch the resource with CORS disabled.
+
+  // CORS headers
+  res.header('Access-Control-Allow-Origin', '*'); // restrict it to the required domain
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST');
+  // Set custom headers for CORS
+  res.header(
+    'Access-Control-Allow-Headers',
+    'content-type,x-graphql-event-stream-token',
+  );
+
+  if (req.method === 'OPTIONS') {
+    return res.status(200).end();
+  }
+  next();
+});
+
+// Create the GraphQL over SSE handler
+const sseHandler = createHandler({ schema: sseSchema });
+// Serve all methods on `/graphql/stream`
+app.use('/graphql/stream', sseHandler);
+
 // Server
 app.use(express.json());
 

packages/graphiql/test/schema.js

@@ -5,9 +5,6 @@
  *  This source code is licensed under the MIT license found in the
  *  LICENSE file in the root directory of this source tree.
  */
-
-const graphql = require('graphql');
-
 const {
   GraphQLSchema,
   GraphQLObjectType,
@@ -25,12 +22,7 @@ const {
   GraphQLStreamDirective,
   specifiedDirectives,
   version,
-} = graphql;
-
-const directives =
-  parseInt(version, 10) > 16
-    ? [...specifiedDirectives, GraphQLDeferDirective, GraphQLStreamDirective]
-    : specifiedDirectives;
+} = require('graphql');
 
 // Test Schema
 const TestEnum = new GraphQLEnumType({
@@ -392,12 +384,20 @@ const TestSubscriptionType = new GraphQLObjectType({
   },
 });
 
-const myTestSchema = new GraphQLSchema({
+const schemaConfig = {
   query: TestType,
   mutation: TestMutationType,
   subscription: TestSubscriptionType,
   description: 'This is a test schema for GraphiQL',
-  directives,
+};
+
+exports.schema = new GraphQLSchema({
+  ...schemaConfig,
+  directives:
+    parseInt(version, 10) > 16
+      ? [...specifiedDirectives, GraphQLDeferDirective, GraphQLStreamDirective]
+      : specifiedDirectives,
 });
 
-module.exports = myTestSchema;
+// Same schema but without defer/stream directives
+exports.sseSchema = new GraphQLSchema(schemaConfig);