chore(deps): Bump react-dom and @types/react-dom (#1223)

* chore(deps): Bump react-dom and @types/react-dom

Bumps [react-dom](https://github.com/facebook/react/tree/HEAD/packages/react-dom) and [@types/react-dom](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-dom). These dependencies needed to be updated together.

Updates `react-dom` from 17.0.2 to 19.0.0
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v19.0.0/packages/react-dom)

Updates `@types/react-dom` from 17.0.16 to 19.0.2
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-dom)

---
updated-dependencies:
- dependency-name: react-dom
  dependency-type: direct:production
  update-type: version-update:semver-major
- dependency-name: "@types/react-dom"
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: update react in sync with react-dom

* chore: update to latest ReactDOM client syntax

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Steve <srherzog@gmail.com>

Author: dependabot[bot]

README.md

@@ -1313,12 +1313,14 @@ function MyComponent() {
 import { useQuery } from 'graphql-hooks'
 import { graphql } from './gql'
 
-const HOMEPAGE_QUERY = graphql(`query HomePage($limit: Int) {
-  users(limit: $limit) {
-    id
-    name
+const HOMEPAGE_QUERY = graphql(`
+  query HomePage($limit: Int) {
+    users(limit: $limit) {
+      id
+      name
+    }
   }
-}`)
+`)
 
 function MyComponent() {
   // data will be typed as User objects with id, name properties
@@ -1343,7 +1345,6 @@ function MyComponent() {
 
 Full details of the features of `TypedDocumentNode` and GraphQL Code Generator can be found [here](https://the-guild.dev/graphql/codegen). Full examples of this implementation are in the examples folder.
 
-
 ## Other
 
 ### Request interceptors
@@ -1409,7 +1410,6 @@ function AbortControllerExample() {
 
 As well as supporting input of your queries as strings, this library also supports using a `DocumentNode`. Document nodes can be generated using a code-generation tool such as [GraphQL codegen](https://the-guild.dev/graphql/codegen) which will provide typing information for your queries based on your GraphQL schema (see the typescript example). If you don't want to use a code-generation library you can use `graphql-tag` to generate a `DocumentNode`.
 
-
 ```js
 import gql from 'graphql-tag'
 
@@ -1499,4 +1499,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
 
-[![banner](https://raw.githubusercontent.com/nearform/.github/refs/heads/master/assets/os-banner-green.svg)](https://www.nearform.com/contact/?utm_source=open-source&utm_medium=banner&utm_campaign=os-project-pages)
+[![banner](https://raw.githubusercontent.com/nearform/.github/refs/heads/master/assets/os-banner-green.svg)](https://www.nearform.com/contact/?utm_source=open-source&utm_medium=banner&utm_campaign=os-project-pages)

examples/create-react-app/package.json

@@ -10,9 +10,9 @@
     "graphql-hooks-memcache": "^3.2.0",
     "json-graphql-server": "^3.0.1",
     "prop-types": "^15.7.2",
-    "react": "^18.0.0",
+    "react": "^19.0.0",
     "react-app-polyfill": "^2.0.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^19.0.0",
     "react-scripts": "^5.0.0"
   },
   "scripts": {

examples/create-react-app/src/index.js

@@ -1,8 +1,9 @@
 import 'react-app-polyfill/ie11'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 
 import App from './App'
 import './index.css'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(<App />)

examples/fastify-ssr/package.json

@@ -33,8 +33,8 @@
     "isomorphic-unfetch": "^4.0.2",
     "mercurius": "^14.0.0",
     "prop-types": "^15.7.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^6.0.2"
   },
   "devDependencies": {

examples/fastify-ssr/src/client/js/app-shell.js

@@ -1,7 +1,7 @@
 import { ClientContext, GraphQLClient } from 'graphql-hooks'
 import memCache from 'graphql-hooks-memcache'
 import React from 'react'
-import { hydrate } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import AppShell from '../../app/AppShell.js'
 
@@ -19,4 +19,5 @@ const App = (
   </BrowserRouter>
 )
 
-hydrate(App, document.getElementById('app-root'))
+const root = createRoot(document.getElementById('app-root'))
+root.hydrate(App)

examples/full-ws-transport/package.json

@@ -7,8 +7,8 @@
     "graphql-hooks": "^8.2.0",
     "graphql-ws": "^5.5.5",
     "mercurius": "^14.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-scripts": "^5.0.0"
   },
   "scripts": {

examples/full-ws-transport/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { createClient } from 'graphql-ws'
 import { GraphQLClient, ClientContext } from 'graphql-hooks'
 import App from './App'
@@ -16,11 +16,11 @@ const client = new GraphQLClient({
   subscriptionClient
 })
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
   <React.StrictMode>
     <ClientContext.Provider value={client}>
       <App />
     </ClientContext.Provider>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 )

examples/persisted-queries/client/package.json

@@ -5,12 +5,12 @@
   "dependencies": {
     "@types/jest": "^29.0.3",
     "@types/node": "^22.10.5",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.2.0",
     "graphql-hooks": "^8.2.0",
     "graphql-hooks-memcache": "^3.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-scripts": "^5.0.0",
     "typescript": "^4.1.2"
   },

examples/persisted-queries/client/src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+root.render(<App />)

examples/subscription/package.json

@@ -25,8 +25,8 @@
     "lowdb": "^7.0.1",
     "mercurius": "^14.0.0",
     "mqemitter-redis": "^5.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "subscriptions-transport-ws": "^0.11.0"
   },
   "devDependencies": {