From a153f57d8028de90ca74b4d0731b4b03f549ae6e Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Fri, 30 May 2025 22:25:18 +0200 Subject: [PATCH 1/5] graphiql 4.1 blog --- .prettierignore | 1 + .../blog/2025-06-01-graphiql-4/index.mdx | 75 +++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 src/pages/blog/2025-06-01-graphiql-4/index.mdx 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-06-01-graphiql-4/index.mdx b/src/pages/blog/2025-06-01-graphiql-4/index.mdx new file mode 100644 index 0000000000..81b48c6b5b --- /dev/null +++ b/src/pages/blog/2025-06-01-graphiql-4/index.mdx @@ -0,0 +1,75 @@ +--- +title: GraphiQL 4.1 is Released +tags: [announcements, grants] +date: 2025-06-01 +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 examples +- 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). + + +## 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 already 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 month**! + +## 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! From fd5c688daebde43219cb9af45d7ed5a4d46b01d2 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Fri, 30 May 2025 22:44:01 +0200 Subject: [PATCH 2/5] apply Benjie suggestion --- src/pages/blog/2025-06-01-graphiql-4/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/blog/2025-06-01-graphiql-4/index.mdx b/src/pages/blog/2025-06-01-graphiql-4/index.mdx index 81b48c6b5b..ef27a16839 100644 --- a/src/pages/blog/2025-06-01-graphiql-4/index.mdx +++ b/src/pages/blog/2025-06-01-graphiql-4/index.mdx @@ -63,7 +63,7 @@ Follow the step-by-step guide in our ## What's Next? -The development of **GraphiQL 5** is already complete! You can checkout the last +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 month**! From d767dc82974860d1827a1a04e8addf1553095cdb Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Fri, 30 May 2025 23:22:12 +0200 Subject: [PATCH 3/5] more Benjie suggestion --- .../blog/2025-06-01-graphiql-4/index.mdx | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/pages/blog/2025-06-01-graphiql-4/index.mdx b/src/pages/blog/2025-06-01-graphiql-4/index.mdx index ef27a16839..03c80c0a7f 100644 --- a/src/pages/blog/2025-06-01-graphiql-4/index.mdx +++ b/src/pages/blog/2025-06-01-graphiql-4/index.mdx @@ -56,7 +56,32 @@ transition for everyone, I've broken it down into several incremental releases: GitHub](https://github.com/graphql/graphiql/issues/3874). -## How to Update +## 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). From 48bb90da9dcbe27fa03cd4fe30a39566dad2ff42 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 31 May 2025 15:32:22 +0200 Subject: [PATCH 4/5] Update index.mdx --- src/pages/blog/2025-06-01-graphiql-4/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/blog/2025-06-01-graphiql-4/index.mdx b/src/pages/blog/2025-06-01-graphiql-4/index.mdx index 03c80c0a7f..b121fc9a50 100644 --- a/src/pages/blog/2025-06-01-graphiql-4/index.mdx +++ b/src/pages/blog/2025-06-01-graphiql-4/index.mdx @@ -32,7 +32,7 @@ transition for everyone, I've broken it down into several incremental releases: - Dropped support for React 16/17 - Added support for React 19 - Introduced a refreshed tabs UI -- New ESM-based CDN examples +- New ESM-based CDN example - Deprecated the legacy UMD CDN build ### GraphiQL 4.1 _(This release)_ From ba4a5645fc1e2f4b145fffebc9f58e7cac56f549 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 31 May 2025 18:29:55 +0200 Subject: [PATCH 5/5] correct date --- .../index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename src/pages/blog/{2025-06-01-graphiql-4 => 2025-05-31-graphiql-4}/index.mdx (98%) diff --git a/src/pages/blog/2025-06-01-graphiql-4/index.mdx b/src/pages/blog/2025-05-31-graphiql-4/index.mdx similarity index 98% rename from src/pages/blog/2025-06-01-graphiql-4/index.mdx rename to src/pages/blog/2025-05-31-graphiql-4/index.mdx index b121fc9a50..ed8fd77d7f 100644 --- a/src/pages/blog/2025-06-01-graphiql-4/index.mdx +++ b/src/pages/blog/2025-05-31-graphiql-4/index.mdx @@ -1,7 +1,7 @@ --- title: GraphiQL 4.1 is Released tags: [announcements, grants] -date: 2025-06-01 +date: 2025-05-31 byline: Dimitri Postolov --- @@ -91,7 +91,7 @@ Follow the step-by-step guide in our 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 month**! +The official release is just around the corner — arriving later **this June**! ## Stay Connected