graphql / graphql/graphiql

[monaco-graphql] Documentation change suggestion for custom worker

Open
#4,156 0 comments 0 reactions 0 assignees View on GitHub
bug graphiql
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.