[graphiql] Variables JSON parse error is indistinguishable from a server response and cannot be customized

[limarkxx]

Problem

When the Variables (or Headers) pane contains malformed JSON, run() in @graphiql/react parses it client-side, writes an error into the response pane, and returns without sending a request:

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

Source: stores/execution.ts (tryParseJSONC → setError → return) and utility/jsonc.ts.

Three issues with this:

1. It looks like a server response. The error is rendered in the same { errors: [...] } shape and place as a real response, with no indication that no request was made.
2. The message is not user-friendly. ValueExpected is the bare jsonc-parser enum name; a plain-language description and a line/column would help, and jsonc-parser already reports offset and length for each error.
3. There is no way to change it. No prop or callback covers this, ExecuteButton is not replaceable, and no plugin hook runs before run(). Workarounds require aliasing or patching internal module paths.

Related

• Apollo Sandbox parses variables client-side too, but strips the invalid content, shows a toast ("Invalid content in variables… was stripped from the request"), and forwards the request so the server's own message is what appears in the response pane.
• Feature request: JSON5 Variables #780 introduced JSONC variables and this parser; it didn't discuss the error path.
• GraphiQL Plugin Experience Improvements #3331 lists a future variables plugin type but nothing scheduled.

Environment

• graphiql 5.2.2, @graphiql/react 0.37.3, jsonc-parser 3.3.1
• Same behavior on main as of 2026-09-11

Repro

1. Query: query Q($id: Int!) { node(id: $id) { id } }
2. Variables pane: {"id": }
3. Press Run. Observe the errors block above in the response pane and no network request.

[vishwakt]

Thanks for the precise report @limarkxx, the code path you identified is exactly right.

I've opened #4557 addressing the first two points:

• Message: the jsonc-parser error codes are now mapped to plain language with a line and column derived from the parser's offset, e.g. expected a value at line 1, column 8 instead of ValueExpected.
• Looks like a server response: the message is now prefixed with Request not sent. so it is clearly a client-side validation error.

I intentionally left the third point (a prop, callback, or plugin hook to customize this) out of that PR, since adding a public API surface is a design decision for the maintainers. Happy to follow up on it if there's agreement on the shape.