feat: defer, stream, websockets support in a createGraphiQLFetcher ut…

…ility (#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`
- add `changesets` because lerna publish no longer works. get rid of commitlint

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "minor",
+  "ignore": ["example-*", "graphiql-2-rfc-context*"]
+}

.changeset/early-stingrays-pay.md

@@ -0,0 +1,14 @@
+---
+'graphiql': minor
+'@graphiql/create-fetcher': minor
+'@graphiql/toolkit': minor
+---
+
+`@defer`, `@stream`, and `graphql-ws` 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`

.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-*/**'],

.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@master
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+      - name: Setup Node.js 12.x
+        uses: actions/setup-node@master
+        with:
+          node-version: 12.x
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@master
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: yarn release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.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

RELEASING.md

@@ -1,56 +1,3 @@
 # Cutting New Releases
 
-We chose a manual process which is pretty simple and flexible because of our conventional commit messages.
-
-If you have NPM privileges, you have the ability to cut new releases of the packages herein.
-
-## Requirements
-
-You'll need:
-
-- `GH_TOKEN` : a github user token as an environment variable
-- `git` command line installed, obviously!
-- to run `yarn login` first to ensure you're authenticated for publishing
-- your npm 2FA should be enabled, and you should have your second factor device handy for publish
-- your remote should be named `origin` for github, and should be the ssh url
-- (coming soon) GPG key uploaded to account for signing
-
-Note: Always publish from `master`. Always execute `yarn test` beforehand, and check the `examples/graphiql-webpack` to ensure there aren't any webpack build bugs.
-
-## Prereleases
-
-```sh
-lerna publish --conventional-prerelease graphiql --otp <your-otp>
-```
-
-for a specific package, or leave blank for all packages.
-
-It will automatically generate pre-release versions that reflect the conventional pattern from the commit log - so some packages may end up pre-alpha, others may be pre-minor, etc.
-
-For example, if you made a change to `graphql-language-service-utils` there would be a new version for every single package. But if you made a change to `graphiql` in the commits since the last publish, there should only be a new pre-release version for `graphiql` when you run this command.
-
-You can also `--amend` a previous release upon publishing, overriding the previous git tags
-
-## Graduating Prereleases
-
-Now, after creating and publishing some pre-release versions, if you want to graduate them you can do so with a command that works in very much the same way as above.
-
-```sh
-lerna publish --conventional-graduate * --otp <your token>
-```
-
-Would graduate all pre-alphas to patch releases, pre-minors to minor releases, etc.
-
-You can also give a comma seperated list of packages, or just a single one, as with `prereleases`
-
-```sh
-lerna publish --conventional-graduate codemirror-graphql --otp <your token>
-```
-
-## Full Releases
-
-```sh
-lerna publish --otp <your token>
-```
-
-Will automatically detect and generate changelog/etc with appropriate versions and entries for all subpackage, no need to supply package names or an asterisk
+TODO: Redo for `changesets`. See [`Changesets Readme`](./.changeset/README.md)

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

@@ -1,5 +1,5 @@
 {
-  "name": "graphiql-parcel-example",
+  "name": "example-graphiql-parcel",
   "version": "1.1.10-alpha.8",
   "license": "MIT",
   "description": "GraphiQL Parcel Example",
@@ -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'
+// })