GraphiQL 4.1 Announcement blog post (#2007)

* graphiql 4.1 blog

* apply Benjie suggestion

* more Benjie suggestion

* Update index.mdx

* correct date

Author: dimaMachina

.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

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**
+
+<Callout type="info">
+  For the full roadmap, check out the [tracking issue on
+  GitHub](https://github.com/graphql/graphiql/issues/3874).
+</Callout>
+
+## 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!