npm / graphiql
graphiql
What changed in graphiql 1 to 5, from its official release notes, upgrade guides and advisories. Sources checked 2026-10-23.
73 breaking13 deprecations15 new APIs and options3 behavior and defaults1 tooling6 fixes and other
See which of these apply to your code, ranked, in your agent:
npx @unstale/cli initgraphiql 541 changes
Breaking changes 13
Clicking a reference in the operation editor now requires holding Cmd on macOS or Ctrl on Windows/Linux.
The shortcut to focus the search input changes to Cmd/Ctrl+Alt+K because Monaco Editor uses Cmd/Ctrl+K.
Webpack and Turbopack projects must import this module to set up Monaco workers.
The GraphiQL prop is removed; Monaco Vim and Emacs community plugins can provide those keybindings.
This prop is removed from the variable editor.
An empty array removes the default History plugin; include HISTORY_PLUGIN explicitly to keep it alongside custom plugins.
The GraphiQL prop is removed; use initialQuery for the first tab instead.
The button prop should now receive a button element.
The className prop is removed.
The label prop is removed.
This hook is removed.
The GraphiQL prop is removed; custom GraphQL workers can pass non-static configuration to the worker.
Vite projects must install and configure this plugin to set up Monaco workers for GraphiQL 5.
Deprecations 9
This hook is deprecated.
This hook is deprecated.
This hook is deprecated; use useDocExplorer and useDocExplorerActions instead.
This hook is deprecated; use useHistory and useHistoryActions instead.
This hook is deprecated.
This hook is deprecated.
This hook is deprecated.
This hook is deprecated.
This hook is deprecated.
New APIs and options 11
Enables opt-in GraphQL 17 fragment argument syntax support across parsing, validation, type information, autocomplete, hover, and editor integrations; it defaults to false.
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.
The component now allows children of type ReactNode.
Sets the query for the first tab; newly opened tabs start with an empty operation editor.
A new hook is provided as an alternative to useExplorerContext.
A new hook is provided as an alternative to useExplorerContext.
A new hook is provided as an alternative to the deprecated GraphiQL context hooks.
A new hook is provided as an alternative to the deprecated GraphiQL context hooks.
A new hook is provided as an alternative to useHistoryContext.
A new hook is provided as an alternative to useHistoryContext.
The Variables and Headers editors now support comments.
Behavior and default changes 2
Passing IntrospectionQuery data as the schema prop now builds a schema directly and skips a network introspection request.
Set this prop to null to remove the default Doc Explorer plugin; custom Doc Explorers belong here and render first.
Tooling 1
GraphiQL 5 is powered by the latest version of the Monaco editor.
Fixes and other changes 5
Autocomplete now respects operation and fragment scope while including variables from operations that spread the current fragment.
CSS files are marked as side effects so Webpack can import CSS in JavaScript.
An empty string now results in an empty default query; a configured default query is only used for the first tab.
The operation editor shortcut now runs even when there are no operations in the editor.
The last opened plugin is saved in storage.
graphiql 420 changes
Breaking changes 13
The default export was removed; import GraphiQL as a named export instead.
The disableTabs option was removed.
CommonJS build output was dropped; builds are now ESM only.
The CDN stylesheet path changed to graphiql/dist/style.css.
The stylesheet import changed to @graphiql/plugin-code-exporter/style.css.
The stylesheet import changed to @graphiql/plugin-explorer/style.css.
The stylesheet import changed to @graphiql/react/style.css.
The stylesheet import changed from graphiql/graphiql.css to graphiql/style.css.
Single newlines are ignored when handling Markdown.
Support for React 16 and 17 was dropped, and support for React 19 was added.
Tabs are always visible, including when there is only one.
Replace toolbar.additionalComponent with the GraphiQL.Toolbar component to add a component to the toolbar.
Replace toolbar.additionalContent with the GraphiQL.Toolbar component to add toolbar content.
Deprecations 4
The UMD CDN script path changed to graphiql/dist/index.umd.js; the new UMD path is deprecated.
The UMD CDN build is deprecated; switch to the ESM CDN.
The code exporter UMD build is deprecated; migrate to the ESM-based CDN.
The explorer UMD build is deprecated; migrate to the ESM-based CDN.
New APIs and options 2
The toolbar component lets developers customize toolbar content and reorder or remove default buttons.
A callback was added to support custom query formatting.
Behavior and default changes 1
Tabs tooltips now use the HTML title attribute.
graphiql 31 changes
Breaking changes 1
initialTabs was removed; use defaultTabs instead.
graphiql 248 changes
Breaking changes 46
Replaces defaultVariableEditorOpen and defaultSecondaryEditorOpen; controls editor tool visibility, with a default that shows tools when a secondary editor has contents.
Merged with defaultVariableEditorOpen into defaultEditorToolsVisibility.
Merged with defaultSecondaryEditorOpen into defaultEditorToolsVisibility.
Removed from graphiql and now exported from @graphiql/react; its schema prop is removed and it uses the schema from ExplorerContext.
Removed and replaced by visiblePlugin for controlling which plugin is visible.
Removed from graphiql and now exported from @graphiql/toolkit.
Removed from graphiql and now exported from @graphiql/toolkit.
Removed from graphiql and now exported from @graphiql/toolkit.
Removed from graphiql and now exported from @graphiql/toolkit.
Removed from graphiql and now exported from @graphiql/toolkit.
Removed from graphiql and now exported from @graphiql/toolkit.
Removed from graphiql and now exported from @graphiql/toolkit.
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.
The UI has a new design with changed DOM structure and class names, which may affect custom GraphQL IDEs that rely on those internals.
Removed from GraphiQL; use ToolbarButton from @graphiql/react instead.
Removed from GraphiQL; use formatError from @graphiql/toolkit instead.
Removed from GraphiQL; use formatResult from @graphiql/toolkit instead.
Grouping buttons side-by-side is no longer provided out of the box; custom toolbar styles can implement a similar feature.
Removed from GraphiQL; use HeaderEditor from @graphiql/react instead.
Removed from GraphiQL; use ToolbarMenu from @graphiql/react instead.
Removed from GraphiQL; use ToolbarMenu.Item from @graphiql/react instead.
Removed from GraphiQL; use QueryEditor from @graphiql/react instead.
Removed from GraphiQL; use ResponseEditor from @graphiql/react instead.
Removed; it exposed the same component as GraphiQL.Button.
Removed from GraphiQL; use VariableEditor from @graphiql/react instead.
Renamed to isHeadersEditorEnabled.
Replaces the headerEditorEnabled prop.
Removed from graphiql and now exported from @graphiql/toolkit.
Removed from graphiql and now exported from @graphiql/toolkit.
Removed from graphiql and now exported from @graphiql/react.
Replaces tabs for receiving tab change callbacks; tabs are now always enabled.
Removed and replaced by onTogglePluginVisibility.
Removed and replaced by onTogglePluginVisibility.
Removed from graphiql and now exported from @graphiql/react.
Replaces the ResultsTooltip prop.
Renamed to responseTooltip.
Removed from graphiql and now exported from @graphiql/toolkit.
Removed from graphiql and now exported from @graphiql/toolkit.
Tabs are always enabled; the tabs prop is replaced by onTabChange.
Removed from graphiql and now exported from @graphiql/react.
Removed from graphiql; use ToolbarMenu.Item from @graphiql/react.
Removed from graphiql; ToolbarListbox is exported from @graphiql/react instead.
Removed from graphiql; ToolbarListbox.Option is exported from @graphiql/react instead.
Removed from graphiql and now exported from @graphiql/react.
New generic prop for controlling which plugin is visible.
The GraphiQL component no longer sets window.g.
New APIs and options 2
GraphiQL now ships with a dark theme, respects system settings by default, and allows an explicit theme choice via the settings dialog.
New callback called each time the visibility of any plugin changes.
graphiql 11 changes
Fixes and other changes 1
Fixed server-side rendering by using a type-only CodeMirror import.