[monaco-graphql] Documentation change suggestion for custom worker
- Dominant language
- TypeScript
- Stars
- 16.9k
- Forks
- 1.9k
- Avg merge
- 22h 45m
- Merged PRs (30d)
- 70
Description
### Is there an existing issue for this?
- [x] I have searched the existing issues
### Current Behavior
While upgrading to graphiql v5, I struggled to get the custom worker for custom validation working. I finally got it working by one of 2 ways and was wondering if the documentation should be updated.
In this section - https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker
The first way I got it was by adding the json worker otherwise it would throw an error in the UI console TypeError: Cannot read properties of undefined (reading 'toUrl'..). The json worker is not listed in the current docs so maybe change it to add it like this...
Suggested change 1
```
// Vite query suffixes https://vite.dev/guide/features.html#import-with-query-suffixes
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import GraphQLWorker from './my-graphql.worker?worker';
import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker.js?worker";
globalThis.MonacoEnvironment = {
getWorker(_workerId: string, label: string) {
if (label === 'graphql') return new GraphQLWorker();
if (label === 'json') return new JsonWorker();
return new EditorWorker();
},
};
```
___
Suggested change 2
after the webpack example it says
`with vite you just need:`
maybe it should change to something like
`an alternative way with vite is using a plugin:`
as I don't think you need the above code and the plugin but could be wrong
___
Suggested change 3
the last thing I had to do was change the entry to ../src/my-graphql.worker.js
so maybe a comment like "your path from node_modules - adjust as needed"
```
import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
export default defineConfig({
plugins: [
monacoEditorPlugin({
customWorker: [
{
label: 'graphql',
// your path from node_modules - adjust as needed
entry: 'my-graphql.worker.js',
},
],
}),
],
});
```
___
Suggested change 4
Not sure if this is the right way but If it helps others I think I got it working via esbuild -
1. add the path to my-graphql.worker.ts to the esbuild entry points in the build config
2. add this to the code
```
// @ts-expect-error - OR - add to entry points and do like the custom worker
import JsonWorker from "https://esm.sh/monaco-editor@0.52.2/esm/vs/language/json/json.worker.js?worker";
// @ts-expect-error
import EditorWorker from "https://esm.sh/monaco-editor@0.52.2/esm/vs/editor/editor.worker.js?worker";
// @ts-expect-error - OR - add to entry points and do like the custom worker
globalThis.MonacoEnvironment = {
getWorker(_workerId: any, label: any) {
switch (label) {
case "json":
return new JsonWorker();
case "graphql":
return new Worker(new URL("./my-graphql.worker.js", import.meta.url));
}
return new EditorWorker();
},
};
```
___
### Expected Behavior
Following the docs should work without logging UI errors - https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker
### Steps To Reproduce
In a yarn/typescript/vite environment - follow the documentation https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker
Was able to fix by adding the jsonworker to the GraphiQLPage.tsx OR adding the monaco plugin with a different path in the vite.config.ts
https://codesandbox.io/p/devbox/vite-gql-custom-worker-fydcl5
### Environment
* GraphiQL Version:
* OS:
* Browser:
* Bundler:
* `react` Version:
* `graphql` Version:
### Anything else?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.