Repository navigation
GraphiQL v6 - #4228
Merged
Merged
GraphiQL v6#4228
Conversation
## Summary - Swap the vestigial `graphiql-5` reference in `.github/workflows/release.yml` for `graphiql-6` so the changesets-action runs on pushes to the integration branch. - Enter changesets pre-mode with the `alpha` tag so merges aggregate into `6.0.0-alpha.N` prereleases. - Add a changeset that seeds the alpha release line by bumping `graphiql` to v6. No functional change — subsequent alphas accumulate the redesign work. ## Test plan - [ ] On merge: changesets-action opens a "Version Packages (alpha)" PR bumping `graphiql` to `6.0.0-alpha.0`. - [ ] Merging the version PR publishes `graphiql@6.0.0-alpha.0` to npm with the `alpha` dist-tag. Refs: #4219
|
Contributor
|
The latest changes of this PR are not available as canary, since there are no linked |
## Summary - Introduce a new `packages/graphiql-react/src/style/tokens.css` with the v6 OKLCH-based design token system. Both dark and light palettes ship together. - Light theme activates explicitly via `data-theme="light"` or automatically via `prefers-color-scheme: light` when no theme is pinned. Dark remains the default. - Existing v5 HSL variables are unchanged; nothing in `@graphiql/react` references the new tokens yet. - Future PRs will restyle components to consume the new tokens and shim the v5 variables. Refs: #4219
## Summary Storybook gives us a fast feedback loop for iterating on the look of the app and individual components — flipping themes/density/font-size without spinning up the full GraphiQL shell. - Bootstrap Storybook 10 in `@graphiql/react`. Stories colocated as `<component>.stories.tsx`; ships one starter (`Spinner`) to validate the pipeline. - A global decorator wraps every story in `.graphiql-container` with `data-theme` / `data-density` / `data-font-size` attributes, toggleable from the Storybook toolbar. - Move `Uri`, `KeyMod`, `KeyCode`, and `Range` out of the `utility` barrel into direct imports from `utility/monaco-ssr`. The barrel was bundling two unrelated concerns — lightweight UI helpers (`cn`, `pick`, etc.) and heavy Monaco re-exports — so any story reaching for `cn` transitively pulled Monaco's ESM bundle, which doesn't initialize cleanly inside Storybook's preview iframe. Splitting them keeps UI primitives lightweight. ## Run locally From the repo root: ``` yarn storybook # dev server on http://localhost:6006 yarn build-storybook # static build under packages/graphiql-react/storybook-static ``` Refs: #4219
## Summary Component a11y is covered by Storybook + axe; this is the full-app counterpart. `cypress-axe` runs axe at four checkpoints during a normal session (initial render, after running a query, with the docs panel open, with the history panel open) and gates PRs against a committed baseline. `cypress/.a11y-baseline.json` pins today's accepted violations — color-contrast in several spots, a couple of nested-interactive cases, link-in-text-block in the docs panel. CI fails on net-new only. The spec lives alongside the existing Cypress suite, so it runs as part of the normal `yarn e2e` flow. `cypress.config.ts` gets a small `writeBaseline` Node task so the spec can persist baseline updates from inside the browser. ## Refresh baseline ``` yarn workspace graphiql test:a11y:update ``` Refs: #4219
) ## Summary Component-level a11y for v6. `@storybook/addon-a11y` surfaces axe results next to each story while you're working on it; `@storybook/addon-vitest` folds those same checks into the existing Vitest suite so they run as part of `yarn test` in CI. The model is per-story `parameters.a11y.test`: - `'error'` (default) — axe violations fail the test - `'todo'` — warn only, for stories with known issues we plan to fix - `'off'` — skip a11y for the story `vitest.config.mts` is split into two projects: - `unit` — existing jsdom suite, unchanged behavior - `storybook` — Vitest browser mode (Playwright Chromium), picks up `.stories.*` files The PR CI workflow gets one new step: `yarn playwright install --with-deps chromium` ahead of `yarn test`. ## Run locally ``` yarn workspace @graphiql/react test # both projects yarn workspace @graphiql/react vitest run --project=unit # unit only yarn workspace @graphiql/react vitest run --project=storybook ``` The Storybook a11y panel surfaces the same axe results live during `yarn workspace @graphiql/react storybook`. Refs: #4219
## Summary - Migrate `Button`, `UnStyledButton`, `ToolbarButton`, and `ExecuteButton` CSS to v6 OKLCH tokens. - Add `variant?: 'default' | 'primary'` to `Button`; `primary` renders the Run-button style. - Switch `:focus` to `:focus-visible` on interactive states so the focus ring no longer fires on mouse click. Aligns with [MDN `:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) and WCAG 2.4.7 (Focus Visible). - Import `clsx` directly in `button` and `toolbar-button`, following the leaf-module pattern from #4272. A follow-up PR will convert remaining callers and remove the `cn` re-export. - Add Storybook stories: `Primitives/Button` (Default, Primary, Success, Error, Disabled) and `Primitives/ToolbarButton` (Default). ## Test plan - [x] Open Storybook `Primitives/Button` and verify each variant matches the design. - [x] Tab into the buttons, then mouse-click them. Focus ring appears on Tab only, not on click. - [x] Open `Primitives/ToolbarButton`. Hover the icon button; a v6 tooltip appears. - [x] Run `yarn dev:graphiql`. The Run button and toolbar buttons match the new design. Refs: #4219
Cypress 16 deprecates its bundled Electron browser, but our E2E scripts still default to Electron and CI carries an Electron-only GPU workaround. This runs source, built, interactive, and accessibility Cypress commands in Chrome, removes the GPU workaround, and updates `cypress-real-events` to 1.15.1 (the release whose peer range includes Cypress 16). The latest `cypress-axe` package still only declares support through Cypress 15. Upstream merged [Cypress 16 support](component-driven/cypress-axe#193), but [its release pipeline is currently blocking publication](component-driven/cypress-axe#194), so this leaves 1.7.0 in place instead of pinning Cypress backward or depending on an unreleased commit.
Vite 8 currently warns for SVGs transformed by `vite-plugin-svgr` 4 because the plugin calls the deprecated `transformWithEsbuild` API. Vitest also warns while loading the two ESM configuration files that still refer to the CommonJS-only `__dirname` global. This updates both SVG plugin consumers to 5.2.0, whose Rolldown path uses `transformWithOxc`, and resolves both test aliases relative to `import.meta.dirname`. I kept the other dependency deprecations and peer compatibility warnings out of this change.
`@types/dotenv` is a deprecated stub package; `dotenv@10.0.0` already declares its own `types/index.d.ts`. `sane@2.0.0` is also deprecated and remained in `codemirror-graphql` after the watch script that imported it was removed in 2021: 5f49f27 This removes both development dependencies and prunes their orphaned lockfile entries. In particular, removing `sane` drops its old Watchman, `fsevents@1`, and micromatch dependency tree. Neither change affects published runtime dependencies, so there is no changeset.
The GraphQL 16 compatibility install reports peer failures from two direct dependencies of `example-graphiql-webpack`: `ajv-formats` receives AJV 6 instead of its AJV 8 peer, and `worker-loader@2` only supports Webpack 3 and 4 while the example uses Webpack 5. Neither package is imported or configured. `worker-loader` is left over from the example’s Webpack 4 setup, and `ajv-formats` was added as a speculative `copy-webpack-plugin` workaround. Removing both declarations also prunes the obsolete Webpack 4 loader dependency chain from the lockfile.
Fresh installs currently warn about three deprecated Babel proposal plugins and `@babel/polyfill`. The proposal syntax has been part of the language for years, and Babel maintains equivalent transform plugins for these configurations. This replaces the proposal plugins with their transform equivalents in the root and both Webpack example configurations. It also removes the unused root `@babel/polyfill` dependency and stops loading it from `graphql-language-service-cli`. The CLI already compiles to ES2018, and its `yargs` dependency requires Node 10 or newer, where the Promise and async runtime features used by the compiled output are native. Adding `core-js` and `regenerator-runtime` to every CLI invocation would not provide a required compatibility path. The lockfile no longer contains `@babel/polyfill`, its `core-js` 2 dependency, or the superseded proposal plugins. The first commit is the mechanical plugin migration; the second removes the CLI polyfill and includes its patch changeset.
`@graphiql/toolkit` installs deprecated `subscriptions-transport-ws` only so two tests can construct or mock its client. The runtime compatibility path is already structural: it calls `legacyWsClient.request(...)` and subscribes to the returned observable without importing the package: https://github.com/graphql/graphiql/blob/c1fe2ca802fb39fc37e662c5f85cd83ab13a2b7b/packages/graphiql-toolkit/src/create-fetcher/lib.ts#L299-L311 This replaces the package fixtures with structural clients and exercises the legacy observable through request, subscription, result delivery, completion, and unsubscribe. Removing the package also exposed that its declarations had implicitly supplied Node types used by toolkit source and tests, so this declares `@types/node` directly and includes it in the toolkit TypeScript configuration. The public `legacyWsClient` option, implementation, and documentation remain unchanged. This is development/test dependency cleanup, so there is no changeset.
`eslint-plugin-react-hooks` is loaded as an Oxlint JS plugin, but pnpm also auto-installs its ESLint peer and the lockfile still selects the unsupported ESLint 9 release. This emits a deprecation warning during the GraphQL 16 compatibility install even though the plugin supports ESLint 10. This constrains that auto-installed peer with a workspace override and refreshes the lockfile to ESLint 10. Keeping the constraint as an override avoids representing ESLint as a tool the repository invokes directly. A peer dependency rule would only hide the warning while leaving the unsupported package installed.
After #4665 moved method selection into the transport, there's no UI override, and the Run button still hides the selected operation behind its dropdown. This joins an icon-only Run/Stop button, the visible operation name, and a method selector. The selected operation and dropdown entries use the same QRY/MUT/SUB chips as the query builder. Queries can use Auto or an explicitly supported method. The closed control shows only the effective method; Auto is indicated inside the menu. Selected options use a tinted row and side marker in both menus, with a separate keyboard focus outline and checked radio-item semantics. The method menu stays available even when only one method is usable. Unsupported methods remain visible and disabled, with hover and keyboard-focus explanations for server capabilities and mutation restrictions. Selecting a mutation keeps POST selected without clearing the query preference; subscriptions omit the HTTP control. `Transport.methodOverride` and `Transport.subscribe` let the control follow discovery and external method changes while preserving custom transport compatibility. Operations without a name are labeled “Anonymous query” (or mutation/subscription). The operation dropdown now selects without executing. Run and the keyboard shortcut execute the selection. While a request is active, its name stays visible even if the editor cursor or document changes, and Stop remains available. The interactive `Components/ExecuteButton/MultipleOperationsWithPicker` story covers the joined control. The first commit adds observable transport state; the second adds the UI and selection behavior. The Netlify demo function now answers `OPTIONS` with `204` and `Allow: GET, POST, OPTIONS`, so discovery exposes both query methods in the preview. Previously its `405` response caused the transport to fall back to POST only.
The plugin rail and Run dropdowns use different selection markers and colors. This gives both the rail's full-height edge marker, the GraphQL logo's `#E10098` pink, and a subtle background tint through a shared selection style. Keyboard focus keeps its blue outline. Follows #4673.
The v6 branch is still in Changesets prerelease mode, with pending notes describing both the v5 → v6 changes and iterations during the beta/RC cycle. This prepares the inputs for the automated stable release PR: consolidate those notes and mark prerelease mode for exit. Package versions, generated changelogs, and the lockfile remain at their prerelease values. The 37 pending notes were all specific to v6; none came from unreleased `main` work. They are consolidated into 24 consumer-facing entries. Visual changes live in the reskin entry, transport behavior and hooks live in the transport entry, and prerelease-only pinning/promotion notes are removed. Published prerelease changelog history is preserved. `pre.json` is set to `mode: "exit"`. Merging this PR into `graphiql-6` lets the existing Changesets workflow open or update its release PR with stable versions, dependency ranges, changelogs, and lockfile changes. Merging that generated release PR triggers publication. This preparation does not consume the pending changesets or publish packages. The read-only release plan produces: GraphiQL / code exporter / language service 6.0.0; React, toolkit, the remaining plugins, `cm6-graphql`, and the versioned VS Code extensions 1.0.0; Monaco GraphQL 2.0.0; CodeMirror GraphQL / language service server 3.0.0; language service CLI 4.0.0. VS Code syntax stays at 1.3.13. **Release preparation (this PR)** - [x] Preserve the operation/method controls and reactive transport APIs from #4673 and selection styling from #4674. - [x] Consolidate pending changesets into the net v5 → v6 changes, including the current transport API contract and discovery behavior. - [x] Mark prerelease mode for exit, retaining the pending changesets for the automated release PR. - [x] Verify the expected stable release plan; leave generated versions, changelogs, and lockfile changes to the automated release PR. - [x] Point the esm.sh GraphQL worker helper and matching declaration at `monaco-graphql@2`. - [x] Cut `graphiql-5` from current `main` (`eeaa50e4085aa19de328da253834aef204f07324`) for v5 maintenance. Preserve its previous tip (`ed31b72f04f2d1f100361b4c32718be3130ee550`) under `graphiql-5-original`. **Automated release PR** - [ ] Merge this preparation into `graphiql-6` and let Changesets open or update its release PR. - [ ] Review that PR's stable versions, internal dependency ranges, changelogs, and lockfile. - [ ] On the generated release PR, refresh any remaining internal prerelease peer ranges (including the five plugins' `@graphiql/react` peers) and update the lockfile. Confirm no internal beta/RC ranges remain in active manifests or workspace examples. - [ ] Merge the generated release PR at the intended release time; let the workflow publish and verify the expected versions under npm `latest`. **After stable publication** - [ ] Land #4675 after regenerating and smoke-testing both CDN examples and confirming release automation has moved to `main`. - [ ] Before the first v5 patch release, configure publishing from `graphiql-5` with a maintenance tag such as `v5`, so it cannot replace v6 under `latest`. The main CDN example continues using published RC packages until stable packages exist. Its stable URLs and integrity hashes are regenerated in #4675 after publication. Supersedes #4587. Refs #4219.
Merged
The pending v6 notes omit two integration migrations: existing `--color-*` overrides stop retheming the built-in UI, and interfaces extending `GraphiQLProps` must become type intersections. Shared notes also give VS Code users peer-dependency instructions that apply to npm libraries, and repeat the full app redesign in the History and Documentation Explorer changelogs. This makes the migrations explicit, gives those packages targeted entries, and links to the matching migration-guide sections. The consolidated React-components entry points to the overall v6 PR rather than the PR that introduced only `KeycapHint`. Splitting the shared notes preserves the planned release versions; the transport note classifies the `GraphiQLProps` change as breaking for `graphiql`. These are changes to the pending release inputs. Changesets will regenerate #4676 after merge; its five React peer-range corrections need to be reapplied there afterward.
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to graphiql-6, this
PR will be updated.
# Releases
## cm6-graphql@1.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
### Patch Changes
- Updated dependencies
[[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109),
[`5affc68`](https://github.com/graphql/graphiql/commit/5affc680b14dc04feb02fc8713a18dfdd56b4a81),
[`3d368ba`](https://github.com/graphql/graphiql/commit/3d368ba8747ac2ad0bd73c8bf6f46f952122cfc8)]:
- graphql-language-service@6.0.0
## codemirror-graphql@3.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
### Patch Changes
- Updated dependencies
[[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109),
[`5affc68`](https://github.com/graphql/graphiql/commit/5affc680b14dc04feb02fc8713a18dfdd56b4a81),
[`3d368ba`](https://github.com/graphql/graphiql/commit/3d368ba8747ac2ad0bd73c8bf6f46f952122cfc8)]:
- graphql-language-service@6.0.0
## graphiql@6.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
- [#4416](https://github.com/graphql/graphiql/pull/4416)
[`9c153e2`](https://github.com/graphql/graphiql/commit/9c153e2dc85d8d705370c4c0c739fcdc0844741d)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Replace
`@graphiql/plugin-explorer` with `@graphiql/plugin-query-builder`.
Remove the Explorer dependency and plugin registration when upgrading.
Query Builder is included in GraphiQL's default plugin set; if you
supply a custom `plugins` array, add `QUERY_BUILDER_PLUGIN` from
`graphiql` to retain query-building support.
- [#4566](https://github.com/graphql/graphiql/pull/4566)
[`f916fd6`](https://github.com/graphql/graphiql/commit/f916fd6ba17c23cedd459b5bf16c55dea3b826e8)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Upgrade the
bundled Monaco Editor to 0.57 and adopt the worker and ESM entry points
introduced in 0.56. Published packages accept `monaco-editor` `>=0.56.0
<0.58.0`. If you configure Monaco directly, use Monaco 0.56 or 0.57,
replace `monaco-editor/esm/vs/*` imports with exported entry points, and
configure `MonacoEnvironment.getWorker` to return the GraphQL worker for
the `graphql` label. Custom GraphQL workers must initialize immediately
and provide non-cloneable configuration by overriding
`GraphQLWorker.initialize`. GraphiQL's worker setup helpers handle these
changes and load the matching `monaco-graphql` major. See the [GraphiQL
6 migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#monaco-editor-056-and-057-worker-setup)
for examples. This update builds on the initial worker migration
contributed by @lukasbash.
- [#4610](https://github.com/graphql/graphiql/pull/4610)
[`b40d7fe`](https://github.com/graphql/graphiql/commit/b40d7feec9a26451402efd93cba046b8bd947509)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove the
`operationName` prop from `GraphiQL` and `GraphiQLProvider`. Each
request now uses the operation selected in the active tab. Use the
cursor, Run picker, or `useGraphiQLActions().setOperationName(name)` to
select an operation; `onEditOperationName` still reports selection
changes.
- [#4425](https://github.com/graphql/graphiql/pull/4425)
[`ff2e4ca`](https://github.com/graphql/graphiql/commit/ff2e4ca25b565ecee504ac64aa7459805cb8e724)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove the
composable `GraphiQL.Toolbar` and `GraphiQL.Logo` slots. Editor actions
are now contributed through a plugin's `sessionActions`, and branding is
customized through the `brand` prop passed to `<GraphiQL>` (or
`<TopBar>` directly). `GraphiQL.Footer` is unchanged. See the [Toolbar
and Logo migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#removed-graphiqltoolbar-and-graphiqllogo)
for before/after examples.
- [#4333](https://github.com/graphql/graphiql/pull/4333)
[`093cb10`](https://github.com/graphql/graphiql/commit/093cb100a4524b1005b82c1c064bb897416bfc82)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`createTransport` and a structured `Transport` API for queries,
mutations, subscriptions, and incremental delivery. Pass a transport
through `<GraphiQL transport={...}>`; the `transport` and `fetcher`
props are mutually exclusive at the type level.
`GraphiQLProps` is now a union. If a TypeScript wrapper uses `interface
AppProps extends GraphiQLProps`, replace it with a type intersection
such as `type AppProps = GraphiQLProps & { applicationName: string }`,
even when retaining `fetcher`. See the [migration
overview](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#overview).
When `supportedMethods` is omitted, `createTransport` discovers endpoint
capabilities through `OPTIONS` and the `Allow` header. Queries prefer
QUERY, then POST, then GET. Mutations and operations of unknown type
require POST. An explicit `method` override applies to queries and fails
if the endpoint excludes it. GET sends GraphQL parameters in the URL;
POST and QUERY send a JSON body.
Discovery is shared by concurrent requests and repeats when effective
request headers change. If discovery fails, exceeds two seconds, or the
`Allow` header is missing or malformed, the transport assumes only its
initially configured `method` (POST by default) is available. A valid
advertisement containing no supported methods blocks execution. Pass a
nonempty `supportedMethods` array to skip discovery for known
capabilities. Cross-origin servers must permit OPTIONS and expose
`Allow` through `Access-Control-Expose-Headers`.
`TransportResponse` exposes HTTP method, status, headers, timing, and
byte sizes alongside the GraphQL result. HTTP metadata remains available
when a response body is not valid JSON. Its `ok` field accounts for both
HTTP status and GraphQL errors. `TransportRequest` supports GraphQL
`extensions` and an abort `signal`. Subscriptions require an explicit
`subscriptionClient` with an `iterate(request)` method, supported by
`graphql-ws` v6 and `graphql-sse` clients.
Plugins can transform outgoing requests with `onBeforeSend` and observe
responses or request failures with `onResponse` and `onError`, available
through `useGraphiQLPluginContext().transport`. Each registration
returns a cleanup function. This context field is absent when using the
legacy `fetcher` prop.
Transports can expose query method preferences through optional
`setMethod`, `methodOverride`, and `subscribe(listener)` APIs. Calling
`setMethod()` without an argument restores automatic selection.
`methodOverride` distinguishes an explicit preference from Auto;
`Transport.method` reflects the query method, while
`TransportResponse.method` reports the method actually used for an
execution. `subscribe(listener)` notifies GraphiQL of preference and
capability changes and returns an unsubscribe function. These
notifications are independent of request lifecycle hooks.
`createTransport` implements these APIs; custom transports can omit
them.
`createGraphiQLFetcher`, `Fetcher`, and `<GraphiQL fetcher={...}>` are
deprecated but remain supported. See the [Transport migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#new-transport-api)
for examples and custom transport requirements.
- [#4228](https://github.com/graphql/graphiql/pull/4228) Thanks
[@trevor-scheer](https://github.com/trevor-scheer)! - Redesign GraphiQL
with light and dark themes, an endpoint and Run bar, a plugin activity
rail, a resizable side panel, a status bar, and a Variables/Headers tab
strip. The Documentation Explorer, History, and Monaco editor themes
follow the same design. Settings offer theme, density, and font-size
controls.
The top bar joins Run/Stop with the selected operation name, its
QRY/MUT/SUB label, and an HTTP method selector. Selecting an operation
does not execute it; use Run or the keyboard shortcut. The method menu
offers Auto for queries and explains unavailable options. Selected rows
use the GraphQL logo pink, while keyboard focus has a separate outline.
The response pane adds HTTP method, status, timing, and size from
transports that provide them, a copy action, and persisted JSON, Tree,
and Table views. Tree expands response objects and arrays; Table
presents each list field separately. Saved operations show when they
have unsaved edits, and tabs with multiple operations identify the
active operation.
Improve keyboard focus visibility and screen-reader labels throughout
the interface. Escape cancels History label edits and returns focus to
the edit button. Closing Settings returns focus to its trigger.
Unify GraphQL syntax coloring across Documentation Explorer, History,
and Query Builder. Use the `--type-scalar`, `--type-enum`,
`--type-input`, and `--type-composite` CSS tokens and the exported
`typeCategory` helper to customize type-category colors.
The design tokens use OKLCH colors, and the build targets the `defaults`
browserslist preset. The v5 `--color-*` variables remain defined but no
longer theme the built-in UI; migrate existing overrides to the new
OKLCH tokens. Custom CSS that overrides internal class names may also
need updating. See [CSS and
retheming](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#css-and-retheming)
for migration guidance. Refs graphql/graphiql#4219.
### Minor Changes
- [#4359](https://github.com/graphql/graphiql/pull/4359)
[`ac56840`](https://github.com/graphql/graphiql/commit/ac5684038d1147650ac4203b47ff0f49e905e5cd)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`@graphiql/plugin-collections` for saving operations in named
collections, reopening them in tabs, and sharing or importing
collections as JSON. Save with Cmd+S/Ctrl+S or the Save button.
Re-saving an operation opened from a collection updates that saved item.
Imports match items by stable ID and offer conflict resolution; merging
preserves existing items.
Use `COLLECTIONS_PLUGIN` for the default configuration, or
`collectionsPlugin(options)` to configure a storage adapter, `readOnly`,
`allowImportExport`, and `allowReplace`. The default adapter uses
`localStorage`.
`@graphiql/react` adds `registerSaveHandler(handler)` to connect a
plugin to the save shortcut and button. Only one handler can be
registered at a time. GraphiQL waits for its promise to resolve before
marking the submitted query snapshot saved; cancellation and errors
leave it unsaved. `GraphiQLPlugin.sessionActions` provides an
always-mounted slot for plugin actions, dialogs, and behavior
registration.
- [#4589](https://github.com/graphql/graphiql/pull/4589)
[`7f9e0cc`](https://github.com/graphql/graphiql/commit/7f9e0ccdd673c7b1f05aca12fe3a8d1f12cee982)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Include
Query Builder and Collections alongside History in GraphiQL's default
plugin set. Passing `plugins` replaces this set; use
`plugins={[...DEFAULT_PLUGINS, customPlugin]}` to extend it. The
Documentation Explorer remains controlled separately by
`referencePlugin`.
Export the immutable `DEFAULT_PLUGINS` array, `QUERY_BUILDER_PLUGIN`,
and `COLLECTIONS_PLUGIN` from `graphiql` so you can customize the
defaults without importing each plugin package.
- [#4352](https://github.com/graphql/graphiql/pull/4352)
[`f8a9445`](https://github.com/graphql/graphiql/commit/f8a944505a0fbb9245b4ea1a3ca67bd50d4b7991)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Keep the
active operation synchronized with the editor cursor in documents
containing multiple operations. Operation-aware plugins use the same
selection. The `onEditOperationName` callback fires when the cursor
enters a different named operation, as well as when an operation is
selected explicitly.
- [#4352](https://github.com/graphql/graphiql/pull/4352)
[`f8a9445`](https://github.com/graphql/graphiql/commit/f8a944505a0fbb9245b4ea1a3ca67bd50d4b7991)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`@graphiql/plugin-query-builder` for building operations from a schema.
Select fields and arguments, promote scalar arguments to variables,
extract and edit named fragments, and add inline fragments for union or
interface types. Edits update the active operation in the editor.
The package exports `QUERY_BUILDER_PLUGIN` for registration and
`QueryBuilder` for custom integrations.
- [#4322](https://github.com/graphql/graphiql/pull/4322)
[`fdbd07d`](https://github.com/graphql/graphiql/commit/fdbd07d0c11426ef2095ba6637fb80272dd01a86)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`useGraphiQLSettings()` for reading and updating persisted theme,
density, and font-size preferences. Settings are shared between
consumers, including plugins and the exported `SettingsDialog`. The hook
exposes `resolvedTheme` so plugins can follow light and dark appearance,
including operating-system changes when the theme is `auto`.
`SettingsDialog` also controls header persistence. The existing
`forcedTheme` and `showPersistHeadersSettings` props continue to apply;
a forced theme hides the theme control.
### Patch Changes
- [#4636](https://github.com/graphql/graphiql/pull/4636)
[`45a81d7`](https://github.com/graphql/graphiql/commit/45a81d76849c0be2622fd97adf75e3dab3aa0e06)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Use `clsx`
2 for class name composition.
- [#4623](https://github.com/graphql/graphiql/pull/4623)
[`ecedd76`](https://github.com/graphql/graphiql/commit/ecedd76452c31637745bd509174f6eab5d0aebc5)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Build with
the stable React Compiler and use its stable runtime for React 18
compatibility.
- Updated dependencies
[[`45a81d7`](https://github.com/graphql/graphiql/commit/45a81d76849c0be2622fd97adf75e3dab3aa0e06),
[`b6f8dc6`](https://github.com/graphql/graphiql/commit/b6f8dc6f247b63c19fe2b7962866508c5d0fb219),
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109),
[`541682b`](https://github.com/graphql/graphiql/commit/541682ba18c9614976991dc230b9da7c502bcebf),
[`d4f0268`](https://github.com/graphql/graphiql/commit/d4f026853b89b9755f28d8f4059fcba419aa6d5a),
[`f916fd6`](https://github.com/graphql/graphiql/commit/f916fd6ba17c23cedd459b5bf16c55dea3b826e8),
[`f8a9445`](https://github.com/graphql/graphiql/commit/f8a944505a0fbb9245b4ea1a3ca67bd50d4b7991),
[`f8a9445`](https://github.com/graphql/graphiql/commit/f8a944505a0fbb9245b4ea1a3ca67bd50d4b7991),
[`f45e26b`](https://github.com/graphql/graphiql/commit/f45e26b6eff736c2faddbafd82550ddfc3efa860),
[`827da62`](https://github.com/graphql/graphiql/commit/827da6263685aa6e2f4df98ab7aaf032d2783605),
[`b40d7fe`](https://github.com/graphql/graphiql/commit/b40d7feec9a26451402efd93cba046b8bd947509),
[`b6f8dc6`](https://github.com/graphql/graphiql/commit/b6f8dc6f247b63c19fe2b7962866508c5d0fb219),
[`ecedd76`](https://github.com/graphql/graphiql/commit/ecedd76452c31637745bd509174f6eab5d0aebc5),
[`093cb10`](https://github.com/graphql/graphiql/commit/093cb100a4524b1005b82c1c064bb897416bfc82),
[`cc33695`](https://github.com/graphql/graphiql/commit/cc33695caf063f64c85febd7f9013cef8b94e051),
[`a9f2e37`](https://github.com/graphql/graphiql/commit/a9f2e372251bbe92e7cf0bf622bc50191da1e3eb),
[`a9f2e37`](https://github.com/graphql/graphiql/commit/a9f2e372251bbe92e7cf0bf622bc50191da1e3eb),
[`b6f8dc6`](https://github.com/graphql/graphiql/commit/b6f8dc6f247b63c19fe2b7962866508c5d0fb219)]:
- @graphiql/react@1.0.0
- @graphiql/plugin-history@1.0.0
- @graphiql/plugin-collections@1.0.0
- @graphiql/plugin-doc-explorer@1.0.0
- @graphiql/plugin-query-builder@1.0.0
## @graphiql/plugin-code-exporter@6.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
## @graphiql/plugin-collections@1.0.0
### Major Changes
- [#4359](https://github.com/graphql/graphiql/pull/4359)
[`ac56840`](https://github.com/graphql/graphiql/commit/ac5684038d1147650ac4203b47ff0f49e905e5cd)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`@graphiql/plugin-collections` for saving operations in named
collections, reopening them in tabs, and sharing or importing
collections as JSON. Save with Cmd+S/Ctrl+S or the Save button.
Re-saving an operation opened from a collection updates that saved item.
Imports match items by stable ID and offer conflict resolution; merging
preserves existing items.
Use `COLLECTIONS_PLUGIN` for the default configuration, or
`collectionsPlugin(options)` to configure a storage adapter, `readOnly`,
`allowImportExport`, and `allowReplace`. The default adapter uses
`localStorage`.
`@graphiql/react` adds `registerSaveHandler(handler)` to connect a
plugin to the save shortcut and button. Only one handler can be
registered at a time. GraphiQL waits for its promise to resolve before
marking the submitted query snapshot saved; cancellation and errors
leave it unsaved. `GraphiQLPlugin.sessionActions` provides an
always-mounted slot for plugin actions, dialogs, and behavior
registration.
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
## @graphiql/plugin-doc-explorer@1.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
- [#4393](https://github.com/graphql/graphiql/pull/4393)
[`827da62`](https://github.com/graphql/graphiql/commit/827da6263685aa6e2f4df98ab7aaf032d2783605)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove
deprecated hooks: `useEditorContext`, `useExecutionContext`,
`usePluginContext`, `useSchemaContext`, `useTheme`, `useStorage`,
`useStorageContext`, `usePrettifyEditors`, `useCopyQuery`,
`useMergeQuery`, the `*Store` aliases (in `@graphiql/react`);
`useExplorerContext` (in `@graphiql/plugin-doc-explorer`); and
`useHistoryContext` (in `@graphiql/plugin-history`). Replacements were
available since v5 — see the [removed-hooks migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#removed-hooks)
for one-line replacements.
### Minor Changes
- [#4228](https://github.com/graphql/graphiql/pull/4228) Thanks
[@trevor-scheer](https://github.com/trevor-scheer)! - Restyle the
Documentation Explorer for GraphiQL 6, including light and dark themes,
keyboard focus indicators, and GraphQL type-category colors. Customize
type colors with `--type-scalar`, `--type-enum`, `--type-input`, and
`--type-composite`.
The v5 `--color-*` overrides no longer theme the built-in UI. Migrate
custom styles to the new OKLCH tokens using the [CSS and retheming
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#css-and-retheming).
### Patch Changes
- [#4623](https://github.com/graphql/graphiql/pull/4623)
[`ecedd76`](https://github.com/graphql/graphiql/commit/ecedd76452c31637745bd509174f6eab5d0aebc5)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Build with
the stable React Compiler and use its stable runtime for React 18
compatibility.
## @graphiql/plugin-history@1.0.0
### Major Changes
- [#4393](https://github.com/graphql/graphiql/pull/4393)
[`827da62`](https://github.com/graphql/graphiql/commit/827da6263685aa6e2f4df98ab7aaf032d2783605)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove
deprecated hooks: `useEditorContext`, `useExecutionContext`,
`usePluginContext`, `useSchemaContext`, `useTheme`, `useStorage`,
`useStorageContext`, `usePrettifyEditors`, `useCopyQuery`,
`useMergeQuery`, the `*Store` aliases (in `@graphiql/react`);
`useExplorerContext` (in `@graphiql/plugin-doc-explorer`); and
`useHistoryContext` (in `@graphiql/plugin-history`). Replacements were
available since v5 — see the [removed-hooks migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#removed-hooks)
for one-line replacements.
### Patch Changes
- [#4636](https://github.com/graphql/graphiql/pull/4636)
[`45a81d7`](https://github.com/graphql/graphiql/commit/45a81d76849c0be2622fd97adf75e3dab3aa0e06)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Use `clsx`
2 for class name composition.
- [#4623](https://github.com/graphql/graphiql/pull/4623)
[`ecedd76`](https://github.com/graphql/graphiql/commit/ecedd76452c31637745bd509174f6eab5d0aebc5)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Build with
the stable React Compiler and use its stable runtime for React 18
compatibility.
- [#4228](https://github.com/graphql/graphiql/pull/4228) Thanks
[@trevor-scheer](https://github.com/trevor-scheer)! - Restyle History
for GraphiQL 6 with light and dark themes, shared GraphQL syntax colors,
and clearer keyboard focus indicators. Escape cancels a label edit and
returns focus to the edit button.
The v5 `--color-*` overrides no longer theme the built-in UI. Migrate
custom styles to the new OKLCH tokens using the [CSS and retheming
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#css-and-retheming).
- Updated dependencies
[[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109),
[`26ae143`](https://github.com/graphql/graphiql/commit/26ae143ba68004d4a50468ba1feb649ace673f3a),
[`093cb10`](https://github.com/graphql/graphiql/commit/093cb100a4524b1005b82c1c064bb897416bfc82)]:
- @graphiql/toolkit@1.0.0
## @graphiql/plugin-query-builder@1.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
- [#4352](https://github.com/graphql/graphiql/pull/4352)
[`f8a9445`](https://github.com/graphql/graphiql/commit/f8a944505a0fbb9245b4ea1a3ca67bd50d4b7991)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`@graphiql/plugin-query-builder` for building operations from a schema.
Select fields and arguments, promote scalar arguments to variables,
extract and edit named fragments, and add inline fragments for union or
interface types. Edits update the active operation in the editor.
The package exports `QUERY_BUILDER_PLUGIN` for registration and
`QueryBuilder` for custom integrations.
### Patch Changes
- [#4623](https://github.com/graphql/graphiql/pull/4623)
[`ecedd76`](https://github.com/graphql/graphiql/commit/ecedd76452c31637745bd509174f6eab5d0aebc5)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Build with
the stable React Compiler and use its stable runtime for React 18
compatibility.
## @graphiql/react@1.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
- [#4566](https://github.com/graphql/graphiql/pull/4566)
[`f916fd6`](https://github.com/graphql/graphiql/commit/f916fd6ba17c23cedd459b5bf16c55dea3b826e8)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Upgrade the
bundled Monaco Editor to 0.57 and adopt the worker and ESM entry points
introduced in 0.56. Published packages accept `monaco-editor` `>=0.56.0
<0.58.0`. If you configure Monaco directly, use Monaco 0.56 or 0.57,
replace `monaco-editor/esm/vs/*` imports with exported entry points, and
configure `MonacoEnvironment.getWorker` to return the GraphQL worker for
the `graphql` label. Custom GraphQL workers must initialize immediately
and provide non-cloneable configuration by overriding
`GraphQLWorker.initialize`. GraphiQL's worker setup helpers handle these
changes and load the matching `monaco-graphql` major. See the [GraphiQL
6 migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#monaco-editor-056-and-057-worker-setup)
for examples. This update builds on the initial worker migration
contributed by @lukasbash.
- [#4423](https://github.com/graphql/graphiql/pull/4423)
[`f45e26b`](https://github.com/graphql/graphiql/commit/f45e26b6eff736c2faddbafd82550ddfc3efa860)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - `cn` is no
longer exported from `@graphiql/react`; import `clsx` directly.
- [#4393](https://github.com/graphql/graphiql/pull/4393)
[`827da62`](https://github.com/graphql/graphiql/commit/827da6263685aa6e2f4df98ab7aaf032d2783605)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove
deprecated hooks: `useEditorContext`, `useExecutionContext`,
`usePluginContext`, `useSchemaContext`, `useTheme`, `useStorage`,
`useStorageContext`, `usePrettifyEditors`, `useCopyQuery`,
`useMergeQuery`, the `*Store` aliases (in `@graphiql/react`);
`useExplorerContext` (in `@graphiql/plugin-doc-explorer`); and
`useHistoryContext` (in `@graphiql/plugin-history`). Replacements were
available since v5 — see the [removed-hooks migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#removed-hooks)
for one-line replacements.
- [#4610](https://github.com/graphql/graphiql/pull/4610)
[`b40d7fe`](https://github.com/graphql/graphiql/commit/b40d7feec9a26451402efd93cba046b8bd947509)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove the
`operationName` prop from `GraphiQL` and `GraphiQLProvider`. Each
request now uses the operation selected in the active tab. Use the
cursor, Run picker, or `useGraphiQLActions().setOperationName(name)` to
select an operation; `onEditOperationName` still reports selection
changes.
### Minor Changes
- [#4359](https://github.com/graphql/graphiql/pull/4359)
[`ac56840`](https://github.com/graphql/graphiql/commit/ac5684038d1147650ac4203b47ff0f49e905e5cd)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`@graphiql/plugin-collections` for saving operations in named
collections, reopening them in tabs, and sharing or importing
collections as JSON. Save with Cmd+S/Ctrl+S or the Save button.
Re-saving an operation opened from a collection updates that saved item.
Imports match items by stable ID and offer conflict resolution; merging
preserves existing items.
Use `COLLECTIONS_PLUGIN` for the default configuration, or
`collectionsPlugin(options)` to configure a storage adapter, `readOnly`,
`allowImportExport`, and `allowReplace`. The default adapter uses
`localStorage`.
`@graphiql/react` adds `registerSaveHandler(handler)` to connect a
plugin to the save shortcut and button. Only one handler can be
registered at a time. GraphiQL waits for its promise to resolve before
marking the submitted query snapshot saved; cancellation and errors
leave it unsaved. `GraphiQLPlugin.sessionActions` provides an
always-mounted slot for plugin actions, dialogs, and behavior
registration.
- [#4228](https://github.com/graphql/graphiql/pull/4228) Thanks
[@trevor-scheer](https://github.com/trevor-scheer)! - Export components
for custom GraphiQL layouts: `TopBar`, `ActivityRail`, `SidePanel`,
`StatusBar`, `VarHeadersStrip`, and `PanelHeader`. Use `PortalProvider`
and `usePortalContainer` to keep dialogs, menus, and tooltips inside a
custom container.
Add `KeycapHint` with semantic `MODIFIER` values for platform-aware
shortcuts, `MethodPill` for operation types, and `SegmentedControl` for
controlled single-choice inputs with native radio semantics. `Dialog`
adds `Header`, `Body`, and `Footer` components and an optional
`restoreFocusRef` prop to choose where focus returns on close.
- [#4352](https://github.com/graphql/graphiql/pull/4352)
[`f8a9445`](https://github.com/graphql/graphiql/commit/f8a944505a0fbb9245b4ea1a3ca67bd50d4b7991)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Keep the
active operation synchronized with the editor cursor in documents
containing multiple operations. Operation-aware plugins use the same
selection. The `onEditOperationName` callback fires when the cursor
enters a different named operation, as well as when an operation is
selected explicitly.
- [#4322](https://github.com/graphql/graphiql/pull/4322)
[`fdbd07d`](https://github.com/graphql/graphiql/commit/fdbd07d0c11426ef2095ba6637fb80272dd01a86)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`useGraphiQLSettings()` for reading and updating persisted theme,
density, and font-size preferences. Settings are shared between
consumers, including plugins and the exported `SettingsDialog`. The hook
exposes `resolvedTheme` so plugins can follow light and dark appearance,
including operating-system changes when the theme is `auto`.
`SettingsDialog` also controls header persistence. The existing
`forcedTheme` and `showPersistHeadersSettings` props continue to apply;
a forced theme hides the theme control.
- [#4333](https://github.com/graphql/graphiql/pull/4333)
[`093cb10`](https://github.com/graphql/graphiql/commit/093cb100a4524b1005b82c1c064bb897416bfc82)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`createTransport` and a structured `Transport` API for queries,
mutations, subscriptions, and incremental delivery. Pass a transport
through `<GraphiQL transport={...}>`; the `transport` and `fetcher`
props are mutually exclusive at the type level.
`GraphiQLProps` is now a union. If a TypeScript wrapper uses `interface
AppProps extends GraphiQLProps`, replace it with a type intersection
such as `type AppProps = GraphiQLProps & { applicationName: string }`,
even when retaining `fetcher`. See the [migration
overview](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#overview).
When `supportedMethods` is omitted, `createTransport` discovers endpoint
capabilities through `OPTIONS` and the `Allow` header. Queries prefer
QUERY, then POST, then GET. Mutations and operations of unknown type
require POST. An explicit `method` override applies to queries and fails
if the endpoint excludes it. GET sends GraphQL parameters in the URL;
POST and QUERY send a JSON body.
Discovery is shared by concurrent requests and repeats when effective
request headers change. If discovery fails, exceeds two seconds, or the
`Allow` header is missing or malformed, the transport assumes only its
initially configured `method` (POST by default) is available. A valid
advertisement containing no supported methods blocks execution. Pass a
nonempty `supportedMethods` array to skip discovery for known
capabilities. Cross-origin servers must permit OPTIONS and expose
`Allow` through `Access-Control-Expose-Headers`.
`TransportResponse` exposes HTTP method, status, headers, timing, and
byte sizes alongside the GraphQL result. HTTP metadata remains available
when a response body is not valid JSON. Its `ok` field accounts for both
HTTP status and GraphQL errors. `TransportRequest` supports GraphQL
`extensions` and an abort `signal`. Subscriptions require an explicit
`subscriptionClient` with an `iterate(request)` method, supported by
`graphql-ws` v6 and `graphql-sse` clients.
Plugins can transform outgoing requests with `onBeforeSend` and observe
responses or request failures with `onResponse` and `onError`, available
through `useGraphiQLPluginContext().transport`. Each registration
returns a cleanup function. This context field is absent when using the
legacy `fetcher` prop.
Transports can expose query method preferences through optional
`setMethod`, `methodOverride`, and `subscribe(listener)` APIs. Calling
`setMethod()` without an argument restores automatic selection.
`methodOverride` distinguishes an explicit preference from Auto;
`Transport.method` reflects the query method, while
`TransportResponse.method` reports the method actually used for an
execution. `subscribe(listener)` notifies GraphiQL of preference and
capability changes and returns an unsubscribe function. These
notifications are independent of request lifecycle hooks.
`createTransport` implements these APIs; custom transports can omit
them.
`createGraphiQLFetcher`, `Fetcher`, and `<GraphiQL fetcher={...}>` are
deprecated but remain supported. See the [Transport migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#new-transport-api)
for examples and custom transport requirements.
- [#4228](https://github.com/graphql/graphiql/pull/4228) Thanks
[@trevor-scheer](https://github.com/trevor-scheer)! - Redesign GraphiQL
with light and dark themes, an endpoint and Run bar, a plugin activity
rail, a resizable side panel, a status bar, and a Variables/Headers tab
strip. The Documentation Explorer, History, and Monaco editor themes
follow the same design. Settings offer theme, density, and font-size
controls.
The top bar joins Run/Stop with the selected operation name, its
QRY/MUT/SUB label, and an HTTP method selector. Selecting an operation
does not execute it; use Run or the keyboard shortcut. The method menu
offers Auto for queries and explains unavailable options. Selected rows
use the GraphQL logo pink, while keyboard focus has a separate outline.
The response pane adds HTTP method, status, timing, and size from
transports that provide them, a copy action, and persisted JSON, Tree,
and Table views. Tree expands response objects and arrays; Table
presents each list field separately. Saved operations show when they
have unsaved edits, and tabs with multiple operations identify the
active operation.
Improve keyboard focus visibility and screen-reader labels throughout
the interface. Escape cancels History label edits and returns focus to
the edit button. Closing Settings returns focus to its trigger.
Unify GraphQL syntax coloring across Documentation Explorer, History,
and Query Builder. Use the `--type-scalar`, `--type-enum`,
`--type-input`, and `--type-composite` CSS tokens and the exported
`typeCategory` helper to customize type-category colors.
The design tokens use OKLCH colors, and the build targets the `defaults`
browserslist preset. The v5 `--color-*` variables remain defined but no
longer theme the built-in UI; migrate existing overrides to the new
OKLCH tokens. Custom CSS that overrides internal class names may also
need updating. See [CSS and
retheming](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#css-and-retheming)
for migration guidance. Refs graphql/graphiql#4219.
### Patch Changes
- [#4636](https://github.com/graphql/graphiql/pull/4636)
[`45a81d7`](https://github.com/graphql/graphiql/commit/45a81d76849c0be2622fd97adf75e3dab3aa0e06)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Use `clsx`
2 for class name composition.
- [#4606](https://github.com/graphql/graphiql/pull/4606)
[`541682b`](https://github.com/graphql/graphiql/commit/541682ba18c9614976991dc230b9da7c502bcebf)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Load
Prettier's ESM plugins so GraphQL queries and JSONC variables and
headers can be prettified in Vite development builds without forced
dependency optimization.
- [#4623](https://github.com/graphql/graphiql/pull/4623)
[`ecedd76`](https://github.com/graphql/graphiql/commit/ecedd76452c31637745bd509174f6eab5d0aebc5)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Build with
the stable React Compiler and use its stable runtime for React 18
compatibility.
- [#4633](https://github.com/graphql/graphiql/pull/4633)
[`cc33695`](https://github.com/graphql/graphiql/commit/cc33695caf063f64c85febd7f9013cef8b94e051)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Update
Motion to version 14 for tab reordering.
- Updated dependencies
[[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109),
[`26ae143`](https://github.com/graphql/graphiql/commit/26ae143ba68004d4a50468ba1feb649ace673f3a),
[`5affc68`](https://github.com/graphql/graphiql/commit/5affc680b14dc04feb02fc8713a18dfdd56b4a81),
[`f916fd6`](https://github.com/graphql/graphiql/commit/f916fd6ba17c23cedd459b5bf16c55dea3b826e8),
[`3d368ba`](https://github.com/graphql/graphiql/commit/3d368ba8747ac2ad0bd73c8bf6f46f952122cfc8),
[`093cb10`](https://github.com/graphql/graphiql/commit/093cb100a4524b1005b82c1c064bb897416bfc82)]:
- @graphiql/toolkit@1.0.0
- graphql-language-service@6.0.0
- monaco-graphql@2.0.0
## @graphiql/toolkit@1.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
- [#4392](https://github.com/graphql/graphiql/pull/4392)
[`26ae143`](https://github.com/graphql/graphiql/commit/26ae143ba68004d4a50468ba1feb649ace673f3a)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove the
deprecated `legacyClient` alias from `CreateFetcherOptions`. It
duplicated `legacyWsClient` — pass `legacyWsClient` instead.
### Minor Changes
- [#4333](https://github.com/graphql/graphiql/pull/4333)
[`093cb10`](https://github.com/graphql/graphiql/commit/093cb100a4524b1005b82c1c064bb897416bfc82)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Add
`createTransport` and a structured `Transport` API for queries,
mutations, subscriptions, and incremental delivery. Pass a transport
through `<GraphiQL transport={...}>`; the `transport` and `fetcher`
props are mutually exclusive at the type level.
`GraphiQLProps` is now a union. If a TypeScript wrapper uses `interface
AppProps extends GraphiQLProps`, replace it with a type intersection
such as `type AppProps = GraphiQLProps & { applicationName: string }`,
even when retaining `fetcher`. See the [migration
overview](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#overview).
When `supportedMethods` is omitted, `createTransport` discovers endpoint
capabilities through `OPTIONS` and the `Allow` header. Queries prefer
QUERY, then POST, then GET. Mutations and operations of unknown type
require POST. An explicit `method` override applies to queries and fails
if the endpoint excludes it. GET sends GraphQL parameters in the URL;
POST and QUERY send a JSON body.
Discovery is shared by concurrent requests and repeats when effective
request headers change. If discovery fails, exceeds two seconds, or the
`Allow` header is missing or malformed, the transport assumes only its
initially configured `method` (POST by default) is available. A valid
advertisement containing no supported methods blocks execution. Pass a
nonempty `supportedMethods` array to skip discovery for known
capabilities. Cross-origin servers must permit OPTIONS and expose
`Allow` through `Access-Control-Expose-Headers`.
`TransportResponse` exposes HTTP method, status, headers, timing, and
byte sizes alongside the GraphQL result. HTTP metadata remains available
when a response body is not valid JSON. Its `ok` field accounts for both
HTTP status and GraphQL errors. `TransportRequest` supports GraphQL
`extensions` and an abort `signal`. Subscriptions require an explicit
`subscriptionClient` with an `iterate(request)` method, supported by
`graphql-ws` v6 and `graphql-sse` clients.
Plugins can transform outgoing requests with `onBeforeSend` and observe
responses or request failures with `onResponse` and `onError`, available
through `useGraphiQLPluginContext().transport`. Each registration
returns a cleanup function. This context field is absent when using the
legacy `fetcher` prop.
Transports can expose query method preferences through optional
`setMethod`, `methodOverride`, and `subscribe(listener)` APIs. Calling
`setMethod()` without an argument restores automatic selection.
`methodOverride` distinguishes an explicit preference from Auto;
`Transport.method` reflects the query method, while
`TransportResponse.method` reports the method actually used for an
execution. `subscribe(listener)` notifies GraphiQL of preference and
capability changes and returns an unsubscribe function. These
notifications are independent of request lifecycle hooks.
`createTransport` implements these APIs; custom transports can omit
them.
`createGraphiQLFetcher`, `Fetcher`, and `<GraphiQL fetcher={...}>` are
deprecated but remain supported. See the [Transport migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#new-transport-api)
for examples and custom transport requirements.
## graphql-language-service@6.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
- [#4635](https://github.com/graphql/graphiql/pull/4635)
[`3d368ba`](https://github.com/graphql/graphiql/commit/3d368ba8747ac2ad0bd73c8bf6f46f952122cfc8)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove the
deprecated `graphql` executable. Install `graphql-language-service-cli`
and use `graphql-lsp` for the language server CLI.
### Patch Changes
- [#4590](https://github.com/graphql/graphiql/pull/4590)
[`5affc68`](https://github.com/graphql/graphiql/commit/5affc680b14dc04feb02fc8713a18dfdd56b4a81)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove the
CommonJS-only `nullthrows` dependency and replace `picomatch-browser`
with an ESM-compatible glob matcher.
## graphql-language-service-cli@4.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
### Patch Changes
- [#4642](https://github.com/graphql/graphiql/pull/4642)
[`009944b`](https://github.com/graphql/graphiql/commit/009944b0cf4968aa1f9e49cbc24bc3e7ccc3d02f)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Stop
loading the deprecated `@babel/polyfill` package. The CLI output targets
ES2018 and runs on Node versions with native support for the required
runtime features.
- Updated dependencies
[[`4225e29`](https://github.com/graphql/graphiql/commit/4225e29ebea023591aeb5c54a84cf98b226f6df7),
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109),
[`5affc68`](https://github.com/graphql/graphiql/commit/5affc680b14dc04feb02fc8713a18dfdd56b4a81),
[`3d368ba`](https://github.com/graphql/graphiql/commit/3d368ba8747ac2ad0bd73c8bf6f46f952122cfc8)]:
- graphql-language-service-server@3.0.0
- graphql-language-service@6.0.0
## graphql-language-service-server@3.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
### Patch Changes
- [#4632](https://github.com/graphql/graphiql/pull/4632)
[`4225e29`](https://github.com/graphql/graphiql/commit/4225e29ebea023591aeb5c54a84cf98b226f6df7)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Update
Astro parsing to compiler 4 while preserving GraphQL query locations.
- Updated dependencies
[[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109),
[`5affc68`](https://github.com/graphql/graphiql/commit/5affc680b14dc04feb02fc8713a18dfdd56b4a81),
[`3d368ba`](https://github.com/graphql/graphiql/commit/3d368ba8747ac2ad0bd73c8bf6f46f952122cfc8)]:
- graphql-language-service@6.0.0
## monaco-graphql@2.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - GraphQL.js
15 and 16.0–16.10 are no longer supported peer dependencies. The
supported range is `^16.11.0 || ^17.0.0`. GraphQL.js 16.11 fixes OneOf
input validation for nullable variables and tightens input-object
coercion to reject arrays, giving GraphiQL 6 a correct baseline for
OneOf inputs. Upgrade `graphql` before upgrading these packages.
- [#4566](https://github.com/graphql/graphiql/pull/4566)
[`f916fd6`](https://github.com/graphql/graphiql/commit/f916fd6ba17c23cedd459b5bf16c55dea3b826e8)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Upgrade the
bundled Monaco Editor to 0.57 and adopt the worker and ESM entry points
introduced in 0.56. Published packages accept `monaco-editor` `>=0.56.0
<0.58.0`. If you configure Monaco directly, use Monaco 0.56 or 0.57,
replace `monaco-editor/esm/vs/*` imports with exported entry points, and
configure `MonacoEnvironment.getWorker` to return the GraphQL worker for
the `graphql` label. Custom GraphQL workers must initialize immediately
and provide non-cloneable configuration by overriding
`GraphQLWorker.initialize`. GraphiQL's worker setup helpers handle these
changes and load the matching `monaco-graphql` major. See the [GraphiQL
6 migration
guide](https://github.com/graphql/graphiql/blob/c2e792bc446d5d6751bd7cd1d9ac283a4a1d8fc4/docs/migration/graphiql-6.0.0.md#monaco-editor-056-and-057-worker-setup)
for examples. This update builds on the initial worker migration
contributed by @lukasbash.
### Patch Changes
- [#4590](https://github.com/graphql/graphiql/pull/4590)
[`5affc68`](https://github.com/graphql/graphiql/commit/5affc680b14dc04feb02fc8713a18dfdd56b4a81)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Remove the
CommonJS-only `nullthrows` dependency and replace `picomatch-browser`
with an ESM-compatible glob matcher.
- Updated dependencies
[[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109),
[`5affc68`](https://github.com/graphql/graphiql/commit/5affc680b14dc04feb02fc8713a18dfdd56b4a81),
[`3d368ba`](https://github.com/graphql/graphiql/commit/3d368ba8747ac2ad0bd73c8bf6f46f952122cfc8)]:
- graphql-language-service@6.0.0
## vscode-graphql@1.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Update the
extensions' bundled GraphQL.js runtime to 16.14.2. GraphQL.js is
included in each extension rather than supplied as a peer dependency;
updating the extension does not require installing or upgrading
`graphql` in your project.
### Patch Changes
- Updated dependencies
[[`4225e29`](https://github.com/graphql/graphiql/commit/4225e29ebea023591aeb5c54a84cf98b226f6df7),
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)]:
- graphql-language-service-server@3.0.0
## vscode-graphql-execution@1.0.0
### Major Changes
- [#4478](https://github.com/graphql/graphiql/pull/4478)
[`066528a`](https://github.com/graphql/graphiql/commit/066528a6bb7706d685536888d7b5549d6fd5a109)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Update the
extensions' bundled GraphQL.js runtime to 16.14.2. GraphQL.js is
included in each extension rather than supplied as a peer dependency;
updating the extension does not require installing or upgrading
`graphql` in your project.
---------
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Trevor Scheer <trevor.scheer@gmail.com>
This was referenced Nov 1, 2026
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This is the v6 development trunk. All v6 work will target this branch / PR, and finally be merged into
mainafter release.Resolved and superseded issues
@graphiql/plugin-query-builder(v6: Add a visual query builder (@graphiql/plugin-query-builder) #4352).resolvedThemeto plugins, including system-theme changes (Expose reactiveresolvedThemeto GraphiQL plugins #4649).monaco-editor@0.56andmonaco-editor@0.57#4566).createTransport({ subscriptionClient })with agraphql-sseclient (v6: Add Transport API and<GraphiQL transport>prop #4333).transportAPI; the deprecatedfetcherpath retains its cancellation limitation (v6: fix transport error metadata, subscription teardown, and the spec accept header #4429).operationNameprop from GraphiQL 6 #4610).onBeforeSend, without rewriting the editor document (v6: Expose transport request/response hooks to plugins #4351).SegmentedControlon native radio inputs #4287).pluginsmust retain the defaults or explicitly include History (v6: Correct migration examples and Vite setup #4589).readOnlyoption (v6: Add the operation collections plugin #4359).@graphiql/plugin-explorerwhen upgrading (Deprecate v5--color-*tokens (migrate to OKLCH) and remove@graphiql/plugin-explorer#4416).monaco-editor@0.56andmonaco-editor@0.57#4566).@graphiql/reactREADME (v6: Document the OKLCH token system in the@graphiql/reactREADME #4410).