[graphiql]: support react 19, drop support react 16 and react 17

.changeset/gold-cooks-design.md

@@ -0,0 +1,9 @@
+---
+'@graphiql/plugin-code-exporter': major
+'@graphiql/plugin-explorer': major
+'@graphiql/react': major
+'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()`

.eslintrc.js

@@ -365,6 +365,7 @@ module.exports = {
       excludedFiles: ['**/*.{md,mdx}/*.{ts,tsx}'],
       // extends: ['plugin:@typescript-eslint/recommended-type-checked'],
       rules: {
+        // '@typescript-eslint/no-redundant-type-constituents': 'error',
         '@typescript-eslint/prefer-optional-chain': 'error',
         '@typescript-eslint/no-unnecessary-type-assertion': 'error',
         '@typescript-eslint/no-floating-promises': 'error',
@@ -482,15 +483,15 @@ module.exports = {
       },
     },
     {
-      // Rule prefer await to then without React packages because it's ugly to have `async IIFE` inside `useEffect`
+      // Rule to prefer await to then without React packages because it's ugly to have `async IIFE` inside `useEffect`
       files: ['packages/**'],
       excludedFiles: ['packages/graphiql/**', 'packages/graphiql-react/**'],
       rules: {
         'promise/prefer-await-to-then': 'error',
       },
     },
     {
-      files: ['packages/{graphiql-react,graphiql}/**'],
+      files: ['packages/{graphiql-react,graphiql}/**/*.{ts,tsx}'],
       rules: {
         '@typescript-eslint/no-restricted-imports': [
           'error',
@@ -501,6 +502,7 @@ module.exports = {
           },
         ],
         'react-hooks/react-compiler': 'error',
+        '@typescript-eslint/no-deprecated': 'error',
       },
     },
     {

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

@@ -35,16 +35,16 @@
   "peerDependencies": {
     "@graphiql/react": "^0.28.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@graphiql/react": "^0.28.0",
     "@vitejs/plugin-react": "^4.3.1",
     "graphql": "^16.9.0",
     "postcss-nesting": "^10.1.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "^4.6.3",
     "vite": "^5.4.18"
   }

packages/graphiql-plugin-explorer/package.json

@@ -34,15 +34,15 @@
   "peerDependencies": {
     "@graphiql/react": "^0.28.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@graphiql/react": "^0.28.1",
     "@vitejs/plugin-react": "^4.3.1",
     "graphql": "^16.9.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "^4.6.3",
     "vite": "^5.4.18",
     "vite-plugin-svgr": "^4.2.0"

packages/graphiql-react/package.json

@@ -45,13 +45,13 @@
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "dependencies": {
     "react-compiler-runtime": "19.1.0-rc.1",
     "@graphiql/toolkit": "^0.11.0",
-    "@headlessui/react": "^1.7.15",
+    "@headlessui/react": "^2",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-tooltip": "^1.0.6",
@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "babel-plugin-react-compiler": "19.1.0-rc.1",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^19.1.2",
     "@babel/helper-string-parser": "^7.19.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
@@ -79,8 +79,8 @@
     "@vitejs/plugin-react": "^4.3.1",
     "graphql": "^16.9.0",
     "postcss-nesting": "^10.1.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "^4.6.3",
     "vite": "^5.4.18",
     "vite-plugin-svgr": "^4.2.0"

packages/graphiql-react/src/editor/response-editor.tsx

@@ -1,8 +1,7 @@
 import { formatError } from '@graphiql/toolkit';
 import type { Position, Token } from 'codemirror';
 import { ComponentType, useEffect, useRef, JSX } from 'react';
-// eslint-disable-next-line react/no-deprecated -- We can't refactor to root.unmount() from React 18 because we support React 16/17 too
-import { unmountComponentAtNode, render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { useSchemaContext } from '../schema';
 
 import {
@@ -84,38 +83,32 @@ export function useResponseEditor(
 
   useEffect(() => {
     let isActive = true;
+
     void importCodeMirrorImports().then(CodeMirror => {
       // Don't continue if the effect has already been cleaned up
       if (!isActive) {
         return;
       }
 
       // Handle image tooltips and custom tooltips
-      const tooltipDiv = document.createElement('div');
+      const tooltipRoot = createRoot(document.createElement('div'));
       CodeMirror.registerHelper(
         'info',
         'graphql-results',
         (token: Token, _options: any, _cm: CodeMirrorEditor, pos: Position) => {
-          const infoElements: JSX.Element[] = [];
-
-          const ResponseTooltipComponent = responseTooltipRef.current;
-          if (ResponseTooltipComponent) {
-            infoElements.push(
-              <ResponseTooltipComponent pos={pos} token={token} />,
-            );
-          }
-
-          if (ImagePreview.shouldRender(token)) {
-            infoElements.push(
-              <ImagePreview key="image-preview" token={token} />,
-            );
-          }
-          if (!infoElements.length) {
-            unmountComponentAtNode(tooltipDiv);
-            return null;
+          const ResponseTooltip = responseTooltipRef.current;
+          const infoElements: JSX.Element[] = [
+            ResponseTooltip && <ResponseTooltip pos={pos} token={token} />,
+            ImagePreview.shouldRender(token) && (
+              <ImagePreview key="image-preview" token={token} />
+            ),
+          ].filter((v): v is JSX.Element => Boolean(v));
+
+          if (infoElements.length) {
+            tooltipRoot.render(infoElements);
+          } else {
+            tooltipRoot.unmount();
           }
-          render(infoElements, tooltipDiv);
-          return tooltipDiv;
         },
       );
 
@@ -151,7 +144,7 @@ export function useResponseEditor(
     if (fetchError) {
       responseEditor?.setValue(fetchError);
     }
-    if (validationErrors.length > 0) {
+    if (validationErrors.length) {
       responseEditor?.setValue(formatError(validationErrors));
     }
   }, [responseEditor, fetchError, validationErrors]);

packages/graphiql-react/src/explorer/components/search.tsx

@@ -8,7 +8,12 @@ import {
   isObjectType,
 } from 'graphql';
 import { FC, useEffect, useRef, useState } from 'react';
-import { Combobox } from '@headlessui/react';
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from '@headlessui/react';
 import { MagnifyingGlassIcon } from '../../icons';
 import { useSchemaContext } from '../../schema';
 import debounce from '../../utility/debounce';
@@ -85,7 +90,7 @@ export const Search: FC = () => {
         }}
       >
         <MagnifyingGlassIcon />
-        <Combobox.Input
+        <ComboboxInput
           autoComplete="off"
           onChange={event => setSearchValue(event.target.value)}
           placeholder={`${isMacOs ? '⌘' : 'Ctrl'} K`}
@@ -95,7 +100,7 @@ export const Search: FC = () => {
         />
       </div>
       {isFocused && (
-        <Combobox.Options data-cy="doc-explorer-list">
+        <ComboboxOptions data-cy="doc-explorer-list">
           {results.within.length +
             results.types.length +
             results.fields.length ===
@@ -105,13 +110,13 @@ export const Search: FC = () => {
             </li>
           ) : (
             results.within.map((result, i) => (
-              <Combobox.Option
+              <ComboboxOption
                 key={`within-${i}`}
                 value={result}
                 data-cy="doc-explorer-option"
               >
                 <Field field={result.field} argument={result.argument} />
-              </Combobox.Option>
+              </ComboboxOption>
             ))
           )}
           {results.within.length > 0 &&
@@ -121,25 +126,25 @@ export const Search: FC = () => {
             </div>
           ) : null}
           {results.types.map((result, i) => (
-            <Combobox.Option
+            <ComboboxOption
               key={`type-${i}`}
               value={result}
               data-cy="doc-explorer-option"
             >
               <Type type={result.type} />
-            </Combobox.Option>
+            </ComboboxOption>
           ))}
           {results.fields.map((result, i) => (
-            <Combobox.Option
+            <ComboboxOption
               key={`field-${i}`}
               value={result}
               data-cy="doc-explorer-option"
             >
               <Type type={result.type} />.
               <Field field={result.field} argument={result.argument} />
-            </Combobox.Option>
+            </ComboboxOption>
           ))}
-        </Combobox.Options>
+        </ComboboxOptions>
       )}
     </Combobox>
   );

packages/graphiql-react/vite.config.mts

@@ -7,7 +7,7 @@ import type { PluginOptions as ReactCompilerConfig } from 'babel-plugin-react-co
 import packageJSON from './package.json';
 
 export const reactCompilerConfig: Partial<ReactCompilerConfig> = {
-  target: '17',
+  target: '18',
   sources(filename) {
     if (filename.includes('__tests__')) {
       return false;

packages/graphiql/package.json

@@ -55,8 +55,8 @@
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "babel-plugin-react-compiler": "19.1.0-rc.1",
@@ -75,8 +75,8 @@
     "graphql-subscriptions": "^2.0.0",
     "postcss": "8.4.31",
     "postcss-import": "15.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "start-server-and-test": "^1.10.11",
     "subscriptions-transport-ws": "0.11.0",
     "typescript": "^4.6.3",