Skip to content

Commit 27f0e1d

Browse files
dimaMachinadimaMachina
authored
GraphiQL v4: exit changeset alpha (#3907)
* exit changeset * polish migration guide * bump version * bump version * upd
1 parent aeabfce commit 27f0e1d

File tree

9 files changed

+178
-317
lines changed

9 files changed

+178
-317
lines changed

‎.changeset/pre.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"mode": "pre",
2+
"mode": "exit",
33
"tag": "alpha",
44
"initialVersions": {
55
"cm6-graphql": "0.0.15",

‎.github/workflows/pr-graphql-compat-check.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ on:
44
# only on merge to main.
55
# it's rare that this workflow would
66
# show us an error, but when it does it's important!
7-
branches: [main, graphiql-v4]
7+
branches: [main]
88
# don't run this regression suite if we don't need to
99
paths-ignore:
1010
- '**.md'

‎.github/workflows/release.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ name: Release
22

33
on:
44
push:
5-
branches: [main, graphiql-v4]
5+
branches: [main]
66
permissions: {}
77
jobs:
88
release:

‎docs/migration/graphiql-4.0.0.md‎

Lines changed: 159 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,173 @@
11
# Upgrading `graphiql` from `3.x` to `4.0.0`
22

3-
## `graphiql` changes
4-
5-
- New looks of tabs
6-
- Drop CommonJS build output
7-
- Drop support React 16/17
8-
- Support React 19
9-
- Changed umd CDN paths, `dist/index.umd.js` and `dist/style.css` are minified
10-
```diff
11-
-https://unpkg.com/graphiql/graphiql.js
12-
-https://unpkg.com/graphiql/graphiql.min.js
13-
+https://unpkg.com/graphiql/dist/index.umd.js
14-
-https://unpkg.com/graphiql/graphiql.css
15-
-https://unpkg.com/graphiql/graphiql.min.css
16-
+https://unpkg.com/graphiql/dist/style.css
17-
```
18-
- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN
19-
- Add support for `onPrettifyQuery` callback to enable customized query formatting
20-
- Show tabs even there is only one tab
21-
- Remove default export
3+
---
4+
5+
## `graphiql`
6+
7+
- Dropped support for **React 16/17**, added support for **React 19**
8+
- Dropped **CommonJS** build output – now **ESM only**
9+
- Improved UI of tabs
10+
- Changed tabs behavior – tabs are always visible (even if only one)
11+
- Updated tabs tooltip usage – now use HTML `title` attribute
12+
- Removed **default export**
13+
- Removed `disableTabs` option
14+
- Improved Markdown handling – single newlines are ignored
15+
- Added `onPrettifyQuery` callback for custom formatting
16+
- ⚠️ Deprecate **UMD CDN build `index.umd.js`**
17+
- Changed **CDN paths** and **style import**
18+
19+
> [!WARNING]
20+
>
21+
> ⚠️ **`index.umd.js` is deprecated**. Switch to the [ESM CDN example](../../examples/graphiql-cdn/index.html).
22+
23+
### UMD CDN path changes
24+
25+
```diff
26+
-https://unpkg.com/graphiql/graphiql.js
27+
-https://unpkg.com/graphiql/graphiql.min.js
28+
+https://unpkg.com/graphiql/dist/index.umd.js // ⚠️ deprecated
29+
30+
-https://unpkg.com/graphiql/graphiql.css
31+
-https://unpkg.com/graphiql/graphiql.min.css
32+
+https://unpkg.com/graphiql/dist/style.css
33+
```
34+
35+
### Default export removed
36+
37+
```diff
38+
-import GraphiQL from 'graphiql'
39+
+import { GraphiQL } from 'graphiql'
40+
```
41+
42+
### Style import changed
43+
44+
```diff
45+
-import 'graphiql/graphiql.css'
46+
+import 'graphiql/style.css'
47+
```
48+
49+
### Toolbar API migration
50+
51+
#### `toolbar.additionalContent` → `<GraphiQL.Toolbar>`
52+
53+
**Before:**
54+
55+
```tsx
56+
<GraphiQL toolbar={{ additionalContent: <button>My button</button> }} />
57+
```
58+
59+
**After:**
60+
61+
```jsx
62+
<GraphiQL>
63+
<GraphiQL.Toolbar>
64+
{({ merge, prettify, copy }) => (
65+
<>
66+
{prettify}
67+
{merge}
68+
{copy}
69+
<button>My button</button>
70+
</>
71+
)}
72+
</GraphiQL.Toolbar>
73+
</GraphiQL>
74+
```
75+
76+
---
77+
78+
#### `toolbar.additionalComponent` → `<GraphiQL.Toolbar>`
79+
80+
**Before:**
81+
82+
```jsx
83+
<GraphiQL
84+
toolbar={{
85+
additionalComponent: function MyComponentWithAccessToContext() {
86+
return <button>My button</button>;
87+
},
88+
}}
89+
/>
90+
```
91+
92+
**After:**
93+
94+
```jsx
95+
<GraphiQL>
96+
<GraphiQL.Toolbar>
97+
{({ merge, prettify, copy }) => (
98+
<>
99+
{prettify}
100+
{merge}
101+
{copy}
102+
<MyComponentWithAccessToContext />
103+
</>
104+
)}
105+
</GraphiQL.Toolbar>
106+
</GraphiQL>
107+
```
108+
109+
---
110+
111+
#### Customizing default toolbar buttons
112+
113+
You can reorder or remove default toolbar buttons:
114+
115+
```tsx
116+
<GraphiQL>
117+
<GraphiQL.Toolbar>
118+
{({ prettify, copy }) => (
119+
<>
120+
{copy} {/* Move copy button to the top */}
121+
{prettify} {/* Omit merge button */}
122+
</>
123+
)}
124+
</GraphiQL.Toolbar>
125+
</GraphiQL>
126+
```
127+
128+
---
129+
130+
## `@graphiql/react`
131+
132+
- Dropped support for **React 16/17**, added support for **React 19**
133+
- Dropped **CommonJS** build output
134+
- Improved UI of tabs
135+
- Updated dependencies: `@radix-ui` and `@headlessui/react`
136+
- Added `onPrettifyQuery` callback for custom formatting
137+
- Improved Markdown handling (ignores single newlines)
138+
- Style import changed:
22139
```diff
23-
-import GraphiQL from 'graphiql'
24-
+import { GraphiQL } from 'graphiql'
25-
```
26-
- Remove `disableTabs` option
27-
- Respect a Markdown format - ignore single newline
28-
- Replace `Tooltip`s in tabs with html `title="..."` attribute
29-
- Style import was changed
30-
```diff
31-
-graphiql/graphiql.css
32-
+graphiql/style.css
33-
```
34-
- Remove `toolbar.additionalContent` and `toolbar.additionalComponent` props in favor of `GraphiQL.Toolbar` render props
35-
36-
### Migration from `toolbar.additionalContent`
37-
38-
#### Before
39-
40-
```jsx
41-
<GraphiQL toolbar={{ additionalContent: <button>My button</button> }} />
42-
```
43-
44-
#### After
45-
46-
```jsx
47-
<GraphiQL>
48-
<GraphiQL.Toolbar>
49-
{({ merge, prettify, copy }) => (
50-
<>
51-
{prettify}
52-
{merge}
53-
{copy}
54-
<button>My button</button>
55-
</>
56-
)}
57-
</GraphiQL.Toolbar>
58-
</GraphiQL>
140+
-import '@graphiql/react/dist/style.css'
141+
+import '@graphiql/react/style.css'
59142
```
60143

61-
### Migration from `toolbar.additionalComponent`
144+
---
62145

63-
#### Before
146+
## `@graphiql/plugin-code-exporter`
64147

65-
```jsx
66-
<GraphiQL
67-
toolbar={{
68-
additionalComponent: function MyComponentWithAccessToContext() {
69-
return <button>My button</button>;
70-
},
71-
}}
72-
/>
73-
```
74-
75-
#### After
76-
77-
```jsx
78-
<GraphiQL>
79-
<GraphiQL.Toolbar>
80-
{({ merge, prettify, copy }) => (
81-
<>
82-
{prettify}
83-
{merge}
84-
{copy}
85-
<MyComponentWithAccessToContext />
86-
</>
87-
)}
88-
</GraphiQL.Toolbar>
89-
</GraphiQL>
90-
```
91-
92-
***
93-
94-
Additionally, you can sort default toolbar buttons in different order or remove unneeded buttons for you:
95-
96-
```jsx
97-
<GraphiQL>
98-
<GraphiQL.Toolbar>
99-
{({ prettify, copy }) => (
100-
<>
101-
{copy /* Copy button will be first instead of default last */}
102-
{/* Merge button is removed from toolbar */}
103-
{prettify}
104-
</>
105-
)}
106-
</GraphiQL.Toolbar>
107-
</GraphiQL>
108-
```
109-
110-
## `@graphiql/react` changes
111-
112-
- New looks of tabs
113-
- Drop CommonJS build output
114-
- Drop support React 16/17
115-
- Support React 19
116-
- Update `@radix-ui` and `@headlessui/react` dependencies
117-
- Add support for `onPrettifyQuery` callback to enable customized query formatting
118-
- `style.css` import was changed
148+
- Dropped support for **React 16/17**, added support for **React 19**
149+
- Dropped **CommonJS** build output
150+
- Updated ESM-based CDN example:
151+
[code-exporter ESM CDN example](../../packages/graphiql-plugin-code-exporter/example/index.html)
152+
- ⚠️ UMD build deprecated – migrate to ESM-based CDN
153+
- Style import changed:
119154
```diff
120-
-import '@graphiql/react/dist/style.css';
121-
+import '@graphiql/react/style.css';
155+
-import '@graphiql/plugin-code-exporter/dist/style.css'
156+
+import '@graphiql/plugin-code-exporter/style.css'
122157
```
123-
- Respect a Markdown format - ignore single newline
124-
125-
## `@graphiql/plugin-code-exporter` changes
126158

127-
- Drop CommonJS build output
128-
- Drop support React 16/17
129-
- Support React 19
130-
- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN
131-
- [Updated CDN ESM-based example](../../packages/graphiql-plugin-code-exporter/example/index.html)
132-
- `style.css` import was changed
133-
```diff
134-
-import '@graphiql/plugin-code-exporter/dist/style.css';
135-
+import '@graphiql/plugin-code-exporter/style.css';
136-
```
159+
---
137160

138-
## `@graphiql/plugin-explorer` changes
161+
## `@graphiql/plugin-explorer`
139162

140-
- Drop CommonJS build output
141-
- Drop support React 16/17
142-
- Support React 19
143-
- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN
144-
- [Updated CDN ESM-based example](../../packages/graphiql-plugin-explorer/example/index.html)
145-
- Improve explorer styles
146-
- `style.css` import was changed
163+
- Dropped support for **React 16/17**, added support for **React 19**
164+
- Dropped **CommonJS** build output
165+
- Improved styles for the explorer UI
166+
- Updated ESM-based CDN example:
167+
[explorer ESM CDN example](../../packages/graphiql-plugin-explorer/example/index.html)
168+
- ⚠️ UMD build deprecated – migrate to ESM-based CDN
169+
- Style import changed:
147170
```diff
148-
-import '@graphiql/plugin-explorer/dist/style.css';
149-
+import '@graphiql/plugin-explorer/style.css';
171+
-import '@graphiql/plugin-explorer/dist/style.css'
172+
+import '@graphiql/plugin-explorer/style.css'
150173
```

‎packages/graphiql-plugin-code-exporter/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@graphiql/plugin-code-exporter",
3-
"version": "4.0.0-alpha.1",
3+
"version": "3.1.5",
44
"sideEffects": false,
55
"repository": {
66
"type": "git",
@@ -39,13 +39,13 @@
3939
"graphiql-code-exporter": "^3.0.3"
4040
},
4141
"peerDependencies": {
42-
"@graphiql/react": "^1.0.0-alpha.0",
42+
"@graphiql/react": "^0.29.0",
4343
"graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
4444
"react": "^18 || ^19",
4545
"react-dom": "^18 || ^19"
4646
},
4747
"devDependencies": {
48-
"@graphiql/react": "^1.0.0-alpha.3",
48+
"@graphiql/react": "^0.29.0",
4949
"@vitejs/plugin-react": "^4.4.1",
5050
"graphql": "^16.9.0",
5151
"react": "^19.1.0",

‎packages/graphiql-plugin-explorer/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@graphiql/plugin-explorer",
3-
"version": "4.0.0-alpha.2",
3+
"version": "3.2.6",
44
"sideEffects": false,
55
"repository": {
66
"type": "git",
@@ -38,13 +38,13 @@
3838
"graphiql-explorer": "^0.9.0"
3939
},
4040
"peerDependencies": {
41-
"@graphiql/react": "^1.0.0-alpha.0",
41+
"@graphiql/react": "^0.29.0",
4242
"graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
4343
"react": "^18 || ^19",
4444
"react-dom": "^18 || ^19"
4545
},
4646
"devDependencies": {
47-
"@graphiql/react": "^1.0.0-alpha.3",
47+
"@graphiql/react": "^0.29.0",
4848
"@vitejs/plugin-react": "^4.4.1",
4949
"graphql": "^16.9.0",
5050
"react": "^19.1.0",

‎packages/graphiql-react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@graphiql/react",
3-
"version": "1.0.0-alpha.4",
3+
"version": "0.29.0",
44
"sideEffects": false,
55
"repository": {
66
"type": "git",

0 commit comments

Comments
 (0)