@tanstack/react-query 4.40.2 → 4.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.40.2",
+  "version": "4.42.0",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -39,23 +39,25 @@
   ],
   "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"
   },
   "dependencies": {
     "use-sync-external-store": "^1.2.0",
-    "@tanstack/query-core": "4.40.0"
+    "@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__/infiniteQueryOptions.test.tsx

@@ -0,0 +1,13 @@
+import { infiniteQueryOptions } from '../infiniteQueryOptions'
+
+describe('infiniteQueryOptions', () => {
+  it('should return the object received as a parameter without any modification.', () => {
+    const object = {
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      getNextPageParam: () => null,
+    } as const
+
+    expect(infiniteQueryOptions(object)).toStrictEqual(object)
+  })
+})

package/src/__tests__/infiniteQueryOptions.types.test.tsx

@@ -0,0 +1,111 @@
+import { expectTypeOf } from 'expect-type'
+import {
+  type InfiniteData,
+  type UseInfiniteQueryResult,
+  useInfiniteQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
+import { infiniteQueryOptions } from '../infiniteQueryOptions'
+import { doNotExecute } from './utils'
+import type {
+  DefinedUseInfiniteQueryResult,
+  UseSuspenseInfiniteQueryResult,
+} from '../types'
+
+const infiniteQuery = {
+  options: () =>
+    infiniteQueryOptions({
+      queryKey: ['key', 1] as const,
+      queryFn: () => Promise.resolve({ field: 'success' }),
+    }),
+  optionsWithInitialData: () =>
+    infiniteQueryOptions({
+      queryKey: ['key', 2] as const,
+      queryFn: () => Promise.resolve({ field: 'success' }),
+      initialData: () => ({ pageParams: [], pages: [{ field: 'success' }] }),
+    }),
+}
+
+describe('infiniteQueryOptions', () => {
+  it('should be used with useInfiniteQuery', () => {
+    doNotExecute(() => {
+      expectTypeOf(useInfiniteQuery(infiniteQuery.options())).toEqualTypeOf<
+        UseInfiniteQueryResult<{ field: string }>
+      >()
+
+      expectTypeOf(
+        useInfiniteQuery({
+          ...infiniteQuery.options(),
+          select: (data) => ({
+            pages: data.pages.map(({ field }) => field),
+            pageParams: data.pageParams,
+          }),
+        }),
+      ).toEqualTypeOf<UseInfiniteQueryResult<string>>()
+
+      expectTypeOf(
+        useInfiniteQuery(infiniteQuery.optionsWithInitialData()),
+      ).toEqualTypeOf<DefinedUseInfiniteQueryResult<{ field: string }>>()
+
+      expectTypeOf(
+        useInfiniteQuery({
+          ...infiniteQuery.optionsWithInitialData(),
+          select: (data) => ({
+            pages: data.pages.map(({ field }) => field),
+            pageParams: data.pageParams,
+          }),
+        }),
+      ).toEqualTypeOf<DefinedUseInfiniteQueryResult<string>>()
+
+      expectTypeOf(
+        useInfiniteQuery({
+          queryKey: ['key', 2] as const,
+          queryFn: () => Promise.resolve({ field: 'success' }),
+          initialData: () => ({
+            pages: [{ field: 'success' }],
+            pageParams: [],
+          }),
+          select: (data) => ({
+            pages: data.pages.map(({ field }) => field),
+            pageParams: data.pageParams,
+          }),
+        }),
+      ).toEqualTypeOf<DefinedUseInfiniteQueryResult<string>>()
+    })
+  })
+  it('should be used with useSuspenseInfiniteQuery', () => {
+    doNotExecute(() => {
+      expectTypeOf(
+        useSuspenseInfiniteQuery(infiniteQuery.options()),
+      ).toEqualTypeOf<UseSuspenseInfiniteQueryResult<{ field: string }>>()
+
+      expectTypeOf(
+        useSuspenseInfiniteQuery({
+          ...infiniteQuery.options(),
+          select: (data) => ({
+            pages: data.pages.map(({ field }) => field),
+            pageParams: data.pageParams,
+          }),
+        }),
+      ).toEqualTypeOf<UseSuspenseInfiniteQueryResult<string>>()
+    })
+  })
+  it('should be used with useQueryClient', () => {
+    doNotExecute(async () => {
+      const queryClient = useQueryClient()
+
+      queryClient.invalidateQueries(infiniteQuery.options())
+      queryClient.resetQueries(infiniteQuery.options())
+      queryClient.removeQueries(infiniteQuery.options())
+      queryClient.cancelQueries(infiniteQuery.options())
+      queryClient.prefetchQuery(infiniteQuery.options())
+      queryClient.refetchQueries(infiniteQuery.options())
+
+      expectTypeOf(
+        await queryClient.fetchQuery(infiniteQuery.options()),
+      ).toEqualTypeOf<InfiniteData<{ field: string }>>()
+    })
+  })
+})

package/src/__tests__/queryOptions.types.test.tsx

@@ -19,13 +19,14 @@ const queryFn = () => Promise.resolve({ field: 'success' })
 describe('queryOptions', () => {
   it('should be used with useQuery', () => {
     doNotExecute(() => {
-      const dd = useQuery(
-        queryOptions({
-          queryKey,
-          queryFn,
-        }),
-      )
-      expectTypeOf(dd).toEqualTypeOf<UseQueryResult<{ field: string }>>()
+      expectTypeOf(
+        useQuery(
+          queryOptions({
+            queryKey,
+            queryFn,
+          }),
+        ),
+      ).toEqualTypeOf<UseQueryResult<{ field: string }>>()
       expectTypeOf(
         useQuery({
           ...queryOptions({

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__/useSuspenseInfiniteQuery.types.test.tsx

@@ -0,0 +1,115 @@
+import { expectTypeOf } from 'expect-type'
+import { infiniteQueryOptions, useSuspenseInfiniteQuery } from '..'
+import { doNotExecute, sleep } from './utils'
+import type { UseSuspenseInfiniteQueryResult } from '..'
+
+import type { InfiniteData } from '@tanstack/react-query'
+
+const queryKey = ['key'] as const
+const queryFn = () => sleep(10).then(() => ({ text: 'response' }))
+
+describe('useSuspenseInfiniteQuery', () => {
+  it('type check', () => {
+    doNotExecute(() => {
+      // @ts-expect-error no arg
+      useSuspenseInfiniteQuery()
+
+      useSuspenseInfiniteQuery({
+        queryKey,
+        queryFn,
+        // @ts-expect-error no suspense
+        suspense: boolean,
+      })
+      useSuspenseInfiniteQuery({
+        queryKey,
+        queryFn,
+        // @ts-expect-error no useErrorBoundary
+        useErrorBoundary: boolean,
+      })
+      useSuspenseInfiniteQuery({
+        queryKey,
+        queryFn,
+        // @ts-expect-error no enabled
+        enabled: boolean,
+      })
+      useSuspenseInfiniteQuery({
+        queryKey,
+        queryFn,
+        // @ts-expect-error no placeholderData
+        placeholderData: 'placeholder',
+      })
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      useSuspenseInfiniteQuery({
+        queryKey,
+        queryFn,
+        // @ts-expect-error no isPlaceholderData
+      }).isPlaceholderData
+      useSuspenseInfiniteQuery({
+        queryKey,
+        queryFn,
+        //@ts-expect-error no networkMode
+        networkMode: 'always',
+      })
+
+      const infiniteQuery = useSuspenseInfiniteQuery({ queryKey, queryFn })
+      expectTypeOf(infiniteQuery).toEqualTypeOf<
+        UseSuspenseInfiniteQueryResult<{ text: string }>
+      >()
+      expectTypeOf(infiniteQuery.data).toEqualTypeOf<
+        InfiniteData<{ text: string }>
+      >()
+      expectTypeOf(infiniteQuery.status).toEqualTypeOf<'error' | 'success'>()
+
+      const selectedInfiniteQuery = useSuspenseInfiniteQuery({
+        queryKey,
+        queryFn,
+        select: (data) => ({
+          pages: data.pages.map(({ text }) => text),
+          pageParams: data.pageParams,
+        }),
+      })
+      expectTypeOf(selectedInfiniteQuery).toEqualTypeOf<
+        UseSuspenseInfiniteQueryResult<string>
+      >()
+      expectTypeOf(selectedInfiniteQuery.data).toEqualTypeOf<
+        InfiniteData<string>
+      >()
+      expectTypeOf(selectedInfiniteQuery.status).toEqualTypeOf<
+        'error' | 'success'
+      >()
+
+      const options = infiniteQueryOptions({
+        queryKey,
+        queryFn,
+      })
+
+      const infiniteQueryWithOptions = useSuspenseInfiniteQuery(options)
+      expectTypeOf(infiniteQueryWithOptions).toEqualTypeOf<
+        UseSuspenseInfiniteQueryResult<{ text: string }>
+      >()
+      expectTypeOf(infiniteQueryWithOptions.data).toEqualTypeOf<
+        InfiniteData<{ text: string }>
+      >()
+      expectTypeOf(infiniteQueryWithOptions.status).toEqualTypeOf<
+        'error' | 'success'
+      >()
+
+      const selectedInfiniteQueryWithOptions = useSuspenseInfiniteQuery({
+        ...options,
+        select: (data) => ({
+          pages: data.pages.map(({ text }) => text),
+          pageParams: data.pageParams,
+        }),
+      })
+      expectTypeOf(selectedInfiniteQueryWithOptions).toEqualTypeOf<
+        UseSuspenseInfiniteQueryResult<string>
+      >()
+      expectTypeOf(selectedInfiniteQueryWithOptions.data).toEqualTypeOf<
+        InfiniteData<string>
+      >()
+      expectTypeOf(selectedInfiniteQueryWithOptions.status).toEqualTypeOf<
+        'error' | 'success'
+      >()
+    })
+  })
+})