# What changed in graphiql

> 111 changes in graphiql 1 to 5 from its official release notes, upgrade guides and advisories: 73 breaking, 13 deprecations, 15 new APIs and options. Each one cited. Sources checked 2026-10-23. HTML: https://unstale.sh/npm/graphiql/

To see which of these apply to a repository, run `npx @unstale/cli init` in it.

## graphiql 5

### Breaking changes

- Clicking a reference in the operation editor now requires holding Cmd on macOS or Ctrl on Windows/Linux. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The shortcut to focus the search input changes to Cmd/Ctrl+Alt+K because Monaco Editor uses Cmd/Ctrl+K. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- Webpack and Turbopack projects must import this module to set up Monaco workers. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The GraphiQL prop is removed; Monaco Vim and Emacs community plugins can provide those keybindings. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This prop is removed from the variable editor. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- An empty array removes the default History plugin; include HISTORY_PLUGIN explicitly to keep it alongside custom plugins. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The GraphiQL prop is removed; use initialQuery for the first tab instead. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The button prop should now receive a button element. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The className prop is removed. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The label prop is removed. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This hook is removed. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The GraphiQL prop is removed; custom GraphQL workers can pass non-static configuration to the worker. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- Vite projects must install and configure this plugin to set up Monaco workers for GraphiQL 5. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)

### Deprecations

- This hook is deprecated. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This hook is deprecated. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This hook is deprecated; use useDocExplorer and useDocExplorerActions instead. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This hook is deprecated; use useHistory and useHistoryActions instead. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This hook is deprecated. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This hook is deprecated. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This hook is deprecated. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This hook is deprecated. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- This hook is deprecated. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)

### New APIs and options

- Enables opt-in GraphQL 17 fragment argument syntax support across parsing, validation, type information, autocomplete, hover, and editor integrations; it defaults to false. (5.4.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%405.4.0)
- GraphiQLProvider and GraphiQL expose the per-schema customScalarSchemas configuration, allowing object- or array-valued custom scalars to be accepted by the variable editor’s live JSON Schema linter. (5.3.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%405.3.0)
- The component now allows children of type ReactNode. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- Sets the query for the first tab; newly opened tabs start with an empty operation editor. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- A new hook is provided as an alternative to useExplorerContext. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- A new hook is provided as an alternative to useExplorerContext. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- A new hook is provided as an alternative to the deprecated GraphiQL context hooks. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- A new hook is provided as an alternative to the deprecated GraphiQL context hooks. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- A new hook is provided as an alternative to useHistoryContext. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- A new hook is provided as an alternative to useHistoryContext. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The Variables and Headers editors now support comments. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md), [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%405.0.0)

### Behavior and default changes

- Passing IntrospectionQuery data as the schema prop now builds a schema directly and skips a network introspection request. (5.2.3) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%405.2.3)
- Set this prop to null to remove the default Doc Explorer plugin; custom Doc Explorers belong here and render first. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)

### Tooling

- GraphiQL 5 is powered by the latest version of the Monaco editor. (5.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%405.0.0)

### Fixes and other changes

- Autocomplete now respects operation and fragment scope while including variables from operations that spread the current fragment. (5.4.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%405.4.0)
- CSS files are marked as side effects so Webpack can import CSS in JavaScript. (5.2.3) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%405.2.3)
- An empty string now results in an empty default query; a configured default query is only used for the first tab. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The operation editor shortcut now runs even when there are no operations in the editor. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)
- The last opened plugin is saved in storage. (5.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md)

## graphiql 4

### Breaking changes

- The default export was removed; import GraphiQL as a named export instead. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- The disableTabs option was removed. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- CommonJS build output was dropped; builds are now ESM only. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- The CDN stylesheet path changed to graphiql/dist/style.css. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- The stylesheet import changed to @graphiql/plugin-code-exporter/style.css. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- The stylesheet import changed to @graphiql/plugin-explorer/style.css. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- The stylesheet import changed to @graphiql/react/style.css. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- The stylesheet import changed from graphiql/graphiql.css to graphiql/style.css. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- Single newlines are ignored when handling Markdown. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- Support for React 16 and 17 was dropped, and support for React 19 was added. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- Tabs are always visible, including when there is only one. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- Replace toolbar.additionalComponent with the GraphiQL.Toolbar component to add a component to the toolbar. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- Replace toolbar.additionalContent with the GraphiQL.Toolbar component to add toolbar content. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)

### Deprecations

- The UMD CDN script path changed to graphiql/dist/index.umd.js; the new UMD path is deprecated. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- The UMD CDN build is deprecated; switch to the ESM CDN. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- The code exporter UMD build is deprecated; migrate to the ESM-based CDN. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- The explorer UMD build is deprecated; migrate to the ESM-based CDN. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)

### New APIs and options

- The toolbar component lets developers customize toolbar content and reorder or remove default buttons. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)
- A callback was added to support custom query formatting. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)

### Behavior and default changes

- Tabs tooltips now use the HTML title attribute. (4.0.0) — [upgrade guide](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md)

## graphiql 3

### Breaking changes

- initialTabs was removed; use defaultTabs instead. (3.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%403.0.0)

## graphiql 2

### Breaking changes

- Replaces defaultVariableEditorOpen and defaultSecondaryEditorOpen; controls editor tool visibility, with a default that shows tools when a secondary editor has contents. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Merged with defaultVariableEditorOpen into defaultEditorToolsVisibility. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Merged with defaultSecondaryEditorOpen into defaultEditorToolsVisibility. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/react; its schema prop is removed and it uses the schema from ExplorerContext. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed and replaced by visiblePlugin for controlling which plugin is visible. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- GraphiQL is now a function component; refs no longer expose props, state, or class methods. Use contexts and hooks from @graphiql/react to interact with or change its state. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- The UI has a new design with changed DOM structure and class names, which may affect custom GraphQL IDEs that rely on those internals. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from GraphiQL; use ToolbarButton from @graphiql/react instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from GraphiQL; use formatError from @graphiql/toolkit instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from GraphiQL; use formatResult from @graphiql/toolkit instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Grouping buttons side-by-side is no longer provided out of the box; custom toolbar styles can implement a similar feature. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from GraphiQL; use HeaderEditor from @graphiql/react instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from GraphiQL; use ToolbarMenu from @graphiql/react instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from GraphiQL; use ToolbarMenu.Item from @graphiql/react instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from GraphiQL; use QueryEditor from @graphiql/react instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from GraphiQL; use ResponseEditor from @graphiql/react instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed; it exposed the same component as GraphiQL.Button. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from GraphiQL; use VariableEditor from @graphiql/react instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Renamed to isHeadersEditorEnabled. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Replaces the headerEditorEnabled prop. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/react. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Replaces tabs for receiving tab change callbacks; tabs are now always enabled. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed and replaced by onTogglePluginVisibility. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed and replaced by onTogglePluginVisibility. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/react. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Replaces the ResultsTooltip prop. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Renamed to responseTooltip. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/toolkit. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Tabs are always enabled; the tabs prop is replaced by onTabChange. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/react. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql; use ToolbarMenu.Item from @graphiql/react. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql; ToolbarListbox is exported from @graphiql/react instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql; ToolbarListbox.Option is exported from @graphiql/react instead. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- Removed from graphiql and now exported from @graphiql/react. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- New generic prop for controlling which plugin is visible. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- The GraphiQL component no longer sets window.g. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)

### New APIs and options

- GraphiQL now ships with a dark theme, respects system settings by default, and allows an explicit theme choice via the settings dialog. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)
- New callback called each time the visibility of any plugin changes. (2.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0)

## graphiql 1

### Fixes and other changes

- Fixed server-side rendering by using a type-only CodeMirror import. (1.0.0) — [release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%401.0.0)