Merge pull request #2168 from cylc/renovate/major-graphiql-packages

fix(deps): update dependency graphiql to v4

Author: oliver-sanders

eslintrc-dist.cjs

@@ -33,4 +33,10 @@ module.exports = {
   },
   noInlineConfig: true,
   reportUnusedDisableDirectives: false, // doesn't seem to work
+  settings: {
+    polyfills: [
+      // Used by GraphiQL, shouldn't be a problem:
+      'navigator.userAgentData',
+    ],
+  },
 }

package.json

@@ -34,7 +34,7 @@
     "axios": "1.9.0",
     "dedent": "1.6.0",
     "enumify": "2.0.0",
-    "graphiql": "3.8.3",
+    "graphiql": "4.0.5",
     "graphql": "16.11.0",
     "graphql-tag": "2.12.6",
     "lodash-es": "4.17.21",
@@ -55,6 +55,7 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "3.14.3",
+    "@vitejs/plugin-react": "4.4.1",
     "@vitejs/plugin-vue": "5.2.4",
     "@vitest/coverage-istanbul": "3.1.4",
     "@vue/test-utils": "2.4.6",

src/views/GraphiQL.vue

@@ -20,9 +20,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import 'graphiql/graphiql.min.css'
+import 'graphiql/graphiql.css'
 import { render, createElement } from 'preact/compat'
-import GraphiQL from 'graphiql'
+import { GraphiQL } from 'graphiql'
 import { fallbackGraphQLFetcher, graphQLFetcher } from '@/graphql/graphiql'
 
 export default {

vite.config.js

@@ -18,6 +18,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vuetify from 'vite-plugin-vuetify'
+import react from '@vitejs/plugin-react'
 import eslint from 'vite-plugin-eslint'
 import IstanbulPlugin from 'vite-plugin-istanbul'
 import dns from 'dns'
@@ -33,6 +34,8 @@ export default defineConfig(({ mode }) => {
     eslint({
       failOnError: mode === 'production'
     }),
+    // GraphiQL is a React app:
+    react(),
   ]
 
   if (mode !== 'production' && process.env.COVERAGE) {
@@ -56,6 +59,7 @@ export default defineConfig(({ mode }) => {
         '@': path.resolve(__dirname, './src'),
         $tests: path.resolve(__dirname, './tests'),
         lodash: 'lodash-es',
+        // GraphiQL is a React app (use Preact as it's smaller):
         react: 'preact/compat',
         'react-dom': 'preact/compat',
       }