@tanstack/react-query 4.41.0 → 4.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.41.0",
+  "version": "4.42.0",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -39,13 +39,15 @@
   ],
   "devDependencies": {
     "@types/jscodeshift": "^0.11.3",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@types/use-sync-external-store": "^0.0.3",
-    "react": "^18.2.0",
+    "react": "^19.1.1",
     "react-17": "npm:react@^17.0.2",
-    "react-dom": "^18.2.0",
+    "react-18": "npm:react@^18.2.0",
+    "react-dom": "^19.1.1",
     "react-dom-17": "npm:react-dom@^17.0.2",
+    "react-dom-18": "npm:react-dom@^18.2.0",
     "jscodeshift": "^0.13.1",
     "react-error-boundary": "^3.1.4"
   },
@@ -54,8 +56,8 @@
     "@tanstack/query-core": "4.41.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "*"
   },
   "peerDependenciesMeta": {

package/src/QueryClientProvider.tsx

@@ -73,7 +73,7 @@ export const QueryClientProvider = ({
   children,
   context,
   contextSharing = false,
-}: QueryClientProviderProps): JSX.Element => {
+}: QueryClientProviderProps): React.JSX.Element => {
   React.useEffect(() => {
     client.mount()
     return () => {

package/src/__tests__/ssr-hydration.test.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
-import ReactDOMTestUtils from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 import ReactDOMServer from 'react-dom/server'
-// eslint-disable-next-line import/no-unresolved -- types only for module augmentation
-import type {} from 'react-dom/next'
+import ReactDOMClient from 'react-dom/client'
 
 import {
   QueryCache,
@@ -14,12 +13,13 @@ import {
 } from '..'
 import { createQueryClient, setIsServer, sleep } from './utils'
 
-const isReact18 = () => (process.env.REACTJS_VERSION || '18') === '18'
+const isReact18 = () => (process.env.REACTJS_VERSION || '19') === '18'
+const isReact17 = () => (process.env.REACTJS_VERSION || '19') === '17'
 
 const ReactHydrate = (element: React.ReactElement, container: Element) => {
   if (isReact18()) {
     let root: any
-    ReactDOMTestUtils.act(() => {
+    act(() => {
       // @ts-expect-error
       root = ReactDOM.hydrateRoot(container, element)
     })
@@ -28,9 +28,21 @@ const ReactHydrate = (element: React.ReactElement, container: Element) => {
     }
   }
 
-  ReactDOM.hydrate(element, container)
+  if (isReact17()) {
+    // @ts-expect-error
+    ReactDOM.hydrate(element, container)
+    return () => {
+      // @ts-expect-error
+      ReactDOM.unmountComponentAtNode(container)
+    }
+  }
+
+  let root: any
+  React.act(() => {
+    root = ReactDOMClient.hydrateRoot(container, element)
+  })
   return () => {
-    ReactDOM.unmountComponentAtNode(container)
+    root.unmount()
   }
 }
 
@@ -54,6 +66,7 @@ describe('Server side rendering with de/rehydration', () => {
     // @ts-expect-error we expect IS_REACT_ACT_ENVIRONMENT to exist
     globalThis.IS_REACT_ACT_ENVIRONMENT = previousIsReactActEnvironment
   })
+
   it('should not mismatch on success', async () => {
     const consoleMock = jest.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)

package/src/__tests__/suspense.test.tsx

@@ -9,7 +9,13 @@ import {
   useQuery,
   useQueryErrorResetBoundary,
 } from '..'
-import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
+import {
+  createQueryClient,
+  queryKey,
+  reactVersion,
+  renderWithClient,
+  sleep,
+} from './utils'
 import type { UseInfiniteQueryResult, UseQueryResult } from '..'
 
 describe("useQuery's in Suspense mode", () => {
@@ -60,7 +66,7 @@ describe("useQuery's in Suspense mode", () => {
 
     await waitFor(() => rendered.getByText('data: 2'))
 
-    expect(renders).toBe(4)
+    expect(renders).toBe(reactVersion() === '19' ? 6 : 4)
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({ data: 1, status: 'success' })
     expect(states[1]).toMatchObject({ data: 2, status: 'success' })
@@ -221,7 +227,9 @@ describe("useQuery's in Suspense mode", () => {
 
     await waitFor(() => rendered.getByText('rendered'))
 
-    await waitFor(() => expect(successFn).toHaveBeenCalledTimes(1))
+    await waitFor(() =>
+      expect(successFn).toHaveBeenCalledTimes(reactVersion() === '19' ? 2 : 1),
+    )
     await waitFor(() => expect(successFn).toHaveBeenCalledWith('selected'))
   })
 
@@ -273,7 +281,9 @@ describe("useQuery's in Suspense mode", () => {
 
     await waitFor(() => rendered.getByText('second'))
 
-    await waitFor(() => expect(successFn1).toHaveBeenCalledTimes(1))
+    await waitFor(() =>
+      expect(successFn1).toHaveBeenCalledTimes(reactVersion() === '19' ? 2 : 1),
+    )
     await waitFor(() => expect(successFn2).toHaveBeenCalledTimes(1))
   })
 
@@ -1007,8 +1017,10 @@ describe("useQuery's in Suspense mode", () => {
       }),
     )
 
-    expect(renders).toBe(2)
-    expect(rendered.queryByText('rendered')).not.toBeNull()
+    expect(renders).toBe(reactVersion() === '19' ? 3 : 2)
+    await waitFor(() => {
+      expect(rendered.queryByText('rendered')).not.toBeNull()
+    })
   })
 })
 

package/src/__tests__/useMutation.test.tsx

@@ -735,7 +735,7 @@ describe('useMutation', () => {
   })
 
   it('should be able to throw an error when useErrorBoundary is a function that returns true', async () => {
-    let boundary = false
+    let callBoundaryCount = 0
     function Page() {
       const { mutate, error } = useMutation<string, Error>(
         () => {
@@ -745,8 +745,8 @@ describe('useMutation', () => {
         },
         {
           useErrorBoundary: () => {
-            boundary = !boundary
-            return !boundary
+            callBoundaryCount++
+            return callBoundaryCount > 1
           },
         },
       )

package/src/__tests__/useQueries.test.tsx

@@ -10,6 +10,7 @@ import {
   expectType,
   expectTypeNotAny,
   queryKey,
+  reactVersion,
   renderWithClient,
   sleep,
 } from './utils'
@@ -281,41 +282,169 @@ describe('useQueries', () => {
     await waitFor(() => rendered.getByText('data1: 5, data2: 10'))
     await waitFor(() => rendered.getByText('isFetching: false'))
 
-    await waitFor(() => expect(states.length).toBe(6))
-
-    expect(states[0]).toMatchObject([
-      {
-        status: 'loading',
-        data: undefined,
-        isPreviousData: false,
-        isFetching: true,
-      },
-      {
-        status: 'loading',
-        data: undefined,
-        isPreviousData: false,
-        isFetching: true,
-      },
-    ])
-    expect(states[1]).toMatchObject([
-      { status: 'success', data: 5, isPreviousData: false, isFetching: false },
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
-    expect(states[2]).toMatchObject([
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
-    expect(states[3]).toMatchObject([
-      { status: 'success', data: 5, isPreviousData: false, isFetching: true },
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
-    expect(states[4]).toMatchObject([
-      { status: 'success', data: 5, isPreviousData: false, isFetching: true },
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
-    expect(states[5]).toMatchObject([
-      { status: 'success', data: 5, isPreviousData: false, isFetching: false },
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
+    await waitFor(() =>
+      expect(states.length).toBe(reactVersion() === '18' ? 6 : 7),
+    )
+
+    if (reactVersion() === '18') {
+      expect(states[0]).toMatchObject([
+        {
+          status: 'loading',
+          data: undefined,
+          isPreviousData: false,
+          isFetching: true,
+        },
+        {
+          status: 'loading',
+          data: undefined,
+          isPreviousData: false,
+          isFetching: true,
+        },
+      ])
+      expect(states[1]).toMatchObject([
+        {
+          status: 'success',
+          data: 5,
+          isPreviousData: false,
+          isFetching: false,
+        },
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+      expect(states[2]).toMatchObject([
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+      expect(states[3]).toMatchObject([
+        { status: 'success', data: 5, isPreviousData: false, isFetching: true },
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+      expect(states[4]).toMatchObject([
+        { status: 'success', data: 5, isPreviousData: false, isFetching: true },
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+      expect(states[5]).toMatchObject([
+        {
+          status: 'success',
+          data: 5,
+          isPreviousData: false,
+          isFetching: false,
+        },
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+    }
+
+    if (reactVersion() === '19') {
+      expect(states[0]).toMatchObject([
+        {
+          status: 'loading',
+          data: undefined,
+          isPreviousData: false,
+          isFetching: true,
+        },
+        {
+          status: 'loading',
+          data: undefined,
+          isPreviousData: false,
+          isFetching: true,
+        },
+      ])
+      expect(states[1]).toMatchObject([
+        {
+          status: 'success',
+          data: 5,
+          isPreviousData: false,
+          isFetching: false,
+        },
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+      expect(states[2]).toMatchObject([
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+      expect(states[3]).toMatchObject([
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+      expect(states[4]).toMatchObject([
+        {
+          status: 'success',
+          data: 5,
+          isPreviousData: false,
+          isFetching: true,
+        },
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+      expect(states[5]).toMatchObject([
+        {
+          status: 'success',
+          data: 5,
+          isPreviousData: false,
+          isFetching: true,
+        },
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+      expect(states[6]).toMatchObject([
+        {
+          status: 'success',
+          data: 5,
+          isPreviousData: false,
+          isFetching: false,
+        },
+        {
+          status: 'success',
+          data: 10,
+          isPreviousData: false,
+          isFetching: false,
+        },
+      ])
+    }
   })
 
   it('handles type parameter - tuple of tuples', async () => {

package/src/__tests__/useQuery.test.tsx

@@ -11,6 +11,7 @@ import {
   mockNavigatorOnLine,
   mockVisibilityState,
   queryKey,
+  reactVersion,
   renderWithClient,
   setActTimeout,
   sleep,
@@ -6204,12 +6205,12 @@ describe('useQuery', () => {
     spy.mockClear()
     fireEvent.click(rendered.getByRole('button', { name: /1/ }))
     await waitFor(() => rendered.getByText('Rendered Id: 1'))
-    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toHaveBeenCalledTimes(reactVersion() === '19' ? 2 : 1)
 
     spy.mockClear()
     fireEvent.click(rendered.getByRole('button', { name: /2/ }))
     await waitFor(() => rendered.getByText('Rendered Id: 2'))
-    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toHaveBeenCalledTimes(reactVersion() === '18' ? 1 : 2)
   })
   it('should not cause an infinite render loop when using unstable callback ref', async () => {
     const key = queryKey()

package/src/__tests__/utils.tsx

@@ -121,3 +121,8 @@ export function setIsServer(isServer: boolean) {
     })
   }
 }
+
+export function reactVersion() {
+  const version = (process.env.REACTJS_VERSION || '19') as '17' | '18' | '19'
+  return version
+}