Skip to content

graphiql 5: reduce bundle size, import prettier dynamically to avoid bundling Prettier #4069

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 12, 2025

Conversation

dimaMachina
Copy link
Collaborator

we don't need prettier on initial loading, it's only used by clicking on format query button/shortcut

diff from vite example

-dist/assets/index-BMgFrxsd.js             4,911.53 kB │ gzip: 1,339.77 kB
+dist/assets/index-BlpzusGL.js             4,221.28 kB │ gzip: 1,145.58 kB

cc @benjie

Copy link

changeset-bot bot commented Jul 12, 2025

🦋 Changeset detected

Latest commit: ded6246

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@graphiql/react Patch
graphiql Patch

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

Copy link
Contributor

github-actions bot commented Jul 12, 2025

The latest changes of this PR are available as canary in npm (based on the declared changesets):

@dimaMachina dimaMachina merged commit 142f3f2 into main Jul 12, 2025
2 of 3 checks passed
@dimaMachina dimaMachina deleted the prettier-dynamically branch July 12, 2025 23:26
@acao acao mentioned this pull request Jul 12, 2025
@benjie
Copy link
Member

benjie commented Jul 13, 2025

I'm not sure that GraphiQL itself should even embed prettier? Seems easy to add in a wrapper and something that people may or may not want (and may want to customize the options of).

Happy to see the bundle size reduced though!

@dimaMachina
Copy link
Collaborator Author

@benjie graphql‑js' print + parse strips GraphQL comments, Prettier preserves them, and Prettier can also format comments when you’re editing JSONC, which JSON.parse can’t handle.

Apollo Studio formats comments too, both in the operation and variables editors.

So, dynamically loading Prettier seems ok?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants