Skip to content

GraphiQL v4 #3904

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

Merged
merged 7 commits into from
May 3, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 6 additions & 0 deletions .changeset/add-on-prettify-callback.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@graphiql/react": minor
"graphiql": minor
---

Add support for `onPrettifyQuery` callback to enable customised query formatting
12 changes: 12 additions & 0 deletions .changeset/breezy-chicken-crash.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
'@graphiql/plugin-code-exporter': major
---

`style.css` import was changed

## Migration

```diff
-import '@graphiql/plugin-code-exporter/dist/style.css';
+import '@graphiql/plugin-code-exporter/style.css';
```
8 changes: 8 additions & 0 deletions .changeset/chatty-spoons-accept.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@graphiql/plugin-code-exporter': minor
'@graphiql/plugin-explorer': minor
'@graphiql/react': minor
'graphiql': minor
---

Update GraphiQL CDN example using ESM-based CDN esm.sh
8 changes: 8 additions & 0 deletions .changeset/clean-lamps-bow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@graphiql/plugin-code-exporter': major
'@graphiql/plugin-explorer': major
'@graphiql/react': minor
'graphiql': major
---

drop commonjs build files
5 changes: 5 additions & 0 deletions .changeset/few-steaks-clap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': major
---

show tabs even there is only 1 tab
7 changes: 7 additions & 0 deletions .changeset/flat-lies-heal.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@graphiql/react': minor
'@graphiql/plugin-explorer': minor
'@graphiql/plugin-code-exporter': minor
---

generate types with `vite-plugin-dts`
19 changes: 19 additions & 0 deletions .changeset/gentle-bugs-mix.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
'graphiql': major
---

remove default export

## Migration

### Before

```jsx
import GraphiQL from 'graphiql'
```

### After

```jsx
import { GraphiQL } from 'graphiql'
```
10 changes: 10 additions & 0 deletions .changeset/gold-cooks-design.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
'@graphiql/plugin-code-exporter': major
'@graphiql/plugin-explorer': major
'@graphiql/react': minor
'graphiql': major
---

- support react 19, drop support react 16 and react 17
- replace deprecated `ReactDOM.unmountComponentAtNode()` and `ReactDOM.render()` with `root.unmount()` and `createRoot(container).render()`
- update `@radix-ui` and `@headlessui/react` dependencies
12 changes: 12 additions & 0 deletions .changeset/good-vans-refuse.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
'@graphiql/react': minor
---

`style.css` import was changed

## Migration

```diff
-import '@graphiql/react/dist/style.css';
+import '@graphiql/react/style.css';
```
5 changes: 5 additions & 0 deletions .changeset/green-pugs-worry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': major
---

remove `disableTabs` option
5 changes: 5 additions & 0 deletions .changeset/healthy-onions-bake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@graphiql/plugin-explorer': patch
---

improve explorer styles
5 changes: 5 additions & 0 deletions .changeset/hungry-spiders-cheat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': major
---

remove `data-testid="graphiql-container"`
8 changes: 8 additions & 0 deletions .changeset/late-trains-train.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@graphiql/plugin-code-exporter': minor
'@graphiql/plugin-explorer': minor
'@graphiql/react': minor
'graphiql': minor
---

update `vite` and related dependencies
5 changes: 5 additions & 0 deletions .changeset/metal-glasses-bow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': patch
---

update graphql to `16.9.0` and use vite `define` configuration to remove development code from cdn bundle
6 changes: 6 additions & 0 deletions .changeset/nine-meals-happen.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@graphiql/plugin-code-exporter': patch
'@graphiql/plugin-explorer': patch
---

fix types incorrect types entry
5 changes: 5 additions & 0 deletions .changeset/old-zebras-knock.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': minor
---

remove `.graphiql-session` class
6 changes: 6 additions & 0 deletions .changeset/olive-mice-hide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'graphiql': patch
'@graphiql/react': patch
---

Respect Markdown format: ignore single newline
9 changes: 9 additions & 0 deletions .changeset/orange-rivers-draw.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
'@graphiql/plugin-code-exporter': patch
'@graphiql/plugin-explorer': patch
'@graphiql/react': patch
---

use `vite build --watch` instead of `vite` for `dev` script because we don't need development server for them

do not use `vite-plugin-dts` when generating umd build
5 changes: 5 additions & 0 deletions .changeset/pink-moose-shake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': patch
---

use `position: absolute` for `.graphiql-logo` class
13 changes: 13 additions & 0 deletions .changeset/poor-ghosts-jump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
'@graphiql/plugin-explorer': major
---

`style.css` import was changed

## Migration

```diff
-import '@graphiql/plugin-explorer/dist/style.css';
+import '@graphiql/plugin-explorer/style.css';
```

51 changes: 51 additions & 0 deletions .changeset/pre.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{
"mode": "exit",
"tag": "alpha",
"initialVersions": {
"cm6-graphql": "0.0.15",
"codemirror-graphql": "2.0.13",
"graphiql": "3.4.0",
"@graphiql/plugin-code-exporter": "3.0.5",
"@graphiql/plugin-explorer": "3.1.1",
"@graphiql/react": "0.23.0",
"@graphiql/toolkit": "0.9.2",
"graphql-language-service": "5.2.2",
"graphql-language-service-cli": "3.4.2",
"graphql-language-service-server": "2.13.2",
"monaco-graphql": "1.5.3",
"vscode-graphql": "0.11.2",
"vscode-graphql-execution": "0.2.6",
"vscode-graphql-syntax": "1.3.6",
"example-graphiql-webpack": "0.0.0",
"example-monaco-graphql-nextjs": "0.0.0",
"example-monaco-graphql-react-vite": "0.0.0",
"example-monaco-graphql-webpack": "0.0.0"
},
"changesets": [
"add-on-prettify-callback",
"breezy-chicken-crash",
"few-steaks-clap",
"flat-lies-heal",
"gentle-bugs-mix",
"good-vans-refuse",
"green-pugs-worry",
"healthy-onions-bake",
"hungry-spiders-cheat",
"metal-glasses-bow",
"nine-meals-happen",
"old-zebras-knock",
"olive-mice-hide",
"orange-rivers-draw",
"pink-moose-shake",
"poor-ghosts-jump",
"red-papayas-fly",
"rich-jobs-kick",
"serious-forks-sip",
"spotty-bulldogs-confess",
"strong-ears-bake",
"thick-adults-leave",
"thirty-spoons-call",
"weak-dancers-jog",
"wicked-seas-laugh"
]
}
6 changes: 6 additions & 0 deletions .changeset/red-papayas-fly.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@graphiql/react': patch
'graphiql': patch
---

replace `overflow-y: scroll` with `overflow-y: auto`
21 changes: 21 additions & 0 deletions .changeset/rich-jobs-kick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
'graphiql': major
---

changed exports

```diff
-graphiql/graphiql.css
+graphiql/style.css
```

changed cdn paths, `dist/index.umd.js` and `dist/style.css` are minified

```diff
-https://unpkg.com/graphiql/graphiql.js
-https://unpkg.com/graphiql/graphiql.min.js
+https://unpkg.com/graphiql/dist/index.umd.js
-https://unpkg.com/graphiql/graphiql.css
-https://unpkg.com/graphiql/graphiql.min.css
+https://unpkg.com/graphiql/dist/style.css
```
6 changes: 6 additions & 0 deletions .changeset/serious-forks-sip.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@graphiql/react': patch
'graphiql': patch
---

rollback `position: absolute` style for `.graphiql-logo` because tabs will behind logo
7 changes: 7 additions & 0 deletions .changeset/spotty-bulldogs-confess.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@graphiql/react': patch
'graphiql': patch
---

- prefer `location` over `window.location`
- prefer `navigator` over `window.navigator`
5 changes: 5 additions & 0 deletions .changeset/strong-ears-bake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': patch
---

use `right: var(--px-16)` instead of `right: 0` for `.graphiql-logo`
5 changes: 5 additions & 0 deletions .changeset/thick-adults-leave.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@graphiql/react': minor
---

remove `createComponentGroup` utility in favour `Object.assign`
8 changes: 8 additions & 0 deletions .changeset/thirty-spoons-call.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"graphiql": major
"@graphiql/react": minor
---

- new looks of tabs

- fix `disableTabs` when `Add tab` button is still shown
79 changes: 79 additions & 0 deletions .changeset/weak-dancers-jog.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
---
'graphiql': major
---

Remove `toolbar.additionalContent` and `toolbar.additionalComponent` props in favor of `GraphiQL.Toolbar` render props.

## Migration from `toolbar.additionalContent`

### Before

```jsx
<GraphiQL toolbar={{ additionalContent: <button>My button</button> }} />
```

### After

```jsx
<GraphiQL>
<GraphiQL.Toolbar>
{({ merge, prettify, copy }) => (
<>
{prettify}
{merge}
{copy}
<button>My button</button>
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
```

## Migration from `toolbar.additionalComponent`

### Before

```jsx
<GraphiQL
toolbar={{
additionalComponent: function MyComponentWithAccessToContext() {
return <button>My button</button>;
},
}}
/>
```

### After

```jsx
<GraphiQL>
<GraphiQL.Toolbar>
{({ merge, prettify, copy }) => (
<>
{prettify}
{merge}
{copy}
<MyComponentWithAccessToContext />
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
```

---

Additionally, you can sort default toolbar buttons in different order or remove unneeded buttons for you:

```jsx
<GraphiQL>
<GraphiQL.Toolbar>
{({ prettify, copy }) => (
<>
{copy /* Copy button will be first instead of default last */}
{/* Merge button is removed from toolbar */}
{prettify}
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
```
5 changes: 5 additions & 0 deletions .changeset/wicked-seas-laugh.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': patch
---

replace `Tooltip`s in tabs with html `title="..."` attribute
Loading
Loading