diff --git a/.prettierignore b/.prettierignore index 349451b74c..ebb39d2d73 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,4 +4,5 @@ pnpm-lock.yaml !src/pages/blog/2024-04-11-announcing-new-graphql-website/index.mdx !src/pages/blog/2024-08-15-graphql-local-initiative.mdx !src/pages/community/foundation/community-grant.mdx +!src/pages/blog/2025-06-01-graphiql-4/index.mdx *.jpg diff --git a/src/pages/blog/2025-05-31-graphiql-4/index.mdx b/src/pages/blog/2025-05-31-graphiql-4/index.mdx new file mode 100644 index 0000000000..ed8fd77d7f --- /dev/null +++ b/src/pages/blog/2025-05-31-graphiql-4/index.mdx @@ -0,0 +1,100 @@ +--- +title: GraphiQL 4.1 is Released +tags: [announcements, grants] +date: 2025-05-31 +byline: Dimitri Postolov +--- + +import { Callout } from "nextra/components" + +I'm thrilled to announce the release of **GraphiQL 4.1**! 🎉 + +Thanks to funding from the **GraphQL Foundation**, I'm working on migrating +GraphiQL to the Monaco code editor — a long-awaited update that's been on our +roadmap for years. + +> In fact, the [original issue](https://github.com/graphql/graphiql/issues/2326) +> was opened over **three years ago**! + +## Roadmap + +Migrating to the Monaco editor is a major milestone, and to ensure a smooth +transition for everyone, I've broken it down into several incremental releases: + +### GraphiQL 3.9 + +- Switched build system from Webpack to Vite +- Compiled the codebase using the new + [React Compiler](https://react.dev/learn/react-compiler) + +### GraphiQL 4 + +- Dropped support for React 16/17 +- Added support for React 19 +- Introduced a refreshed tabs UI +- New ESM-based CDN example +- Deprecated the legacy UMD CDN build + +### GraphiQL 4.1 _(This release)_ + +- Standalone Doc Explorer plugin +- Standalone History plugin +- Migrated state management from React context to + [zustand](https://zustand-demo.pmnd.rs) + +### GraphiQL 5 _(Coming Soon)_ + +- Migration from Codemirror to + [Monaco Editor](https://github.com/microsoft/monaco-editor) +- Replacing `codemirror-graphql` with + [`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql) +- Support for comments in **Variables** and **Headers** editors +- New examples: **GraphiQL x Vite** and **GraphiQL x Next.js** + + + For the full roadmap, check out the [tracking issue on + GitHub](https://github.com/graphql/graphiql/issues/3874). + + +## What's New + +GraphiQL 4 serves as a gateway to the upcoming GraphiQL 5, which will be powered +by the Monaco editor, the same editor used in VSCode. Upgrading to GraphiQL 4 is +an essential step if you're already using React 19. + +We've extracted **Doc Explorer** and **History** into standalone plugins, +allowing full customization of GraphiQL's built-in plugins in the **GraphiQL +5**. + +Under the hood, we've replaced React context with zustand, making the internal +state management simpler and more maintainable, and enabling faster iteration on +new features. + +### Time to Say Goodbye to UMD Builds! + +With React 19, +[UMD builds have been removed](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#umd-builds-removed). +The React team now recommends using ESM-based CDNs like +[esm.sh](https://esm.sh). + +We've updated the +[CDN example](https://github.com/graphql/graphiql/tree/main/examples/graphiql-cdn) +to show how to use GraphiQL with [esm.sh](https://esm.sh). + +### How to Update + +Follow the step-by-step guide in our +[GraphiQL 4 migration documentation](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md). + +## What's Next? + +The development of **GraphiQL 5** is almost complete! You can checkout the last +[Live Preview](https://deploy-preview-3234--graphiql-test.netlify.app). + +The official release is just around the corner — arriving later **this June**! + +## Stay Connected + +Follow me, **Dima Machina**, on [𝕏](https://x.com/dimaMachina_) and +[GitHub](https://github.com/dimaMachina) to stay up to date with the latest +updates!