-
Notifications
You must be signed in to change notification settings - Fork 60
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.
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
graphiql v3 blog #1308
base: master
Are you sure you want to change the base?
graphiql v3 blog #1308
Changes from all commits
fb0f1df
512924e
f56a050
4076cfe
b024e13
e14b896
9686cee
7d3d123
ffa7e0e
7b7c9d4
823f286
e4e04f6
e8f1896
3107105
aa44ee4
96128af
9ea9a4b
ad1f7e0
f1f0f2a
3535ba6
caf8616
a7f4196
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,212 @@ | ||||||
--- | ||||||
title: GraphiQL 3 Is Here and GraphiQL 4 Is Coming | ||||||
tags: [graphql, react, graphiql] | ||||||
Check failure on line 3 in website/pages/blog/graphiql-3/index.mdx
|
||||||
authors: dimitri | ||||||
date: 2023-07-01 | ||||||
description: GraphiQL 3 was released, here is what was changed and what will be in GraphiQL 4. | ||||||
Check warning on line 6 in website/pages/blog/graphiql-3/index.mdx
|
||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same here, more information about the content |
||||||
image: /blog-assets/graphiql-3/cover.png | ||||||
Check failure on line 7 in website/pages/blog/graphiql-3/index.mdx
|
||||||
thumbnail: /blog-assets/graphiql-3/thumbnail.png | ||||||
Check failure on line 8 in website/pages/blog/graphiql-3/index.mdx
|
||||||
--- | ||||||
|
||||||
import { Anchor } from '@theguild/components' | ||||||
|
||||||
## Intro | ||||||
|
||||||
10 months ago | ||||||
[GraphiQL 2 was released](https://github.com/graphql/graphiql/releases/tag/graphiql%402.0.0) with a | ||||||
Check warning on line 16 in website/pages/blog/graphiql-3/index.mdx
|
||||||
completely new design and new components library named | ||||||
Check warning on line 17 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[`@graphiql/react`](https://github.com/graphql/graphiql/tree/main/packages/graphiql-react). | ||||||
Check failure on line 18 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
Unfortunately previously planned in the [roadmap](https://github.com/graphql/graphiql/issues/2328) | ||||||
Check warning on line 20 in website/pages/blog/graphiql-3/index.mdx
|
||||||
most-waited features as integration [monaco-editor](https://github.com/microsoft/monaco-editor) 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 | ||||||
Check warning on line 24 in website/pages/blog/graphiql-3/index.mdx
|
||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would make it a bit nicer maybe |
||||||
community. | ||||||
|
||||||
<Callout type="info"> | ||||||
**About me:** I am Dimitri POSTOLOV, software engineer from The Guild. You may know me as a | ||||||
Check failure on line 28 in website/pages/blog/graphiql-3/index.mdx
|
||||||
maintainer of [GraphQL-ESLint](https://the-guild.dev/graphql/eslint/docs) and | ||||||
Check failure on line 29 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[Nextra](https://nextra.site). | ||||||
</Callout> | ||||||
|
||||||
## 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 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. maybe add something like that you need good tools and order for good long term maintenance, which is what The Guild is known for |
||||||
output contained a lot of warnings. The below comment from some issue is a perfect allegory that | ||||||
names it `flashing like a Christmas tree` 😅. | ||||||
|
||||||
{/* prettier-ignore */} | ||||||
<Anchor | ||||||
href="https://github.com/graphql/graphiql/issues/2169#issue-1139208125" className="mt-6 block" | ||||||
Check failure on line 43 in website/pages/blog/graphiql-3/index.mdx
|
||||||
>![Comment of weird developer experience with a lot of warnings in ESLint | ||||||
output](./img_1.png)</Anchor> | ||||||
|
||||||
So I proposed to extend various ESLint plugins' `recommended` configs. | ||||||
Check failure on line 47 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
{/* prettier-ignore */} | ||||||
<Anchor | ||||||
href="https://github.com/graphql/graphiql/issues/2894#issue-1445996198" className="mt-6 block" | ||||||
Check failure on line 51 in website/pages/blog/graphiql-3/index.mdx
|
||||||
>![Comment on my proposal of improving ESLint config](./img.png)</Anchor> | ||||||
|
||||||
### Replacing Deprecated Reach UI ⚠️ | ||||||
|
||||||
GraphiQL 2 was released with [Reach UI](https://reach.tech) unstyled a11y-first components library. | ||||||
Check warning on line 56 in website/pages/blog/graphiql-3/index.mdx
|
||||||
Unfortunately, after some months of releasing GraphiQL 2, Reach UI was marked as deprecated, no | ||||||
Check warning on line 57 in website/pages/blog/graphiql-3/index.mdx
|
||||||
longer maintained and still doesn't have the official support of React 18. So community started to | ||||||
Check failure on line 58 in website/pages/blog/graphiql-3/index.mdx
|
||||||
receive warnings while installing GraphiQL 2. | ||||||
|
||||||
```ansi filename="Terminal" copy=false | ||||||
├─┬ graphiql [0;30m2.4.7[0m | ||||||
Check failure on line 62 in website/pages/blog/graphiql-3/index.mdx
|
||||||
│ └─┬ @graphiql/react [0;30m0.17.6[0m | ||||||
Check failure on line 63 in website/pages/blog/graphiql-3/index.mdx
|
||||||
│ ├─┬ @reach/combobox [0;30m0.17.0[0m | ||||||
│ │ ├── [0;31m✕ unmet peer[0m react@"^16.8.0 || 17.x": found 18.2.0 | ||||||
│ │ ├── [0;31m✕ unmet peer[0m react-dom@"^16.8.0 || 17.x": found 18.2.0 | ||||||
│ │ ├─┬ @reach/auto-id [0;98m0.17.0[0m | ||||||
│ │ │ ├── [0;31m✕ unmet peer[0m react@"^16.8.0 || 17.x": found 18.2.0 | ||||||
│ │ │ ├── [0;31m✕ unmet peer[0m react-dom@"^16.8.0 || 17.x": found 18.2.0 | ||||||
│ │ │ └─┬ @reach/utils [0;98m0.17.0[0m | ||||||
│ │ │ ├── [0;31m✕ unmet peer[0m react@"^16.8.0 || 17.x": found 18.2.0 | ||||||
│ │ │ └── [0;31m✕ unmet peer[0m react-dom@"^16.8.0 || 17.x": found 18.2.0 | ||||||
│ │ ├─┬ @reach/descendants [0;98m0.17.0[0m | ||||||
│ │ │ ├── [0;31m✕ unmet peer[0m react@"^16.8.0 || 17.x": found 18.2.0 | ||||||
│ │ │ └── [0;31m✕ unmet peer[0m react-dom@"^16.8.0 || 17.x": found 18.2.0 | ||||||
|
||||||
...a long list of warnings | ||||||
``` | ||||||
|
||||||
### Deep Dive into GraphiQL 🌊 | ||||||
Check warning on line 80 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
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: | ||||||
Check warning on line 86 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
1. Updated Cypress to v12 from v4 [#2893](https://github.com/graphql/graphiql/pull/2893). | ||||||
Check failure on line 88 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
1. Avoid unnecessary renders component's tree with | ||||||
[`eslint-plugin-react-usememo`](https://github.com/arthurgeron/eslint-plugin-react-usememo) | ||||||
Check failure on line 91 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[#3124](https://github.com/graphql/graphiql/pull/3124). | ||||||
Check failure on line 92 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
1. Updated all examples to use React 18 [#3185](https://github.com/graphql/graphiql/pull/3185). | ||||||
Check failure on line 94 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
1. Excluded `"dependencies"` from bundle for `@graphiql/react`, `@graphiql/plugin-explorer` and | ||||||
Check failure on line 96 in website/pages/blog/graphiql-3/index.mdx
|
||||||
`@graphiql/plugin-code-exporter` [#3229](https://github.com/graphql/graphiql/pull/3228) and | ||||||
Check failure on line 97 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[PR](https://github.com/graphql/graphiql/pull/3229). | ||||||
Check failure on line 98 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
1. Removed unnecessary `<div />` wrappers [#3235](https://github.com/graphql/graphiql/pull/3235). | ||||||
Check failure on line 100 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
1. Simplified Next.js and Vite examples with `monaco-graphql` | ||||||
Check failure on line 102 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[#3140](https://github.com/graphql/graphiql/pull/3140) and | ||||||
Check failure on line 103 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[#3281](https://github.com/graphql/graphiql/pull/3281). | ||||||
Check failure on line 104 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
1. And | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would add here a number of over 150 PRs |
||||||
[more...](https://github.com/graphql/graphiql/pulls?q=is%3Apr+sort%3Aupdated-desc+author%3AB2o5T+is%3Aclosed) | ||||||
Check failure on line 107 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
## GraphiQL 3 | ||||||
|
||||||
Integration of `monaco-editor` and `monaco-graphql` always was a top priority, since I started | ||||||
Check failure on line 111 in website/pages/blog/graphiql-3/index.mdx
|
||||||
maintaining this monorepo, but to achieve it, a stable release should be released first ☝️. | ||||||
Check warning on line 112 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
So I decided to propose to release GraphiQL 3 without Reach UI and replace him with maintained | ||||||
Check failure on line 114 in website/pages/blog/graphiql-3/index.mdx
|
||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
libraries [Radix](https://radix-ui.com) and [Headless UI](https://headlessui.com) and to make | ||||||
another major release with `monaco-editor` bumped as GraphiQL 4. | ||||||
|
||||||
| Version | What is inside | | ||||||
| :-----------: | :---------------------------------: | | ||||||
| GraphiQL 2 | CodeMirror / Reach UI | | ||||||
| GraphiQL 3 | CodeMirror / Radix / Headless UI | | ||||||
| GraphiQL 4 🔜 | Monaco-Editor / Radix / Headless UI | | ||||||
Check failure on line 122 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
<p className="mt-3 text-center italic">Table of comparison versions of GraphiQL</p> | ||||||
|
||||||
With all the above changes I also included a tab reorders feature: | ||||||
|
||||||
![Reorder tabs feature](./reorder-tabs.gif) | ||||||
|
||||||
{/* prettier-ignore */} | ||||||
<p className="mt-3 text-center italic">Tab reorders made by | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would move that to the previous sentence, something like In v3 I've also included the tab reorders feature made by @mylesmmurphy |
||||||
[@mylesmmurphy](https://github.com/mylesmmurphy) | ||||||
[#3111](https://github.com/graphql/graphiql/pull/3111)</p> | ||||||
Check failure on line 133 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
Try GraphiQL 3 by installing it with your favourite package manager: | ||||||
|
||||||
```sh npm2yarn | ||||||
npm i graphql@3 | ||||||
Check failure on line 138 in website/pages/blog/graphiql-3/index.mdx
|
||||||
``` | ||||||
|
||||||
## GraphiQL 4 🔜 | ||||||
|
||||||
14 months ago the initial issue was created on the integration `monaco-editor` in GraphiQL. | ||||||
Check warning on line 143 in website/pages/blog/graphiql-3/index.mdx
|
||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think originally the talk about monaco was many years earlier even |
||||||
|
||||||
{/* prettier-ignore */} | ||||||
<Anchor | ||||||
href="https://github.com/graphql/graphiql/issues/2326#issue-1208525253" className="mt-6 block" | ||||||
Check failure on line 147 in website/pages/blog/graphiql-3/index.mdx
|
||||||
>![Initial comment on integration of monaco-editor in GraphiQL](./img_4.png)</Anchor> | ||||||
|
||||||
but no real progress in GraphiQL was made (except | ||||||
Check warning on line 150 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[`graphiql-prototype`](https://github.com/jonathanawesome/graphiql-prototype) by | ||||||
Check failure on line 151 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[@jonathanawesome](https://github.com/jonathanawesome)). | ||||||
|
||||||
<Callout type="warning"> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would phrase it a bit different and less offensive |
||||||
**Note:** I call it `no real progress` because `graphql-prototype` was prototype written from | ||||||
Check failure on line 155 in website/pages/blog/graphiql-3/index.mdx
|
||||||
scratch that doesn't integrate into the current GraphiQL monorepo. | ||||||
</Callout> | ||||||
|
||||||
<Anchor | ||||||
href="https://github.com/graphql/graphiql/issues/2326#issuecomment-1385847481" | ||||||
Check failure on line 160 in website/pages/blog/graphiql-3/index.mdx
|
||||||
className="mt-6 block" | ||||||
> | ||||||
![Comment of no progress on integrating monaco in GraphiQL by @jonathanawesome](./img_2.png) | ||||||
</Anchor> | ||||||
|
||||||
I already started on such difficult integration, here my initial PR | ||||||
[#3234](https://github.com/graphql/graphiql/pull/3234), or you can try it in the following | ||||||
Check failure on line 167 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[preview URL](https://deploy-preview-3234--graphiql-test.netlify.app) (the alpha version will be | ||||||
Check failure on line 168 in website/pages/blog/graphiql-3/index.mdx
|
||||||
available soon too). | ||||||
|
||||||
{/* prettier-ignore */} | ||||||
<Anchor href="https://deploy-preview-3234--graphiql-test.netlify.app" className="mt-6 block">![GraphiQL | ||||||
Check failure on line 172 in website/pages/blog/graphiql-3/index.mdx
|
||||||
4 Preview](./img_3.png)</Anchor> | ||||||
|
||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. here is the current high level roadmap we have for GraphiQL, please comment and let us know what you think is missing: |
||||||
### Roadmap | ||||||
|
||||||
- [x] Avoid loading unused languages in `monaco-editor` | ||||||
[#3285](https://github.com/graphql/graphiql/pull/3285) | ||||||
Check failure on line 178 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
- [x] **(WIP)** Integrate `monaco-editor`/`monaco-graphql` | ||||||
Check failure on line 180 in website/pages/blog/graphiql-3/index.mdx
|
||||||
[#3234](https://github.com/graphql/graphiql/pull/3234) | ||||||
Check failure on line 181 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
- [ ] JSONC comments in variables / headers editors | ||||||
[#780](https://github.com/graphql/graphiql/issues/780) | ||||||
Check failure on line 184 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
- [ ] Migrate to pnpm & turbo [#3058](https://github.com/graphql/graphiql/issues/3058) | ||||||
Check failure on line 186 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
- [ ] New docs explorer aka Query builder [#2327](https://github.com/graphql/graphiql/issues/2327) | ||||||
Check failure on line 188 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
- [ ] GraphiQL website [#3059](https://github.com/graphql/graphiql/issues/3059) | ||||||
Check failure on line 190 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
- [ ] GraphQL-ESLint plugin [#3057](https://github.com/graphql/graphiql/issues/3057) | ||||||
Check failure on line 192 in website/pages/blog/graphiql-3/index.mdx
|
||||||
|
||||||
## Conclusion | ||||||
|
||||||
I hope you learned of the current state of GraphiQL and what is coming. Follow me on | ||||||
[GitHub](https://github.com/B2o5T) and [Twitter](https://twitter.com/B2o5T), see you soon 👋! | ||||||
|
||||||
<style jsx global>{` | ||||||
.nextra-content h3, | ||||||
.nextra-toc li a { | ||||||
font-family: 'Text Font', 'Custom Glyphs Font', sans-serif; | ||||||
} | ||||||
.nextra-content table { | ||||||
display: table; | ||||||
margin-left: auto; | ||||||
margin-right: auto; | ||||||
} | ||||||
.contains-task-list { | ||||||
margin-top: 1.5rem; | ||||||
} | ||||||
`}</style> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would change the title to something that also gives information about the content
maybe like "GraphiQL v3 is here - React 18, better codebase, balblabla, and you can try v4 alpha with Monaco editor!"