fix graphiql 5 with vite example (#4042)

* fix graphiql 5 with vite example

* upd

* upd

Author: dimaMachina

docs/migration/graphiql-5.0.0.md

@@ -2,10 +2,38 @@
 
 Starting from GraphiQL 5, you need to set up Monaco workers in your project:
 
-- For **Vite** projects you must import:
+- For **Vite** projects you must:
 
-  ```js
-  import 'graphiql/setup-workers/vite';
+  1. Install `vite-plugin-monaco-editor` package:
+
+  ```sh
+  npm install vite-plugin-monaco-editor --save-dev
+  ```
+
+  2. Import and configure the plugin in your `vite.config.mjs` file:
+
+  ```diff
+  // vite.config.mjs
+  import { defineConfig } from 'vite'
+  import react from '@vitejs/plugin-react'
+  +import $monacoEditorPlugin from 'vite-plugin-monaco-editor'
+
+  +const monacoEditorPlugin = $monacoEditorPlugin.default ?? $monacoEditorPlugin
+
+  export default defineConfig({
+    plugins: [
+      react(),
+  +   monacoEditorPlugin({
+  +     languageWorkers: ['editorWorkerService', 'json'],
+  +     customWorkers: [
+  +       {
+  +         label: 'graphql',
+  +         entry: 'monaco-graphql/esm/graphql.worker.js'
+  +       }
+  +     ]
+  +   })
+    ]
+  })
   ```
 
 > [!NOTE]

examples/graphiql-vite/package.json

@@ -10,7 +10,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.4.1",
-    "vite": "^6.3.4"
+    "vite": "^6.3.4",
+    "vite-plugin-monaco-editor": "^1.1.0"
   },
   "scripts": {
     "dev": "vite",

examples/graphiql-vite/src/App.jsx

@@ -1,5 +1,4 @@
 import { GraphiQL } from 'graphiql';
-import 'graphiql/setup-workers/vite';
 import 'graphiql/style.css';
 
 async function fetcher(graphQLParams) {

examples/graphiql-vite/vite.config.mjs

@@ -1,9 +1,20 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import $monacoEditorPlugin from 'vite-plugin-monaco-editor';
+
+const monacoEditorPlugin = $monacoEditorPlugin.default ?? $monacoEditorPlugin;
 
 export default defineConfig({
-  plugins: [react()],
-  worker: {
-    format: 'es',
-  },
+  plugins: [
+    react(),
+    monacoEditorPlugin({
+      languageWorkers: ['editorWorkerService', 'json'],
+      customWorkers: [
+        {
+          label: 'graphql',
+          entry: 'monaco-graphql/esm/graphql.worker.js',
+        },
+      ],
+    }),
+  ],
 });

yarn.lock

@@ -12611,6 +12611,7 @@ __metadata:
     react: "npm:^19.1.0"
     react-dom: "npm:^19.1.0"
     vite: "npm:^6.3.4"
+    vite-plugin-monaco-editor: "npm:^1.1.0"
   languageName: unknown
   linkType: soft
 
@@ -24790,6 +24791,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-monaco-editor@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "vite-plugin-monaco-editor@npm:1.1.0"
+  peerDependencies:
+    monaco-editor: ">=0.33.0"
+  checksum: 10c0/1f0d839c194d79f21f4ef192d19d82e42ed6dbbab580df684db2e4eeb01d1f2e9c572e9e5b50e9887e9028a54514c496ee6db9d68cab579d375d09456d8b91ee
+  languageName: node
+  linkType: hard
+
 "vite-plugin-svgr@npm:^4.3.0":
   version: 4.3.0
   resolution: "vite-plugin-svgr@npm:4.3.0"