fix(graphiql): migrate to v5 via esm.sh CDN#8209
Merged
Merged
Conversation
GraphiQL 5 + React 19 dropped UMD bundles. Move to browser-native
ESM via importmap pointing at esm.sh, mirroring the upstream
`graphiql-cdn` example.
- update-js.sh: stop bundling graphiql/react/polyfills, only ship
fonts + swagger-ui + redoc
- Graphiql twig + blade: importmap + type=module loader
- init-graphiql.js (Symfony + Laravel): ESM rewrite with
createGraphiQLFetcher, createRoot, setup-workers/esm.sh
- remove tracked public/{es6-promise,fetch,graphiql,react}/
Live URL sync on edit is regressed; init from URL still works.
Follow-up restores it via store subscription.
Restore the pre-v5 behavior where editing the query, variables or operation name updates the URL bar. v5 dropped `onEditQuery` / `onEditVariables` props but exposes `onTabChange(tabState)`, which fires on any active-tab content edit and carries the latest query, variables, headers and operationName. Reads from URL on first render already worked; only the live write- back was missing.
soyuka
changed the title
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
<script src=…/graphiql.min.js>pattern no longer works<script type="importmap">pointing at esm.sh, mirroring the upstreamgraphiql-cdnexamplereact/,graphiql/,es6-promise/,fetch/public assets (no longer needed)update-js.shnow only ships@fontsource/open-sans,swagger-uiandredoc(the ones that still distribute usable single-file bundles)Pins match upstream's
graphiql-cdnexample exactly:graphiql@5.2.2,@graphiql/react@0.37.3,@graphiql/toolkit@0.11.3react@19.2.5,react-dom@19.2.5,graphql@16.13.2Newer combos (graphiql 5.2.3 + @graphiql/react 0.37.5 + react 19.2.6) trigger a
Cannot set tokens provider for unknown language jsonmodule-load-order regression on esm.sh; staying on the pins the upstream example actually ships with.Trade-off
The GraphiQL page now needs network access to
esm.shat runtime. There is no local bundler (no esbuild/rollup) in the repo. This matches what the GraphiQL team officially recommends for v5 in their README and thegraphiql-cdnexample. If a fully self-hosted bundle is needed later, that's a separate change requiring a bundler.URL state
?query=…&variables=…&operationName=…is honored on first render, and editing the active tab writes the latest values back to the URL viaonTabChange(v5 dropped the per-editoronEdit*props, so the sync goes through the tab-state callback instead).Test plan
update-js.shruns clean (no missing files)symfony server:start --dir tests/Fixtures/app/) → https://127.0.0.1:8000/graphql/graphiql renders without console errors after a localStorage clear/graphqlintrospection POST returns the schema?query=…&variables=…honored on load, edits sync back to URL bar