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

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.
• #780 introduced JSONC variables and this parser; it didn't discuss the error path.
• #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.