Skip to content

GraphiQL 4.1 Announcement blog post #2007

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.

Sign up for GitHub

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 5 commits into from
May 31, 2025
Merged

GraphiQL 4.1 Announcement blog post #2007

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a153f57
graphiql 4.1 blog
dimaMachina May 30, 2025
fd5c688
apply Benjie suggestion
dimaMachina May 30, 2025
d767dc8
more Benjie suggestion
dimaMachina May 30, 2025
48bb90d
Update index.mdx
dimaMachina May 31, 2025
ba4a564
correct date
dimaMachina May 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
100 changes: 100 additions & 0 deletions src/pages/blog/2025-06-01-graphiql-4/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
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 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).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried a few queries and got errors:

{
  streamable {
    text
  }
}

produces error:

{
  "errors": [
    {
      "message": "Expected Iterable, but did not find one for field \"Test.streamable\".",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "streamable"
      ]
    }
  ],
  "data": {
    "streamable": null
  }
}

Similarly:

{
  person {
    name
    age
    friends {
      name
      age
    }
  }
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://discord.com/channels/625400653321076807/862957469155721236/1378406038382055474


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!