fix(explorer): Fix page refresh query history by updating GraphiQL to 3.x (#1397)

Author: Dobefu

assets/explorer/.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["es2015", "stage-0", "react"],
-  "plugins": ["syntax-dynamic-import"]
+  "presets": [ "@babel/env", "@babel/react" ],
+  "plugins": [ "syntax-dynamic-import" ]
 }

assets/explorer/.eslintrc

@@ -1,9 +1,38 @@
 {
-  "parser": "babel-eslint",
-  "extends": "airbnb/base",
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "airbnb-base",
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    }
+  },
+  "rules": {
+    "import/no-unresolved": [
+      2,
+      {
+        "ignore": [
+          "drupal",
+          "jquery"
+        ]
+      }
+    ]
+  },
   "globals": {
     "debug": true,
     "jQuery": true,
-    "Drupal": true
+    "Drupal": true,
+    "once": true
   }
 }

assets/explorer/dist/bundle.min.js

@@ -1,40 +1,67 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
 
 /*!
- * escape-html
- * Copyright(c) 2012-2013 TJ Holowaychuk
- * Copyright(c) 2015 Andreas Lubbe
- * Copyright(c) 2015 Tiancheng "Timothy" Gu
- * MIT Licensed
+ * is-primitive <https://github.com/jonschlinkert/is-primitive>
+ *
+ * Copyright (c) 2014-present, Jon Schlinkert.
+ * Released under the MIT License.
  */
 
-/** @license React v0.19.1
- * scheduler.production.min.js
+/*!
+ * isobject <https://github.com/jonschlinkert/isobject>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+/*!
+ * set-value <https://github.com/jonschlinkert/set-value>
+ *
+ * Copyright (c) Jon Schlinkert (https://github.com/jonschlinkert).
+ * Released under the MIT License.
+ */
+
+/**
+ * @license React
+ * react-dom.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.14.0
- * react-dom.production.min.js
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.14.0
+/**
+ * @license React
  * react.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

assets/explorer/dist/bundle.min.js.LICENSE.txt

@@ -2,3 +2,8 @@
   position: relative;
   height: 650px;
 }
+
+.graphiql-dialog-overlay,
+.graphiql-dialog {
+  z-index: 101;
+}

assets/explorer/dist/container.css

@@ -3,30 +3,42 @@
   "scripts": {
     "clean": "rimraf dist",
     "build": "npm run clean && NODE_ENV=production webpack && echo \"gzipped, the global build is `gzip -c dist/bundle.min.js | wc -c` bytes\"",
-    "lint": "eslint src"
+    "lint": "eslint 'src/**/*.{js,jsx}'",
+    "dev": "webpack --mode development --watch"
   },
   "dependencies": {
-    "graphiql": "^1.4.2",
-    "graphiql-explorer": "^0.6.3",
-    "graphql": "^15.5.1",
-    "react": "^16.3",
-    "react-dom": "^16.3"
+    "@codemirror/language": "6.0.0",
+    "@graphiql/plugin-explorer": "^2.0.0",
+    "@graphiql/react": "^0.21.0",
+    "graphiql": "^3.2.0",
+    "graphql": "^15.8.0",
+    "graphql-ws": "^5.16.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^16.13.1"
   },
   "devDependencies": {
-    "babel": "^6.23.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.2",
-    "babel-loader": "^7.1.2",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-stage-0": "^7.8.3",
+    "@babel/register": "^7.23.7",
+    "babel-loader": "^9.1.3",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
     "copy-webpack-plugin": "^6.1.2",
-    "eslint": "^8.9.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "rimraf": "^2.6.2",
-    "webpack": "^5.40.0",
-    "webpack-cli": "^4.9.2"
+    "webpack": "^5.91.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^5.0.4"
   }
 }

assets/explorer/dist/graphiql.css

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { GraphiQL } from 'graphiql';
+import { explorerPlugin } from '@graphiql/plugin-explorer';
+import PropTypes from 'prop-types';
+
+const Explorer = ({
+  fetcher, schema, query: q, variables,
+}) => {
+  const [query, setQuery] = useState(q);
+
+  const explorer = explorerPlugin();
+
+  return (
+    <div className="graphiql-container">
+      <GraphiQL
+        fetcher={fetcher}
+        plugins={[explorer]}
+        schema={schema}
+        query={query}
+        variables={variables}
+        onEditQuery={setQuery}
+      >
+        <GraphiQL.Logo>
+          <a
+            className="graphiql-logo-link"
+            href="https://www.drupal.org/project/graphql"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GraphQL
+          </a>
+        </GraphiQL.Logo>
+      </GraphiQL>
+    </div>
+  );
+};
+
+Explorer.propTypes = {
+  fetcher: PropTypes.func.isRequired,
+  schema: PropTypes.object.isRequired,
+  query: PropTypes.string,
+  variables: PropTypes.string,
+};
+
+export default Explorer;

assets/explorer/dist/style.css

@@ -2,3 +2,8 @@
   position: relative;
   height: 650px;
 }
+
+.graphiql-dialog-overlay,
+.graphiql-dialog {
+  z-index: 101;
+}

assets/explorer/package.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Drupal from 'drupal';
 import jQuery from 'jquery';
 import { buildClientSchema } from 'graphql';
@@ -20,21 +20,24 @@ Drupal.behaviors.graphQLRenderExplorer = {
     const graphQLSchema = buildClientSchema(settings.graphqlIntrospectionData.data);
 
     // Defines a GraphQL fetcher using the fetch API.
-    const graphQLFetcher = graphQLParams => fetch(settings.graphqlRequestUrl, {
+    const graphQLFetcher = (graphQLParams) => fetch(settings.graphqlRequestUrl, {
       method: 'post',
       credentials: 'same-origin',
       body: JSON.stringify(graphQLParams),
       headers: {
         'Content-Type': 'application/json',
       },
-    }).then(response => response.json());
+    }).then((response) => response.json());
 
-    // Render <Explorer /> into the container.
-    ReactDOM.render(React.createElement(Explorer, {
-      fetcher: graphQLFetcher,
-      schema: graphQLSchema,
-      query: settings.graphqlQuery || undefined,
-      variables: settings.graphqlVariables || undefined,
-    }), container);
+    const root = createRoot(container);
+
+    root.render(
+      <Explorer
+        fetcher={graphQLFetcher}
+        schema={graphQLSchema}
+        query={settings.graphqlQuery || undefined}
+        variables={settings.graphqlVariables || undefined}
+      />,
+    );
   },
 };

assets/explorer/src/Explorer.js

@@ -4,7 +4,7 @@ import CopyWebpackPlugin from "copy-webpack-plugin";
 
 module.exports = {
   context: path.resolve(__dirname, "src"),
-  entry: "./index.js",
+  entry: "./index.jsx",
   output: {
     path: path.resolve(__dirname, "dist"),
     filename: "bundle.min.js",
@@ -23,6 +23,9 @@ module.exports = {
       },
     ],
   },
+  performance: {
+    hints: false,
+  },
   optimization: {
     minimize: true,
   },
@@ -33,9 +36,13 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns: [
         { from: path.resolve(__dirname, "node_modules/graphiql/graphiql.css") },
+        { from: path.resolve(__dirname, "node_modules/@graphiql/plugin-explorer/dist/style.css") },
         { from: path.resolve(__dirname, "src/container.css") },
       ],
     }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
   ],
   externals: {
     jquery: "jQuery",