v6: fix broken migration guide examples and transport docs - #4432
Open
trevor-scheer wants to merge 4 commits into
Open
v6: fix broken migration guide examples and transport docs#4432trevor-scheer wants to merge 4 commits into
trevor-scheer wants to merge 4 commits into
Conversation
The useDocExplorer/useHistory "after" examples in the v6 migration guide passed a selector argument and destructured fields that don't exist on either hook - both take zero arguments and return the value directly, so copying the examples was a straight compile error. The graphiql and graphiql-react READMEs still described transport as "a function," which is the old Fetcher shape; it's an object with a send() method. Fixed that, pointed the createTransport link at the right file (it was linking to createFetcher.ts), and added a note that fetcher still works since neither README mentioned it. Rewrote the Editor Theme section in graphiql/README.md, which was describing a CodeMirror API that hasn't existed since the Monaco move, and while in there fixed another dead link to the migration guide in create-fetcher.md's deprecation banner. The toolkit README got a createTransport entry alongside createFetcher, and the v6 migration guide is now listed in graphiql/README.md's getting-started section. Also added the ExecuteButton removal note to the migration guide's breaking-changes list and reworded the browserslistrc line (the file still exists, only its contents changed).
|
trevor-scheer
marked this pull request as ready for review
August 7, 2026 03:52
trevor-scheer
commented
Aug 7, 2026
| - **Browserslist.** v6 replaces the project's custom `.browserslistrc` contents with the single `defaults` browserslist preset (`> 0.5%, last 2 versions, Firefox ESR, not dead`). That range covers the modern browsers that support the OKLCH color functions the new token system relies on. If your previous bespoke config deliberately targeted very old browsers, they may fall outside the new range — check `defaults` against your support matrix if that matters to you. | ||
| - **Monaco editor theme registration.** The built-in Monaco themes (`graphiql-DARK` and `graphiql-LIGHT`) were rewritten to use the v6 accent palette — every GraphQL token type (keywords, type names, field identifiers, variables, annotations, strings, numbers, comments) and the surrounding editor chrome (suggest widget, hover widget, quick input) now pull from the same tokens as the rest of the UI. The `editorTheme` prop on `<GraphiQL>` still takes the same `{ dark, light }` pair of Monaco theme names or definitions it always did, so a custom theme registered through that prop should continue to work unchanged. If you were depending on the specific color values baked into the previous built-in `graphiql-DARK` / `graphiql-LIGHT` themes (for a screenshot test, for example), expect those values to have shifted. | ||
| - **`cn` removed from `@graphiql/react`.** The `cn` helper was just a re-export of `clsx`. It's gone now, so import `clsx` directly from the `clsx` package instead. | ||
| - **`ExecuteButton` removed from `@graphiql/react`.** The Run button and its execution logic moved into the top bar; there's no longer a standalone `ExecuteButton` export to compose into a custom toolbar. |
Contributor
Author
There was a problem hiding this comment.
Fixing this, we'll keep exporting this button.
`ExecuteButton` is exported from `@graphiql/react` again, so the guide should not tell people to migrate off it.
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
A docs review cross-checked the migration guide and package READMEs against the actual
graphiql-6source and found several that describe APIs that no longer exist. The migration guide'suseDocExplorer/useHistory"after" examples pass a selector argument and destructure fields (.navStack,.items) that don't exist — both hooks take zero arguments and return the value directly, so copying the examples as written is a compile error. Thegraphiqlandgraphiql-reactREADMEs describetransportas "a function," which is the oldFetchershape; it's an object with asend()method. ThecreateTransportlink ingraphiql/README.mdpointed atcreateFetcher.ts, and neither README mentioned thatfetcherstill works. The "Editor Theme" section documented a CodeMirror API that hasn't existed since the Monaco rewrite. The toolkit's own README never mentionedcreateTransport, its biggest new export.create-fetcher.md's deprecation banner linked to acreate-transport.mdfile that doesn't exist, and (found while fixing that line) the migration-guide link right next to it was also pointing one directory too shallow.Also added the
ExecuteButtonremoval to the migration guide's breaking-changes notes, reworded the.browserslistrcline (the file still exists, only its contents changed todefaults), and added the v6 migration guide tographiql/README.md's getting-started list, which already linked to it later in the doc but didn't list it up top.Test plan
useDocExploreranduseHistory"after" examples from the migration guide into a scratch.tsxfile inside the repo and confirm they compile with no excess-argument or missing-field errors.graphiql/README.md, click thecreateTransportlink and confirm it lands oncreateTransport.ts, notcreateFetcher.ts.packages/graphiql-toolkit/docs/create-fetcher.md, click both links in the deprecation banner and confirm each resolves to a real file.packages/graphiql-toolkit/README.md, click the newcreateTransportlink and confirm it resolves.graphiql/README.mdand confirm theeditorThemeprop example matches what<GraphiQL>actually accepts (a{ dark, light }pair of Monaco theme names, not a CodeMirror theme string).packages/graphiql-toolkit/src/create-transport/README.mddoes not appear in this PR's diff.Refs: #4219