graphql/graphiql graphiql@6.0.0

on GitHub

Major Changes

• #4478 066528a Thanks @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 9c153e2 Thanks @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 f916fd6 Thanks @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 for examples. This update builds on the initial worker migration contributed by @lukasbash.

• #4610 b40d7fe Thanks @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 ff2e4ca Thanks @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 for before/after examples.

• #4333 093cb10 Thanks @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.

  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 for examples and custom transport requirements.

• #4228 Thanks @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 for migration guidance. Refs #4219.

Minor Changes

• #4359 ac56840 Thanks @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 7f9e0cc Thanks @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 f8a9445 Thanks @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 f8a9445 Thanks @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 fdbd07d Thanks @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 45a81d7 Thanks @trevor-scheer! - Use clsx 2 for class name composition.

• #4623 ecedd76 Thanks @trevor-scheer! - Build with the stable React Compiler and use its stable runtime for React 18 compatibility.

• Updated dependencies [45a81d7, b6f8dc6, 066528a, 541682b, d4f0268, f916fd6, f8a9445, f8a9445, f45e26b, 827da62, b40d7fe, b6f8dc6, ecedd76, 093cb10, cc33695, a9f2e37, a9f2e37, b6f8dc6]:

  • @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