v6: Add a visual query builder (@graphiql/plugin-query-builder)

[trevor-scheer]

Summary

New package @graphiql/plugin-query-builder, a first-party visual query builder for GraphiQL. People have asked for one since #734.

Pick fields from the schema with checkboxes and the operation in the editor stays in sync, both ways. Every change runs through the same parse → mutate → reprint cycle using the graphql package's AST utilities, so the builder and the editor never drift apart.

What it covers:

• Schema tree. Root types render as collapsible sections. Scalar fields have checkboxes; object, interface, and union fields are expand-only, since a composite isn't a valid selection without subfields. Checking a nested scalar adds it and any parents; unchecking removes it and prunes anything left empty (including the operation itself when nothing is left).
• Operation-aware. The builder reads and edits the operation the editor cursor sits in. In a multi-operation document only that operation's root type is enabled; the others collapse. Moving the cursor onto a field expands the tree down to it and highlights it.
• Argument inputs. Checked fields show inputs matched to each argument's type: scalars (Int/Float as number inputs, Boolean as a checkbox, String/ID as text), enums as a dropdown, lists with an add/remove UI, and input objects as recursive nested editors, including the list-of-input-objects case.
• Variables. "Use as variable" moves an argument's value into the variables editor and references it as $name in the operation; an "Inline argument" toggle reverses it. Suggested names are unique across the whole document, and removing a field cleans up any variable it orphaned.
• Unions and interfaces. Each concrete type shows as a ... on TypeName selector; checking a field inside one adds it within that inline fragment. Interface fields shared by every type can also be selected directly, without a type condition. Named fragments already in the document are listed.

The plugin is default-installed in the graphiql meta-package, so the rail icon is present with no extra configuration. Omit it from your plugins list to opt out.

This also changes @graphiql/react: the active operationName now follows the editor cursor, so the Run button, the operation dropdown, and operation-aware plugins reflect the operation you are editing. See the graphiql@6 migration guide for details.

Test plan

• Open the default GraphiQL example with no extra plugin config; confirm the query builder icon shows in the rail and opens the panel.
• Expand a root type. Confirm object/interface/union fields are expand-only (chevron, no checkbox) and scalar fields have checkboxes. Check a scalar; confirm it lands in the editor. Uncheck it; confirm it's removed and any emptied parent is pruned.
• Check a field that takes arguments and fill in a scalar, an enum, a list, and an input-object arg; confirm each is written into the query.
• Click "Use as variable" on a scalar arg. Confirm the value moves into the Variables panel, the operation header gets a bare $name, and the button now reads "Inline argument". Click it; confirm the literal returns and the Variables entry is gone.
• In a document with two named operations, click between them in the editor. Confirm the builder switches to the cursor's operation, the active tab shows that operation's name with a +N count, and editing an argument in one operation doesn't jump the builder to the other. Confirm only the active operation's root type is enabled.
• Expand a union or interface field. Toggle a ... on TypeName (with no prior selection on the field) and confirm ... on TypeName { __typename } is added. Check a field inside it; confirm it lands inside the fragment, not as a sibling. For an interface, confirm its shared fields can be checked directly.
• Promote an argument to a variable, then uncheck its field. Confirm the $name definition and its Variables entry are both removed, leaving valid GraphQL.
• Place the cursor on a deeply nested field in a collapsed tree; confirm the builder expands down to it and highlights it.
• Run a query you built against the demo schema and confirm a valid response.

Refs: #734, #4219

[changeset-bot]

🦋 Changeset detected

Latest commit: 071aeab

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

This PR includes changesets to release 7 packages

Name	Type
@graphiql/react	Minor
graphiql	Minor
@graphiql/plugin-query-builder	Major
@graphiql/plugin-code-exporter	Major
@graphiql/plugin-doc-explorer	Major
@graphiql/plugin-explorer	Major
@graphiql/plugin-history	Major

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