fix Warning: ReactDOM.render is no longer supported in React 18 for @graphql-yoga/graphiql

packages/graphiql/index.html

@@ -14,10 +14,10 @@
     <div id="root"></div>
 
     <script type="module">
-      import * as yogaGraphiQL from './src/bundle.tsx';
+      import { renderYogaGraphiQL } from './src/bundle.tsx';
 
-      const container = window.document.querySelector('#root');
-      yogaGraphiQL.renderYogaGraphiQL(container, {
+      const container = document.getElementById('root');
+      renderYogaGraphiQL(container, {
         endpoint: '/graphql',
       });
     </script>

packages/graphiql/src/YogaGraphiQL.tsx

@@ -1,14 +1,14 @@
-import { explorerPlugin } from '@graphiql/plugin-explorer';
-import '@graphiql/plugin-explorer/dist/style.css';
+import React, { useMemo, useState } from 'react';
 import { GraphiQL, GraphiQLInterface, GraphiQLProps, GraphiQLProvider } from 'graphiql';
+import { DocumentNode, Kind, parse } from 'graphql';
+import { explorerPlugin } from '@graphiql/plugin-explorer';
 import { Fetcher, FetcherOpts, FetcherParams } from '@graphiql/toolkit';
 import { LoadFromUrlOptions, SubscriptionProtocol, UrlLoader } from '@graphql-tools/url-loader';
-import 'graphiql/graphiql.css';
-import { DocumentNode, Kind, parse } from 'graphql';
 import 'json-bigint-patch';
-import React, { useMemo, useState } from 'react';
 import { useUrlSearchParams } from 'use-url-search-params';
 import { YogaLogo } from './YogaLogo';
+import 'graphiql/graphiql.css';
+import '@graphiql/plugin-explorer/dist/style.css';
 import './styles.css';
 
 const getOperationWithFragments = (

packages/graphiql/src/bundle.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { YogaGraphiQL, YogaGraphiQLProps } from './YogaGraphiQL.js';
 
 export function renderYogaGraphiQL(element: Element, opts?: YogaGraphiQLProps) {
-  ReactDOM.render(<YogaGraphiQL {...opts} />, element);
+  const root = createRoot(element);
+  root.render(<YogaGraphiQL {...opts} />);
 }
 
 globalThis.React = React;