fix(deps): update dependency graphiql to v5

package.json

@@ -34,7 +34,7 @@
     "axios": "1.10.0",
     "dedent": "1.6.0",
     "enumify": "2.0.0",
-    "graphiql": "4.1.2",
+    "graphiql": "5.0.6",
     "graphql": "16.11.0",
     "graphql-tag": "2.12.6",
     "lodash-es": "4.17.21",
@@ -86,6 +86,7 @@
     "vite": "6.3.5",
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-istanbul": "7.1.0",
+    "vite-plugin-monaco-editor-esm": "2.0.2",
     "vite-plugin-vuetify": "2.1.1",
     "vitest": "3.2.4"
   },

src/views/GraphiQL.vue

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

vite.config.js

@@ -21,21 +21,34 @@ 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 monaco from 'vite-plugin-monaco-editor-esm'
 import dns from 'dns'
 import path from 'path'
 
 // Workaround https://github.com/cypress-io/cypress/issues/25397
 dns.setDefaultResultOrder('ipv4first')
 
 export default defineConfig(({ mode }) => {
+  const graphiQLPlugins = [
+    react(),
+    monaco({
+      languageWorkers: ['editorWorkerService', 'json'],
+      customWorkers: [
+        {
+          label: 'graphql',
+          entry: 'monaco-graphql/esm/graphql.worker.js',
+        },
+      ],
+    })
+  ]
+
   const plugins = [
     vue(),
     vuetify(),
     eslint({
       failOnError: mode === 'production'
     }),
-    // GraphiQL is a React app:
-    react(),
+    ...graphiQLPlugins,
   ]
 
   if (mode !== 'production' && process.env.COVERAGE) {