[monaco-graphql] Documentation change suggestion for custom worker

[lesleydreyer]

Is there an existing issue for this?

• 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