graphql · dimaMachina · May 2, 2025 · May 2, 2025 · May 2, 2025 · May 2, 2025
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -1,5 +1,5 @@
 {
-  "mode": "pre",
+  "mode": "exit",
   "tag": "alpha",
   "initialVersions": {
     "cm6-graphql": "0.0.15",

diff --git a/.github/workflows/pr-graphql-compat-check.yml b/.github/workflows/pr-graphql-compat-check.yml
@@ -4,7 +4,7 @@ on:
     # only on merge to main.
     # it's rare that this workflow would
     # show us an error, but when it does it's important!
-    branches: [main, graphiql-v4]
+    branches: [main]
     # don't run this regression suite if we don't need to
     paths-ignore:
       - '**.md'

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -2,7 +2,7 @@ name: Release
 
 on:
   push:
-    branches: [main, graphiql-v4]
+    branches: [main]
 permissions: {}
 jobs:
   release:

diff --git a/docs/migration/graphiql-4.0.0.md b/docs/migration/graphiql-4.0.0.md
@@ -1,150 +1,173 @@
 # Upgrading `graphiql` from `3.x` to `4.0.0`
 
-## `graphiql` changes
-
-- New looks of tabs
-- Drop CommonJS build output
-- Drop support React 16/17
-- Support React 19
-- Changed umd 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
-  ```
-- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN
-- Add support for `onPrettifyQuery` callback to enable customized query formatting
-- Show tabs even there is only one tab
-- Remove default export
+---
+
+## `graphiql`
+
+- Dropped support for **React 16/17**, added support for **React 19**
+- Dropped **CommonJS** build output – now **ESM only**
+- Improved UI of tabs
+  - Changed tabs behavior – tabs are always visible (even if only one)
+  - Updated tabs tooltip usage – now use HTML `title` attribute
+- Removed **default export**
+- Removed `disableTabs` option
+- Improved Markdown handling – single newlines are ignored
+- Added `onPrettifyQuery` callback for custom formatting
+- ⚠️ Deprecate **UMD CDN build `index.umd.js`**
+- Changed **CDN paths** and **style import**
+
+> [!WARNING]
+>
+> ⚠️ **`index.umd.js` is deprecated**. Switch to the [ESM CDN example](../../examples/graphiql-cdn/index.html).
+
+### UMD CDN path changes
+
+```diff
+-https://unpkg.com/graphiql/graphiql.js
+-https://unpkg.com/graphiql/graphiql.min.js
++https://unpkg.com/graphiql/dist/index.umd.js  // ⚠️ deprecated
+
+-https://unpkg.com/graphiql/graphiql.css
+-https://unpkg.com/graphiql/graphiql.min.css
++https://unpkg.com/graphiql/dist/style.css
+```
+
+### Default export removed
+
+```diff
+-import GraphiQL from 'graphiql'
++import { GraphiQL } from 'graphiql'
+```
+
+### Style import changed
+
+```diff
+-import 'graphiql/graphiql.css'
++import 'graphiql/style.css'
+```
+
+### Toolbar API migration
+
+#### `toolbar.additionalContent` → `<GraphiQL.Toolbar>`
+
+**Before:**
+
+```tsx
+<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>
+```
+
+---
+
+#### `toolbar.additionalComponent` → `<GraphiQL.Toolbar>`
+
+**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>
+```
+
+---
+
+#### Customizing default toolbar buttons
+
+You can reorder or remove default toolbar buttons:
+
+```tsx
+<GraphiQL>
+  <GraphiQL.Toolbar>
+    {({ prettify, copy }) => (
+      <>
+        {copy} {/* Move copy button to the top */}
+        {prettify} {/* Omit merge button */}
+      </>
+    )}
+  </GraphiQL.Toolbar>
+</GraphiQL>
+```
+
+---
+
+## `@graphiql/react`
+
+- Dropped support for **React 16/17**, added support for **React 19**
+- Dropped **CommonJS** build output
+- Improved UI of tabs
+- Updated dependencies: `@radix-ui` and `@headlessui/react`
+- Added `onPrettifyQuery` callback for custom formatting
+- Improved Markdown handling (ignores single newlines)
+- Style import changed:
   ```diff
-  -import GraphiQL from 'graphiql'
-  +import { GraphiQL } from 'graphiql'
-  ```
-- Remove `disableTabs` option
-- Respect a Markdown format - ignore single newline
-- Replace `Tooltip`s in tabs with html `title="..."` attribute
-- Style import was changed
-  ```diff
-  -graphiql/graphiql.css
-  +graphiql/style.css
-  ```
-- 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>
+  -import '@graphiql/react/dist/style.css'
+  +import '@graphiql/react/style.css'
   ```
 
-  ### Migration from `toolbar.additionalComponent`
+---
 
-  #### Before
+## `@graphiql/plugin-code-exporter`
 
-  ```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>
-  ```
-
-## `@graphiql/react` changes
-
-- New looks of tabs
-- Drop CommonJS build output
-- Drop support React 16/17
-- Support React 19
-- Update `@radix-ui` and `@headlessui/react` dependencies
-- Add support for `onPrettifyQuery` callback to enable customized query formatting
-- `style.css` import was changed
+- Dropped support for **React 16/17**, added support for **React 19**
+- Dropped **CommonJS** build output
+- Updated ESM-based CDN example:
+  [code-exporter ESM CDN example](../../packages/graphiql-plugin-code-exporter/example/index.html)
+- ⚠️ UMD build deprecated – migrate to ESM-based CDN
+- Style import changed:
   ```diff
-  -import '@graphiql/react/dist/style.css';
-  +import '@graphiql/react/style.css';
+  -import '@graphiql/plugin-code-exporter/dist/style.css'
+  +import '@graphiql/plugin-code-exporter/style.css'
   ```
-- Respect a Markdown format - ignore single newline
-
-## `@graphiql/plugin-code-exporter` changes
 
-- Drop CommonJS build output
-- Drop support React 16/17
-- Support React 19
-- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN
-- [Updated CDN ESM-based example](../../packages/graphiql-plugin-code-exporter/example/index.html)
-- `style.css` import was changed
-  ```diff
-  -import '@graphiql/plugin-code-exporter/dist/style.css';
-  +import '@graphiql/plugin-code-exporter/style.css';
-  ```
+---
 
-## `@graphiql/plugin-explorer` changes
+## `@graphiql/plugin-explorer`
 
-- Drop CommonJS build output
-- Drop support React 16/17
-- Support React 19
-- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN
-- [Updated CDN ESM-based example](../../packages/graphiql-plugin-explorer/example/index.html)
-- Improve explorer styles
-- `style.css` import was changed
+- Dropped support for **React 16/17**, added support for **React 19**
+- Dropped **CommonJS** build output
+- Improved styles for the explorer UI
+- Updated ESM-based CDN example:
+  [explorer ESM CDN example](../../packages/graphiql-plugin-explorer/example/index.html)
+- ⚠️ UMD build deprecated – migrate to ESM-based CDN
+- Style import changed:
   ```diff
-  -import '@graphiql/plugin-explorer/dist/style.css';
-  +import '@graphiql/plugin-explorer/style.css';
+  -import '@graphiql/plugin-explorer/dist/style.css'
+  +import '@graphiql/plugin-explorer/style.css'
   ```
diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-code-exporter",
-  "version": "4.0.0-alpha.1",
+  "version": "3.1.5",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -39,13 +39,13 @@
     "graphiql-code-exporter": "^3.0.3"
   },
   "peerDependencies": {
-    "@graphiql/react": "^1.0.0-alpha.0",
+    "@graphiql/react": "^0.29.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "@graphiql/react": "^1.0.0-alpha.3",
+    "@graphiql/react": "^0.29.0",
     "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
     "react": "^19.1.0",

diff --git a/packages/graphiql-plugin-explorer/package.json b/packages/graphiql-plugin-explorer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-explorer",
-  "version": "4.0.0-alpha.2",
+  "version": "3.2.6",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -38,13 +38,13 @@
     "graphiql-explorer": "^0.9.0"
   },
   "peerDependencies": {
-    "@graphiql/react": "^1.0.0-alpha.0",
+    "@graphiql/react": "^0.29.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "@graphiql/react": "^1.0.0-alpha.3",
+    "@graphiql/react": "^0.29.0",
     "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
     "react": "^19.1.0",

diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/react",
-  "version": "1.0.0-alpha.4",
+  "version": "0.29.0",
   "sideEffects": false,
   "repository": {
     "type": "git",