fix(graphiql-react): plain-language message with line and column for invalid JSON

[vishwakt]

Summary

When the Variables or Headers pane contains invalid JSON, run() parses it client-side and writes an error into the response pane without sending a request. That error showed the bare jsonc-parser error code, in the same shape and place as a real server response:

{ "errors": [{ "message": "Variables are invalid JSON: ValueExpected." }] }

This makes the message readable and clearly client-side:

{ "errors": [{ "message": "Request not sent. Variables are invalid JSON: expected a value at line 1, column 8." }] }

Refs #4501. This addresses the unfriendly message and the "looks like a server response" confusion from that issue. The request for a customization hook (a prop, callback, or plugin hook) is a public API decision, so it is intentionally left for maintainers to discuss on the issue.

Changes

• utility/jsonc.ts: map jsonc-parser error codes to plain-language descriptions and include the line and column derived from the reported offset. Multiple errors are still listed together.
• stores/execution.ts: prefix the client-side validation error with Request not sent.
• Add utility/jsonc.spec.ts covering the message format, line/column on multi-line input, multiple errors, and that valid JSONC (comments, trailing commas) still parses.

How to verify

In the netlify preview (or a local GraphiQL):

1. Query: query Q($id: Int!) { node(id: $id) { id } }
2. Variables pane: {"id": }
3. Press Run.

Before: the response pane shows Variables are invalid JSON: ValueExpected. and it is not obvious that no request was made.
After: it shows Request not sent. Variables are invalid JSON: expected a value at line 1, column 8. and no request is sent.

The same applies to the Headers pane, and to multi-line input, where the line and column point at the offending token.

Credit

Thanks to @limarkxx for the clear report, including pinpointing the exact code path.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1429549

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@graphiql/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR