GraphiQL 3 Is Here and GraphiQL 4 Is Coming

Intro

10 months ago GraphiQL 2 was released (opens in a new tab) with a completely new design and new components library named @graphiql/react (opens in a new tab).

Unfortunately previously planned in the roadmap (opens in a new tab) most-waited features as integration monaco-editor (opens in a new tab) and new docs explorer (aka Query Builder) were not introduced.

After months and months, no progress was made, and I was called to join forces and help the community.

How I Started Maintaining Library

Put Out the Lights on the Christmas Tree 🎄

When I started to maintain GraphiQL the first thing first was ESLint improvements, because ESLint output contained a lot of warnings. The below comment from some issue is a perfect allegory that names it flashing like a Christmas tree 😅.

So I proposed to extend various ESLint plugins' recommended configs.

Replacing Deprecated Reach UI ⚠️

GraphiQL 2 was released with Reach UI (opens in a new tab) unstyled a11y-first components library. Unfortunately, after some months of releasing GraphiQL 2, Reach UI was marked as deprecated, no longer maintained and still doesn't have the official support of React 18. So community started to receive warnings while installing GraphiQL 2.

├─┬ graphiql 2.4.7
│ └─┬ @graphiql/react 0.17.6
│   ├─┬ @reach/combobox 0.17.0
│   │ ├── ✕ unmet peer react@"^16.8.0 || 17.x": found 18.2.0
│   │ ├── ✕ unmet peer react-dom@"^16.8.0 || 17.x": found 18.2.0
│   │ ├─┬ @reach/auto-id 0.17.0
│   │ │ ├── ✕ unmet peer react@"^16.8.0 || 17.x": found 18.2.0
│   │ │ ├── ✕ unmet peer react-dom@"^16.8.0 || 17.x": found 18.2.0
│   │ │ └─┬ @reach/utils 0.17.0
│   │ │   ├── ✕ unmet peer react@"^16.8.0 || 17.x": found 18.2.0
│   │ │   └── ✕ unmet peer react-dom@"^16.8.0 || 17.x": found 18.2.0
│   │ ├─┬ @reach/descendants 0.17.0
│   │ │ ├── ✕ unmet peer react@"^16.8.0 || 17.x": found 18.2.0
│   │ │ └── ✕ unmet peer react-dom@"^16.8.0 || 17.x": found 18.2.0
 
...a long list of warnings

Deep Dive into GraphiQL 🌊

When I come to a new project I always start by reading most of each file in the codebase, trying to improve something, by enabling new ESLint rules or without.

Then trying to reproduce active issues and fix them, note some things that I can improve in the project in general. Below is a list of various improvements that were made by me:

1. Updated Cypress to v12 from v4 #2893 (opens in a new tab).

2. Avoid unnecessary renders component's tree with eslint-plugin-react-usememo (opens in a new tab) #3124 (opens in a new tab).

3. Updated all examples to use React 18 #3185 (opens in a new tab).

4. Excluded "dependencies" from bundle for @graphiql/react, @graphiql/plugin-explorer and @graphiql/plugin-code-exporter #3229 (opens in a new tab) and PR (opens in a new tab).

5. Removed unnecessary <div /> wrappers #3235 (opens in a new tab).

6. Simplified Next.js and Vite examples with monaco-graphql #3140 (opens in a new tab) and #3281 (opens in a new tab).

7. And more... (opens in a new tab)

GraphiQL 3

Integration of monaco-editor and monaco-graphql always was a top priority, since I started maintaining this monorepo, but to achieve it, a stable release should be released first ☝️.

So I decided to propose to release GraphiQL 3 without Reach UI and replace him with maintained libraries Radix (opens in a new tab) and Headless UI (opens in a new tab) and to make another major release with monaco-editor bumped as GraphiQL 4.

Table of comparison versions of GraphiQL

With all the above changes I also included a tab reorders feature:

Tab reorders made by @mylesmmurphy (opens in a new tab) #3111 (opens in a new tab)

Try GraphiQL 3 by installing it with your favourite package manager:

pnpm add graphql@3

GraphiQL 4 🔜

14 months ago the initial issue was created on the integration monaco-editor in GraphiQL.

but no real progress in GraphiQL was made (except graphiql-prototype (opens in a new tab) by @jonathanawesome (opens in a new tab)).

I already started on such difficult integration, here my initial PR #3234 (opens in a new tab), or you can try it in the following preview URL (opens in a new tab) (the alpha version will be available soon too).

Roadmap

• Avoid loading unused languages in monaco-editor #3285 (opens in a new tab)

• (WIP) Integrate monaco-editor/monaco-graphql #3234 (opens in a new tab)

• JSONC comments in variables / headers editors #780 (opens in a new tab)

• Migrate to pnpm & turbo #3058 (opens in a new tab)

• New docs explorer aka Query builder #2327 (opens in a new tab)

• GraphiQL website #3059 (opens in a new tab)

• GraphQL-ESLint plugin #3057 (opens in a new tab)

Conclusion

I hope you learned of the current state of GraphiQL and what is coming. Follow me on GitHub (opens in a new tab) and Twitter (opens in a new tab), see you soon 👋!

Similar articles

The complete GraphQL Scalar Guide

Knowing how native and custom GraphQL Scalar works enables building flexible and extendable GraphQL schema.

Eddy Nguyen • Jun 27th 2023

Build a GraphQL server running on Cloudflare Workers.

This course aims to build a practical GraphQL server on Cloudflare Workers using GraphQL Yoga, Pothos, Kysely, etc.

Rito Tamata • May 31st 2023

Using @defer Directive with GraphQL Code Generator

Learn how to boost GraphQL performance using the @defer directive and GraphQL Code Generator for deferred fragment field resolution.

Aleksandra Sikora • May 24th 2023

Introducing Schema Policy in Hive

New GraphQL-Hive feature for enfocring best-practices and schema-design styles.

Dotan Simha • May 16th 2023