feat: @defer, @stream, websockets support in a createGraphiQLFetcher utility (#1770)

- support for `@defer` and `@stream` in `GraphiQL` itself on fetcher execution and when handling stream payloads
- introduce `@graphiql/toolkit` for types and utilities used to compose `GraphiQL` and other related libraries
- introduce `@graphiql/create-fetcher` to accept simplified parameters to generate a `fetcher` that covers the most commonly used `graphql-over-http` transport spec proposals. using `meros` for multipart http, and `graphql-ws` for websockets subscriptions.
- use `graphql` and `graphql-express` `experimental-defer-stream` branch in development until it's merged
- add cypress e2e tests for `@stream` in different scenarios
- add some unit tests for `createGraphiQLFetcher`

Author: acao

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
     node: true,
     browser: true,
     jest: true,
+    'jest/globals': true,
   },
 
   extends: [
@@ -294,6 +295,9 @@ module.exports = {
     'react/prefer-stateless-function': 'error',
     'react/react-in-jsx-scope': 'error',
     'react/self-closing-comp': 'error',
+    'react/display-name': 'warn',
+    // Jest rules
+    'jest/no-conditional-expect': 0,
   },
 
   plugins: ['import', 'prefer-object-spread', '@typescript-eslint'],
@@ -310,14 +314,18 @@ module.exports = {
       },
     },
     {
+      excludedFiles: ['**/cypress/**/*.{js,ts}'],
       files: [
-        'packages/{*graphql-*,graphiql}/src/**',
         '**/__{tests,mocks}__/*.{js,jsx,ts,tsx}',
+        '**/*.spec.{ts,js.jsx.tsx}',
       ],
       extends: ['plugin:jest/recommended'],
       env: {
         'jest/globals': true,
       },
+      rules: {
+        'jest/no-conditional-expect': 0,
+      },
     },
     // Rules for TypeScript only
     {
@@ -326,28 +334,6 @@ module.exports = {
         'no-unused-vars': 'off',
       },
     },
-    // Rules for Babel & Flow only
-    {
-      files: ['packages/codemirror-graphql/src/**/*.js'],
-      parser: 'babel-eslint',
-      plugins: ['flowtype', 'babel'],
-      rules: {
-        // flowtype (https://github.com/gajus/eslint-plugin-flowtype)
-        'flowtype/boolean-style': 1,
-        'flowtype/define-flow-type': 1,
-        'flowtype/no-dupe-keys': 0,
-        'flowtype/no-primitive-constructor-types': 1,
-        'flowtype/no-weak-types': 0,
-        'flowtype/require-parameter-type': 0,
-        'flowtype/require-return-type': 0,
-        'flowtype/require-valid-file-annotation': 0,
-        'flowtype/require-variable-type': 0,
-        'flowtype/sort-keys': 0,
-        'flowtype/type-id-match': 0,
-        'flowtype/use-flow-type': 1,
-        'flowtype/valid-syntax': 0,
-      },
-    },
     {
       // Converted from 'dependencies' options in ancient config
       files: ['**/spec/**', '**/sample-*/**'],

.gitignore

@@ -26,3 +26,6 @@ lerna-debug.log
 .yarnrc
 yarn-1.18.0.js
 *.orig
+
+# Local Netlify folder
+.netlify

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+access=public

examples/graphiql-create-react-app/package.json

@@ -3,10 +3,8 @@
   "version": "0.1.11-alpha.8",
   "private": true,
   "dependencies": {
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.6",
     "graphiql": "file:../../packages/graphiql",
-    "graphql": "^15.0.0",
+    "graphql": "experimental-stream-defer",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

examples/graphiql-parcel/package.json

@@ -22,10 +22,8 @@
     ]
   },
   "dependencies": {
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.6",
     "graphiql": "file:../../packages/graphiql",
-    "graphql": "15.0.0",
+    "graphql": "experimental-stream-defer",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "typescript": "^3.4.4"

examples/graphiql-webpack/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "graphiql": "file:../../packages/graphiql",
-    "graphql": "15.0.0",
+    "graphql": "experimental-stream-defer",
     "react": "16.13.1"
   },
   "devDependencies": {

examples/monaco-graphql-webpack/package.json

@@ -11,7 +11,7 @@
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
   "dependencies": {
-    "graphql": "14.6.0",
+    "graphql": "experimental-stream-defer",
     "monaco-graphql": "file:../../packages/monaco-graphql",
     "prettier": "^2.0.2"
   },

functions/schema-demo.js

@@ -0,0 +1,49 @@
+/* example using https://github.com/awslabs/aws-serverless-express */
+const express = require('express');
+const { graphqlHTTP } = require('express-graphql');
+const awsServerlessExpress = require('aws-serverless-express');
+const schema = require('../packages/graphiql/test/schema');
+const cors = require('cors');
+
+const binaryMimeTypes = [
+  'application/javascript',
+  'application/json',
+  'font/eot',
+  'font/opentype',
+  'font/otf',
+  'image/jpeg',
+  'image/png',
+  'image/svg+xml',
+  'text/css',
+  'text/html',
+  'text/javascript',
+  'multipart/mixed',
+];
+
+const app = express();
+
+app.use(cors({ origin: '*' }));
+
+// Requests to /graphql redirect to /
+app.all('/graphql', (req, res) => res.redirect('/'));
+
+// Finally, serve up the GraphQL Schema itself
+app.use(
+  '/',
+  graphqlHTTP(() => ({ schema })),
+);
+
+const server = awsServerlessExpress.createServer(app, null, binaryMimeTypes);
+
+exports.handler = (event, context) =>
+  awsServerlessExpress.proxy(server, event, context);
+
+// // Server
+// app.post('/graphql', graphqlHTTP({ schema }));
+
+// // app.get('/graphql', graphQLMiddleware);
+// // Export Lambda handler
+
+// exports.handler = serverless(app, {
+//   httpMethod: 'POST'
+// })

package.json

@@ -1,10 +1,12 @@
 {
   "private": true,
   "license": "MIT",
-  "workspaces": [
-    "packages/*",
-    "examples/*"
-  ],
+  "workspaces": {
+    "packages": [
+      "packages/*",
+      "examples/*"
+    ]
+  },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [
       "eslint --fix",
@@ -80,20 +82,25 @@
     "@octokit/rest": "^18.0.12",
     "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
     "@testing-library/jest-dom": "^5.4.0",
+    "@types/aws-serverless-express": "^3.3.3",
     "@types/codemirror": "^0.0.90",
+    "@types/express": "^4.17.11",
     "@types/fetch-mock": "^7.3.2",
-    "@types/jest": "^26.0.8",
-    "@types/node": "^13.11.1",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.22",
     "@types/prettier": "^2.0.0",
     "@types/theme-ui": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
+    "@types/ws": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.0",
+    "@typescript-eslint/parser": "^4.14.0",
+    "aws-serverless-express": "^3.4.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^25.3.0",
     "conventional-changelog-conventionalcommits": "^4.2.3",
     "copy": "^0.3.2",
+    "cors": "^2.8.5",
     "cross-env": "^7.0.2",
-    "cypress": "^4.3.0",
+    "cypress": "^4.7.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-babel": "^5.3.0",
@@ -104,9 +111,9 @@
     "eslint-plugin-prefer-object-spread": "1.2.1",
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
+    "express": "^4.17.1",
     "fetch-mock": "6.5.2",
     "flow-bin": "^0.119.1",
-    "graphql": "^15.4.0",
     "husky": "^4.2.3",
     "jest": "^25.3.0",
     "jest-environment-jsdom": "^25.3.0",
@@ -117,9 +124,10 @@
     "mkdirp": "^1.0.4",
     "prettier": "^2.0.4",
     "rimraf": "^3.0.2",
+    "serverless-http": "^2.7.0",
     "ts-jest": "^25.3.1",
     "typedoc": "^0.19.2",
-    "typescript": "^3.9.5",
+    "typescript": "^4.1.3",
     "whatwg-url": "^8.4.0"
   }
 }

packages/codemirror-graphql/package.json

@@ -53,7 +53,7 @@
   "devDependencies": {
     "codemirror": "^5.52.2",
     "cross-env": "^7.0.2",
-    "graphql": "15.4.0",
+    "graphql": "experimental-stream-defer",
     "jsdom": "^16.1.0",
     "rimraf": "^3.0.0",
     "sane": "2.0.0"

packages/graphiql-2-rfc-context/package.json

@@ -77,10 +77,10 @@
     "cssnano": "^4.1.10",
     "error-overlay-webpack-plugin": "^0.4.1",
     "express": "4.17.1",
-    "express-graphql": "0.9.0",
+    "express-graphql": "experimental-stream-defer",
     "file-loader": "6.2.0",
     "fork-ts-checker-webpack-plugin": "4.1.3",
-    "graphql": "^15.4.0",
+    "graphql": "experimental-stream-defer",
     "html-webpack-plugin": "^4.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.8.0",

packages/graphiql-2-rfc-context/src/components/__tests__/GraphiQL.spec.tsx

@@ -251,7 +251,7 @@ describe('GraphiQL', () => {
     expect(container.querySelectorAll('.history-label')).toHaveLength(2);
   });
 
-  it('will save query if variables are different ', () => {
+  it('will save query if variables are different', () => {
     const { getByTitle, container } = render(
       <GraphiQL
         fetcher={noOpFetcher}
@@ -276,7 +276,7 @@ describe('GraphiQL', () => {
     expect(container.querySelectorAll('.history-label')).toHaveLength(2);
   });
 
-  it('will save query if headers are different ', () => {
+  it('will save query if headers are different', () => {
     const { getByTitle, getByText, container } = render(
       <GraphiQL
         fetcher={noOpFetcher}
@@ -308,9 +308,6 @@ describe('GraphiQL', () => {
     const MyFunctionalComponent = () => {
       return null;
     };
-    const wrap = component => () => (
-      <div className="test-wrapper">{component}</div>
-    );
 
     it('properly ignores fragments', () => {
       const myFragment = (

packages/graphiql-2-rfc-context/src/utility/__tests__/mergeAst.spec.ts

@@ -30,7 +30,7 @@ const schema = new GraphQLSchema({
 
 describe('MergeAst', () => {
   fixtures.forEach(fixture => {
-    it(fixture.desc, () => {
+    it(`${fixture.desc}`, () => {
       const result = print(mergeAst(parse(fixture.query))).replace(/\s/g, '');
       const result2 = print(mergeAst(parse(fixture.query), schema)).replace(
         /\s/g,