graphql / graphql/graphiql

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

Open
#4,501 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.9k
Forks
1.9k
Avg merge
22h 45m
Merged PRs (30d)
70

Description

## 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:

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

Source: [`stores/execution.ts`](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/src/stores/execution.ts) (`tryParseJSONC` → `setError` → `return`) and [`utility/jsonc.ts`](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/src/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.

Contributor guide

Open the contributing guide

Research direction

Read packages/graphiql-react/src/stores/execution.ts and packages/graphiql-react/src/utility/jsonc.ts, following tryParseJSONC through setError and the early return. Use the malformed Variables repro as the baseline; done should distinguish client-side parse failures from server responses, provide clearer location-aware errors, and offer a supported customization path.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.