Merge branch 'main' of github.com:graphql/graphiql; branch 'patch-2' …

…of github.com:patrick91/graphiql into pr/patrick91/1978
graphql · Oct 29, 2021 · e737335 · e737335
2 parents 228b8f3 + b853227
commit e737335
Show file tree

Hide file tree

Showing 52 changed files with 4,431 additions and 380 deletions.
diff --git a/.changeset/flat-flies-agree.md b/.changeset/flat-flies-agree.md
diff --git a/.changeset/fresh-tables-pretend.md b/.changeset/fresh-tables-pretend.md
@@ -0,0 +1,6 @@
+---
+"graphql-language-service-server": patch
+"graphql-language-service-cli": patch
+---
+
+Fix unknown fragment errors on save
diff --git a/.changeset/hungry-seals-fix.md b/.changeset/hungry-seals-fix.md
@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+add react 17, 18 in peerDependencies
diff --git a/.changeset/itchy-peaches-return.md b/.changeset/itchy-peaches-return.md
diff --git a/.changeset/nine-days-pretend.md b/.changeset/nine-days-pretend.md
diff --git a/.changeset/short-mirrors-occur.md b/.changeset/short-mirrors-occur.md
diff --git a/.changeset/slow-books-repeat.md b/.changeset/slow-books-repeat.md
diff --git a/.changeset/strange-pugs-brush.md b/.changeset/strange-pugs-brush.md
diff --git a/.changeset/thick-baboons-glow.md b/.changeset/thick-baboons-glow.md
@@ -0,0 +1,11 @@
+---
+"graphiql": patch
+"monaco-graphql": patch
+"codemirror-graphql": patch
+"graphql-language-service-parser": patch
+"graphql-language-service": patch
+"graphql-language-service-server": patch
+"graphql-language-service-cli": patch
+---
+
+adopt block string parsing for variables in language parser
diff --git a/.changeset/three-ligers-tie.md b/.changeset/three-ligers-tie.md
diff --git a/.eslintignore b/.eslintignore
@@ -45,6 +45,8 @@ packages/graphiql/*.html
 **/coverage/
 .nyc_output/
 
+# ignore working-group dir markdown so it's easier for people to edit from the UI
+working-group/
 
 # codemirror's build artefacts are exported from the package root
 **/codemirror-graphql/variables
@@ -61,4 +63,4 @@ packages/graphiql/*.html
 # Vendored files
 /packages/graphiql/test/vendor
 
-.changeset
+.changeset
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
@@ -40,8 +40,9 @@ jobs:
           NETLIFY_AUTH_TOKEN: ${{ secrets.AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.SITE_ID }}
         timeout-minutes: 1
+  # monaco-graphql deploy preview
   monaco-preview:
-    name: "Monaco GraphQL"
+    name: "Monaco GraphQL Example"
     runs-on: ubuntu-18.04
     steps:
       - name: Checkout
@@ -63,12 +64,39 @@ jobs:
           production-branch: main
           github-token: ${{ secrets.GITHUB_TOKEN }}
           deploy-message: "Monaco GraphQL Preview"
-          enable-pull-request-comment: true
-          enable-commit-comment: true
-          overwrites-pull-request-comment: true
           functions-dir: functions
           github-deployment-environment: "monaco-graphql"
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.AUTH_TOKEN }}
           NETLIFY_SITE_ID: 46a6b3c8-992f-4623-9a76-f1bd5d40505c
         timeout-minutes: 1
+  # Test the webpack + typescript + react consuming build
+  webpack-preview:
+    name: "GraphiQL Typescript Webpack Example"
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Yarn Install
+        uses: bahmutov/npm-install@v1
+      # ( Build to ./dist or other directory... )
+      - name: Build 
+        run: yarn build & yarn build-bundles
+
+      - name: Build Webpack Example 
+        run: yarn workspace example-graphiql-webpack run build-demo
+
+      - name: Deploy Webpack Example to Netlify
+        uses: nwtgck/actions-netlify@v1.2
+        with:
+          publish-dir: './examples/graphiql-webpack/dist'
+          production-branch: main
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: "GraphiQL Webpack Example"
+          functions-dir: functions
+          github-deployment-environment: "graphiql-webpack"
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.AUTH_TOKEN }}
+          NETLIFY_SITE_ID: aabca80b-fe63-43df-83ef-e431876560c9
+        timeout-minutes: 1
diff --git a/examples/graphiql-cdn-create-fetcher/README.md b/examples/graphiql-cdn-create-fetcher/README.md
@@ -0,0 +1,10 @@
+# GraphiQL CDN Example
+
+This example uses the CDN bundles to show the most simple example possible. It uses the latest version published on npm, via unpkg
+
+### Setup
+
+none required, just open the index.html!
+
+`open index.html` in osx
+`firefox index.html` or `chromium index.html` in linux
diff --git a/examples/graphiql-cdn-create-fetcher/index.html b/examples/graphiql-cdn-create-fetcher/index.html
@@ -0,0 +1,71 @@
+<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+    </style>
+
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bunder.
+    -->
+    <script
+      crossorigin
+      src="https://unpkg.com/react@16/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
+    ></script>
+
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+      type="application/javascript"
+    ></script>
+    <script src="/renderExample.js" type="application/javascript"></script>
+    <script>
+      // ONLY for the cdn bundle is `GraphiQL.createFetcher` included. It is not exported from graphiql npm module, for tree-shaking purposes
+      var fetcher = GraphiQL.createFetcher({
+        url: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
+      });
+
+      ReactDOM.render(
+        React.createElement(GraphiQL, {
+          fetcher: fetcher,
+          headerEditorEnabled: true,
+          defaultVariableEditorOpen: true,
+        }),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>
diff --git a/examples/graphiql-cdn-create-fetcher/package.json b/examples/graphiql-cdn-create-fetcher/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "example-graphiql-cdn-create-fetcher",
+  "version": "0.0.8",
+  "private": true,
+  "license": "MIT",
+  "description": "An example using GraphiQL and GraphiQL.createFetcher()",
+  "scripts": {
+    "build-demo": "copy index.html ../../packages/graphiql/cdn/"
+  }
+}
diff --git a/examples/graphiql-create-fetcher/README.md b/examples/graphiql-create-fetcher/README.md
@@ -0,0 +1,8 @@
+## GraphiQL Create Fetcher Example
+
+This example demonstrates how to transpile your own custom ES6 GraphiQL implementation with webpack, using `@graphiql/toolkit`'s `createGraphiQLFetcher()` to create a fetcher
+
+### Setup
+
+1. `yarn`, `yarn build` and `yarn build-bundles` (to build css) at the root of this repository, if you have not already.
+1. `yarn start` from this folder to start webpack dev server
diff --git a/examples/graphiql-create-fetcher/babel.config.js b/examples/graphiql-create-fetcher/babel.config.js
@@ -0,0 +1 @@
+module.exports = require('../../resources/babel.config');
diff --git a/examples/graphiql-create-fetcher/package.json b/examples/graphiql-create-fetcher/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "example-graphiql-webpack-create-fetcher",
+  "version": "1.1.1-alpha.8",
+  "private": true,
+  "license": "MIT",
+  "description": "A GraphiQL example with webpack and typescript demonstrating createFetcher",
+  "scripts": {
+    "build-demo": "webpack-cli && yarn copy-demo",
+    "copy-demo": "mkdirp ../../packages/graphiql/webpack && copy 'dist/*' '../../packages/graphiql/webpack'",
+    "start": "cross-env NODE_ENV=development webpack-dev-server"
+  },
+  "dependencies": {
+    "graphiql": "file:../../packages/graphiql",
+    "@graphiql/toolkit": "file:../../packages/graphiql-toolkit",
+    "graphql": "experimental-stream-defer",
+    "react": "16.13.1"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "babel-loader": "^8.1.0",
+    "cross-env": "^7.0.2",
+    "css-loader": "^3.5.1",
+    "html-webpack-plugin": "^4.2.0",
+    "react-dom": "^16.12.0",
+    "style-loader": "^1.1.3",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "worker-loader": "^2.0.0"
+  }
+}
diff --git a/examples/graphiql-webpack/src/index.html.ejs → ...raphiql-create-fetcher/src/index.html.ejs b/examples/graphiql-webpack/src/index.html.ejs → ...raphiql-create-fetcher/src/index.html.ejs
diff --git a/examples/graphiql-create-fetcher/src/index.jsx b/examples/graphiql-create-fetcher/src/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from 'react-dom';
+import GraphiQL from 'graphiql';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import 'graphiql/graphiql.css';
+
+const Logo = () => <span>{'My Corp'}</span>;
+
+// See GraphiQL Readme - Advanced Usage section for more examples like this
+GraphiQL.Logo = Logo;
+
+const fetcher = createGraphiQLFetcher({
+  url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
+});
+
+const App = () => (
+  <GraphiQL style={{ height: '100vh' }} headerEditorEnabled fetcher={fetcher} />
+);
+
+render(<App />, document.getElementById('root'));
diff --git a/examples/graphiql-create-fetcher/webpack.config.js b/examples/graphiql-create-fetcher/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('../../resources/webpack.config');
diff --git a/examples/graphiql-webpack/babel.config.js b/examples/graphiql-webpack/babel.config.js
@@ -1,14 +1 @@
-module.exports = {
-  sourceMaps: true,
-  presets: [
-    [
-      require.resolve('@babel/preset-env'),
-      {
-        targets: 'latest 2 versions',
-        modules: false,
-      },
-    ],
-    require.resolve('@babel/preset-react'),
-  ],
-  plugins: [require.resolve('@babel/plugin-proposal-class-properties')],
-};
+module.exports = require('../../resources/babel.config');
diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
@@ -5,14 +5,13 @@
   "license": "MIT",
   "description": "A GraphiQL example with webpack and typescript",
   "scripts": {
-    "build-demo": "webpack-cli && yarn copy-demo",
-    "copy-demo": "mkdirp ../../packages/graphiql/webpack && copy 'dist/*' '../../packages/graphiql/webpack'",
+    "build-demo": "webpack-cli",
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
   "dependencies": {
     "graphiql": "file:../../packages/graphiql",
     "graphql": "experimental-stream-defer",
-    "react": "16.13.1"
+    "react": "17.0.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.8.3",

diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
@@ -11,14 +11,16 @@ GraphiQL.Logo = Logo;
 const App = () => (
   <GraphiQL
     style={{ height: '100vh' }}
-    fetcher={async graphQLParams => {
+    headerEditorEnabled
+    fetcher={async (graphQLParams, headers) => {
       const data = await fetch(
         'https://swapi-graphql.netlify.app/.netlify/functions/index',
         {
           method: 'POST',
           headers: {
             Accept: 'application/json',
             'Content-Type': 'application/json',
+            ...headers,
           },
           body: JSON.stringify(graphQLParams),
           credentials: 'same-origin',