Skip to content

v6: Add ResponseTreeView#4335

Merged
trevor-scheer merged 2 commits into
graphiql-6from
trevor/pr-33
Jun 6, 2026
Merged

v6: Add ResponseTreeView#4335
trevor-scheer merged 2 commits into
graphiql-6from
trevor/pr-33

Conversation

@trevor-scheer
Copy link
Copy Markdown
Contributor

@trevor-scheer trevor-scheer commented Jun 6, 2026

Summary

Adds ResponseTreeView, a custom collapsible tree renderer for GraphQL response JSON. When the user switches to the Tree view in the response pane, they now see the actual response rendered as an expandable tree rather than a placeholder message. Top-level keys are expanded by default; nested objects and arrays start collapsed with a summary showing their child count. Values are colored by type to match the editor's tokenizer palette: strings in blue, numbers in orange, booleans in purple, and null in muted gray.

Test plan

  • Open the example app, run a query, and switch the response pane to Tree view. Verify the response renders as a tree with the top level expanded.
  • Click a collapsed object or array node and confirm it expands to show children. Click again to confirm it collapses.
  • Confirm aria-expanded updates correctly on each toggle button (check with browser DevTools or a screen reader).
  • Switch back to JSON view and verify the Monaco editor reappears with the response intact.
  • Run a query that returns nested objects more than two levels deep. Confirm only depth 0 is expanded by default; click to drill in.
  • Check the tree renders correctly in both dark and light themes.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Jun 6, 2026

🦋 Changeset detected

Latest commit: 6e59702

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

This PR includes changesets to release 6 packages
Name Type
@graphiql/react Minor
@graphiql/plugin-code-exporter Major
@graphiql/plugin-doc-explorer Major
@graphiql/plugin-explorer Major
@graphiql/plugin-history Major
graphiql 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

@trevor-scheer trevor-scheer force-pushed the trevor/pr-33 branch 2 times, most recently from 251c1e8 to f2624de Compare June 6, 2026 03:13
Custom collapsible tree renderer for GraphQL response JSON.
Type-colored values match the editor's tokenizer palette.
Response envelope keys (`data`, `errors`, `extensions`) render
directly at the top level — no synthetic root wrapper.
Top-level keys expanded by default; deeper levels collapsed.
Wires the tree into the response pane when Tree view is active,
replacing the previous placeholder message.
@trevor-scheer trevor-scheer marked this pull request as ready for review June 6, 2026 22:51
@trevor-scheer trevor-scheer merged commit 0bd32a1 into graphiql-6 Jun 6, 2026
13 checks passed
@trevor-scheer trevor-scheer deleted the trevor/pr-33 branch June 6, 2026 22:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant