v6: Retire the composable GraphiQL.Toolbar and GraphiQL.Logo slots#4425
Merged
Conversation
TopBar currently hardcodes the GraphQL hexagon icon and "GraphiQL" wordmark. Add an optional `brand` prop (any `ReactNode`) that renders in its place, defaulting to the existing icon + wordmark when unset. This is the replacement branding slot for the `GraphiQL.Logo` removal that follows.
Both slots are vestigial after the v6 redesign: the tab strip's prettify/merge/copy/save actions already cover the toolbar's default buttons, and branding now lives in the top bar. `GraphiQL.Toolbar` is gone outright with no deprecation period; use a plugin's `sessionActions` instead. `GraphiQL.Logo` is gone now that `<TopBar>` takes a `brand` prop for custom branding. `GraphiQL.Footer` is untouched. Also drops the now-dead `toolbar.additionalContent` / `toolbar.additionalComponent` `TypeError` guards, since they pointed embedders at the component being removed here, and the `.graphiql-toolbar` / `.graphiql-logo` CSS that only those slots used. Breaking change, major changeset included.
Add a "Removed GraphiQL.Toolbar and GraphiQL.Logo" section with before/after snippets for both replacements (plugin sessionActions, TopBar brand prop), and update the overview/contents to mention it alongside the removed-hooks breaking change.
Replace `<GraphiQL.Logo>` with the `brand` prop and rebuild the custom share-query button as a plugin with `sessionActions`, alongside the default history/query-builder/collections plugins it implicitly had before.
🦋 Changeset detectedLatest commit: 17c786e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
trevor-scheer
marked this pull request as ready for review
July 13, 2026 02:59
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
1 participant
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.
Summary
GraphiQL.ToolbarandGraphiQL.Logoslots. v6: Remove the legacy editor toolbar and corner logo #4398 already stopped rendering their v5 defaults, leaving them in an awkward half-fit spot with nowhere natural left to render; this finishes the job by removing the slots themselves.GraphiQL.Toolbaris a straight removal, no deprecation period first. Custom editor actions belong on a plugin'ssessionActionsnow, rendered into the tab strip alongside Prettify/Merge/Copy/Save.GraphiQL.Logois removed now that<TopBar>takes a newbrandprop (anyReactNode), which is also exposed straight off<GraphiQL>. It replaces the default hexagon icon + "GraphiQL" wordmark; leave it unset to keep the default.GraphiQL.Footeris untouched.toolbar.additionalContent/toolbar.additionalComponentTypeErrorguards, since they pointed at the component being removed here, and the.graphiql-toolbar/.graphiql-logoCSS those slots used.graphiql-vite-react-routerexample off both slots.Builds on #4398.
Test plan
<GraphiQL>with no extra props. The top bar shows the default hexagon icon and "GraphiQL" wordmark.<GraphiQL brand="My Company">. The top bar shows "My Company" instead, and the default wordmark is gone.GraphiQL.Toolbar/GraphiQL.Logoslots are gone: referencing<GraphiQL.Toolbar>or<GraphiQL.Logo>as JSX children is now a TypeScript error, and there's no runtime path that renders them.sessionActionscomponent and confirm it renders in the tab strip alongside the built-in actions.<GraphiQL.Footer>still renders below the response, unchanged.graphiql-vite-react-routerexample and confirm the branding shows "API Explorer" and the share-query button still works from the tab strip.Refs: #4228 (builds on #4398)