JSON validation does not work with GraphiQL

[dorshinar]

Hi :)

Following up on the issue raised here. I got GraphiQL working with monaco-vscode-api, but for some reason the variables panel is not being validated against the schema.

I was able to find out that monaco.languages.json.jsonDefaults.diagnosticsOptions is updating correctly, and is correlated with the query, so the graphql worker is working as expected, but no markers are shown in the variables panel. I also tested dummy schemas that should fail everything to no avail.

The demo from this repo does seem to validate json files (at least the jsconfig.json that comes with it), so I'm probably missing something in my config.

Here's a demo project where this happens. It relies on changes from this PR. Once they are released I'll update the packages.

You can try this query:

query MyQuery ($limit: Int) {
  ability(limit: $limit) {
    generaton_id
  }
}

With this variables json:

{
    "limdit": 1
}

The generaton_id is a misspelling of generation_id, and we can see the error:

But limidt is also a misspelling of limit, but no squiggly line:

[CGNonofr]

The previous changes were released, can you please provide a ready reproduction repo? :)

[dorshinar]

I'm trying, but I think monaco-languageclient needs to be updated as well to include ^22 in its deps. I'm seeing that many packages are still installed in version 21.x

[CGNonofr]

Right! you can override them I think

[dorshinar]

Ok I think now you can take a look
I overrode the deps of monaco-languageclient and added the patch to make editor.worker.js work.
Now you should be able to npm i and run the project

[CGNonofr]

I do have that error:

Is it supposed to be fixed?

[dorshinar]

Fixed it now, though I don't think it has any effect on the markers, as the validation works for the query part even without the fix.

[CGNonofr]

I don't know how vite-plugin-monaco-editor-esm works nor why you need it but it's related to your issue

MonacoEnvironment?.getWorkerUrl!("bla", "json") returns /monacoeditorwork/json.worker.bundle.js, and it only contain

(() => {
})();

So not a surprise the json worker doesn't work

[dorshinar]

Ohh right!
The vite-plugin-monaco-editor-esm sets up the MonacoEnvironment.
I changed the way it loads the json worker and it works now, so we can close this issue.

Thank you very much for all the help!