Graphiql: Feature request: JSON5 Variables

[corysimmons]

I find myself testing various queries a lot, and when I do this, it'd be really nice if I could just comment out some query variables (preferably with cmd + / shortcut) instead of having to delete them completely and then re-enter them when I want to test them out again.

It's not a big deal, but it'd be nice.

[benjie]

The "Query Variables" input at the moment is JSON, so comments are not supported.

One option would be to use JSON5 instead of JSON for the variables, and we could convert it to plain old JSON before we send it to the fetcher. This seems like a great candidate for a v1 feature; what do you think @acao?

[acao]

I agree, JSON5 support would be handy and would guarantee backwards compatibility.
In general, it would be nice for the variables/request input to be highly pluggable, so that multipart input, form input fields, etc could also be provided eventually. But JSON5 would be nice as a default.

[corysimmons]

It sounds cool, but I think the multipart stuff would be a whole can of worms 😩whereas JSON5 could be implemented cleanly in a few hours with a seamless upgrade path.👌

[acao]

@corysimmons agreed, just talking about how this will be pluggable in the future, but the default plugin would be JSON5 for v1, which is still a ways out

[acao]

sadly, the default will probably not be json5 necessarily, at least not right away.

the reason being is that I am unsure we would be able to parse that in monaco, but we might.

is tsconfig style json ok? it allows comments but still requires double quotes, and i think it doesnt care about trailing commas? that's easier to achieve with monaco. it would accomplish what you're asking for, very similar to, say, commenting out some compilerOptions in tsconfig.

I can also see the need for a full-blown JSON 5 or HJSON style parsing. another reason I'll advocate for this: when i've used GraphiQL in the past, I often find myself pasting variables from unit tests, snippets, seed data, etc into the variables panel, and to do so you often need a js -> json conversion utility when you get into complex variables. Not to mention it's belaborous to convert with even simple variables.

another way this could work would be to transform the code on paste, or have a "paste as" shortcut/palette command

[orta]

We call that JSONC - https://komkom.github.io

Which the default monaco JSON stuff should support out of the box (though you might have to change the language to jsonc instead

[acao]

@orta that's fabulous, I can add that to the GraphiQL Monaco PR now!