feat(gatsby-graphiql-explorer): upgrade to webpack 5 (#30642)

wardpeet · web-flow · commit ea161ce8c04e · 2021-08-27T11:46:52.000+02:00
diff --git a/e2e-tests/development-runtime/cypress/integration/functionality/graphql-endpoint.js b/e2e-tests/development-runtime/cypress/integration/functionality/graphql-endpoint.js
@@ -13,7 +13,7 @@ describe(`The GraphQL endpoint`, () => {
     it(`Should appear on ${endpoint}`, () => {
       cy.visit(endpoint)
       cy.get(`.graphiql-container`).should(`be.visible`)
-      cy.title().should(`eq`, `GraphiQL`)
+      cy.title().should(`eq`, `Gatsby - GraphiQL`)
     })
 
     it(`Should execute queries from query string on ${endpoint}`, () => {
diff --git a/packages/gatsby-graphiql-explorer/.gitignore b/packages/gatsby-graphiql-explorer/.gitignore
@@ -1,3 +1,4 @@
 /*.js
 /*.html
 yarn.lock
+app.js.LICENSE.txt
diff --git a/packages/gatsby-graphiql-explorer/package.json b/packages/gatsby-graphiql-explorer/package.json
@@ -28,7 +28,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.14.8"
+    "@babel/runtime": "^7.15.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.8",
@@ -41,19 +41,19 @@
     "babel-preset-gatsby-package": "^1.13.0-next.0",
     "core-js": "^3.8.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^1.0.1",
-    "graphiql": "^1.3.2",
+    "css-loader": "^5.2.0",
+    "graphiql": "^1.4.0",
     "graphiql-code-exporter": "^3.0.3",
-    "graphiql-explorer": "^0.6.2",
-    "html-webpack-plugin": "^3.2.0",
+    "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",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "whatwg-fetch": "^3.5.0"
+    "style-loader": "^3.2.1",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0",
+    "whatwg-fetch": "^3.6.2"
   },
   "engines": {
     "node": ">=12.13.0"
diff --git a/packages/gatsby-graphiql-explorer/src/app/index.ejs b/packages/gatsby-graphiql-explorer/src/app/index.ejs
@@ -2,16 +2,14 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>GraphiQL</title>
+    <title>Gatsby - GraphiQL</title>
     <meta name="robots" content="noindex" />
     <meta name="referrer" content="origin" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <%= htmlWebpackPlugin.tags.headTags %>
   </head>
   <body>
     <div id="root" class="graphiql-container">Loading...</div>
-    <script
-      type="text/javascript"
-      src="/___graphql/<%= htmlWebpackPlugin.files.chunks.main.entry %>?<%= htmlWebpackPlugin.files.chunks.main.hash %>"
-    ></script>
+    <%= htmlWebpackPlugin.tags.bodyTags %>
   </body>
 </html>
diff --git a/packages/gatsby-graphiql-explorer/src/app/webpack.config.js b/packages/gatsby-graphiql-explorer/src/app/webpack.config.js
@@ -9,6 +9,7 @@ module.exports = {
   output: {
     path: path.join(__dirname, `..`, `..`),
     filename: `./app.js`,
+    publicPath: `/___graphql`,
   },
   devtool: false,
   module: {
@@ -25,8 +26,9 @@ module.exports = {
                 {
                   corejs: 3,
                   loose: true,
+                  bugfixes: true,
                   modules: `commonjs`,
-                  useBuiltIns: `usage`,
+                  useBuiltIns: `entry`,
                   targets: [`>0.25%`, `not dead`],
                 },
               ],
diff --git a/yarn.lock b/yarn.lock
