feat: GraphiQL v2 (#36541)

e2e-tests/development-runtime/cypress/integration/functionality/graphql-endpoint.js

@@ -20,7 +20,7 @@ describe(`The GraphQL endpoint`, () => {
       // prefill query from query string
       cy.visit(endpoint + testQueryString)
       cy.get(`.graphiql-container`).should(`be.visible`)
-      cy.get(`.execute-button`).click()
+      cy.get(`.graphiql-execute-button`).click()
       cy.get(`.result-window .CodeMirror-code`).contains(
         `Gatsby Default Starter`
       )
@@ -30,9 +30,10 @@ describe(`The GraphQL endpoint`, () => {
       // hack to show (almost) empty editor instead of
       cy.visit(endpoint + `?query=%20`)
       cy.get(`.graphiql-container`).should(`be.visible`)
+      cy.get(`[aria-label="Show GraphiQL Explorer"]`).click()
       cy.get(`[data-field-name="site"]`).click()
       cy.get(`[data-field-name="port"]`).click()
-      cy.get(`.execute-button`).click()
+      cy.get(`.graphiql-execute-button`).click()
       cy.get(`.result-window .CodeMirror-code`).contains(`8000`)
     })
   })

e2e-tests/development-runtime/cypress/integration/functionality/implicit-fragments.js

@@ -9,7 +9,7 @@ describe(`The GraphQL endpoint`, () => {
     // prefill query from query string
     cy.visit(`/___graphql` + testQueryString)
     cy.get(`.graphiql-container`).should(`be.visible`)
-    cy.get(`.execute-button`).click()
+    cy.get(`.graphiql-execute-button`).click()
     cy.get(`.result-window .CodeMirror-code`).contains(`@gatsbyjs`)
   })
 })

e2e-tests/development-runtime/package.json

@@ -21,8 +21,8 @@
     "gatsby-transformer-sharp": "next",
     "node-fetch": "^2.6.1",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.32.8"
   },
   "keywords": [

packages/gatsby-cli/package.json

@@ -68,7 +68,7 @@
     "ink": "^3.2.0",
     "ink-spinner": "^4.0.3",
     "npm-run-all": "4.1.5",
-    "react": "^16.9.0",
+    "react": "^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.66.1",
     "rollup-plugin-auto-external": "^2.0.0",

packages/gatsby-graphiql-explorer/.gitignore

@@ -1,4 +1,6 @@
-/*.js
-/*.html
-yarn.lock
+dist
+node_modules
+!index.js
+app.js
 app.js.LICENSE.txt
+index.html

packages/gatsby-graphiql-explorer/README.md

@@ -1,17 +1,12 @@
 # gatsby-graphiql-explorer
 
-A package to extend the default [GraphiQL][graphiql] IDE with useful features for Gatsby users.
+A package to extend the default [GraphiQL](https://github.com/graphql/graphiql) IDE with useful features for Gatsby users.
 
-_Note:_ accessible at `http://localhost:8000/___graphql` after running `gatsby develop`
-
-![Gatsby GraphiQL Explorer](./assets/gatsby-graphiql-explorer.png)
+When using `gatsby develop` it's accessible at `http://localhost:8000/___graphql`.
 
 ## Features
 
-- Offline support - for when you need to work on your excellent Gatsby app on a plane, train, or elsewhere off the grid
-- [GraphiQL Explorer][graphiql-explorer] - an interactive explorer plugin to visually create and interact with the GraphQL schema
-- Support for implied fragments - whether provided by you, core or plugins. Autocompletion, validation & operation execution are all covered!
-- _All_ the expected features you know and love from [GraphiQL][graphiql]
-
-[graphiql]: https://github.com/graphql/graphiql
-[graphiql-explorer]: https://github.com/OneGraph/graphiql-explorer
+- [GraphiQL Explorer](https://github.com/graphql/graphiql/tree/main/packages/graphiql-plugin-explorer) - an interactive explorer plugin to visually create and interact with the GraphQL schema
+- [GraphiQL Exporter](https://github.com/OneGraph/graphiql-code-exporter) - generates ready-to-run code for your queries
+- Button for [Refreshing Content](https://www.gatsbyjs.com/docs/refreshing-content/)
+- Support for implied fragments - whether provided by you, core or plugins. Autocompletion, validation & operation execution are all covered

packages/gatsby-graphiql-explorer/index.js

@@ -0,0 +1,19 @@
+const path = require(`path`)
+
+module.exports = (expressApp, { graphqlEndpoint, getFragments }) => {
+  const bundleUrlHandler = path.posix.join(graphqlEndpoint, `app.js`)
+  const fragmentsUrlHandler = path.posix.join(graphqlEndpoint, `fragments`)
+
+  expressApp.get(bundleUrlHandler, (_req, res) => {
+    res.set(`Cache-Control`, `public, max-age=31557600`)
+    res.sendFile(path.join(__dirname, `dist/app.js`))
+  })
+
+  expressApp.get(graphqlEndpoint, (_req, res) => {
+    res.sendFile(path.join(__dirname, `dist/index.html`))
+  })
+
+  expressApp.get(fragmentsUrlHandler, (_req, res) => {
+    res.json(getFragments())
+  })
+}

packages/gatsby-graphiql-explorer/package.json

@@ -4,19 +4,24 @@
   "description": "GraphiQL IDE with custom features for Gatsby users",
   "main": "index.js",
   "scripts": {
-    "build:app": "webpack --config ./src/app/webpack.config.js",
-    "build:babel": "babel src/index.js --out-dir . --ignore \"**/__tests__\"",
-    "build": "npm-run-all --npm-path npm --parallel build:app build:babel",
-    "prepare": "cross-env NODE_ENV=production npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "watch:app": "npm run build:app -- --watch",
-    "watch:babel": "npm run build:babel -- --watch",
-    "watch": "npm-run-all --npm-path npm --parallel watch:app watch:babel"
+    "build": "webpack --config ./src/webpack.config.js",
+    "watch": "npm run build -- --watch",
+    "prepare": "cross-env NODE_ENV=production npm run clean && npm run build",
+    "clean": "del-cli dist/*"
   },
   "keywords": [
-    "gatsby"
+    "gatsby",
+    "graphiql",
+    "gatsby-graphiql"
+  ],
+  "files": [
+    "dist/*",
+    "index.js"
+  ],
+  "author": "Michal Piechowiak <[email protected]>",
+  "contributors": [
+    "LekoArts"
   ],
-  "author": "",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
@@ -27,33 +32,31 @@
     "directory": "packages/gatsby-graphiql-explorer"
   },
   "license": "MIT",
-  "dependencies": {
-    "@babel/runtime": "^7.15.4"
-  },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
     "@babel/core": "^7.15.5",
     "@babel/plugin-proposal-class-properties": "^7.14.0",
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.4",
     "@babel/preset-react": "^7.14.0",
+    "@graphiql/plugin-explorer": "^0.1.3",
+    "@graphiql/react": "^0.13.0",
+    "@graphiql/toolkit": "^0.7.3",
     "babel-loader": "^8.2.2",
     "babel-preset-gatsby-package": "^3.0.0-next.0",
     "core-js": "^3.22.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.2.0",
-    "graphiql": "^1.4.0",
+    "del-cli": "^5.0.0",
+    "graphiql": "^2.0.6",
     "graphiql-code-exporter": "^3.0.3",
-    "graphiql-explorer": "^0.6.3",
     "html-webpack-plugin": "^5.3.2",
     "npm-run-all": "4.1.5",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "regenerator-runtime": "^0.13.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "regenerator-runtime": "^0.13.10",
     "style-loader": "^3.2.1",
     "webpack": "^5.51.1",
-    "webpack-cli": "^4.8.0",
-    "whatwg-fetch": "^3.6.2"
+    "webpack-cli": "^4.8.0"
   },
   "engines": {
     "node": ">=18.0.0"

packages/gatsby-graphiql-explorer/src/app.css

@@ -0,0 +1,46 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+}
+
+code {
+  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+    monospace;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.gatsby-logo {
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-medium);
+  padding: var(--px-12) var(--px-16);
+}
+
+.gatsby-logo .gatsby-logo-link {
+  text-decoration: none;
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
+}
+
+.gatsby-logo-link {
+  display: flex;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+}
+
+.gatsby-logo-link:hover {
+  color: hsla(var(--color-neutral), 1);
+}
+
+.gatsby-logo-link svg {
+  margin-right: 0.5rem;
+}