@tanstack/react-query 5.0.0-alpha.4 → 5.0.0-alpha.43

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

@@ -4,6 +4,7 @@ import ReactDOMTestUtils from 'react-dom/test-utils'
 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 { vi } from 'vitest'
 
 import {
   useQuery,
@@ -46,12 +47,12 @@ describe('Server side rendering with de/rehydration', () => {
     globalThis.IS_REACT_ACT_ENVIRONMENT = previousIsReactActEnvironment
   })
   it('should not mismatch on success', async () => {
-    const consoleMock = jest.spyOn(console, 'error')
+    const consoleMock = vi.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
-    const fetchDataSuccess = jest.fn<
-      ReturnType<typeof fetchData>,
-      Parameters<typeof fetchData>
+    const fetchDataSuccess = vi.fn<
+      Parameters<typeof fetchData>,
+      ReturnType<typeof fetchData>
     >(fetchData)
 
     // -- Shared part --
@@ -127,10 +128,10 @@ describe('Server side rendering with de/rehydration', () => {
   })
 
   it('should not mismatch on error', async () => {
-    const consoleMock = jest.spyOn(console, 'error')
+    const consoleMock = vi.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
-    const fetchDataError = jest.fn(() => {
+    const fetchDataError = vi.fn(() => {
       throw new Error('fetchDataError')
     })
 
@@ -207,12 +208,12 @@ describe('Server side rendering with de/rehydration', () => {
   })
 
   it('should not mismatch on queries that were not prefetched', async () => {
-    const consoleMock = jest.spyOn(console, 'error')
+    const consoleMock = vi.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
-    const fetchDataSuccess = jest.fn<
-      ReturnType<typeof fetchData>,
-      Parameters<typeof fetchData>
+    const fetchDataSuccess = vi.fn<
+      Parameters<typeof fetchData>,
+      ReturnType<typeof fetchData>
     >(fetchData)
 
     // -- Shared part --

package/src/__tests__/ssr.test.tsx

@@ -1,20 +1,17 @@
-/**
- * @jest-environment node
- */
-
 import * as React from 'react'
 // @ts-ignore
 import { renderToString } from 'react-dom/server'
 
 import { sleep, queryKey, createQueryClient } from './utils'
 import { useQuery, QueryClientProvider, QueryCache, useInfiniteQuery } from '..'
+import { vi } from 'vitest'
 
 describe('Server Side Rendering', () => {
   it('should not trigger fetch', () => {
     const queryCache = new QueryCache()
     const queryClient = createQueryClient({ queryCache })
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
+    const queryFn = vi.fn().mockReturnValue('data')
 
     function Page() {
       const query = useQuery({ queryKey: key, queryFn })
@@ -57,7 +54,7 @@ describe('Server Side Rendering', () => {
     const queryCache = new QueryCache()
     const queryClient = createQueryClient({ queryCache })
     const key = queryKey()
-    const queryFn = jest.fn(() => {
+    const queryFn = vi.fn(() => {
       sleep(10)
       return 'data'
     })
@@ -125,7 +122,7 @@ describe('Server Side Rendering', () => {
     const queryCache = new QueryCache()
     const queryClient = createQueryClient({ queryCache })
     const key = queryKey()
-    const queryFn = jest.fn(async () => {
+    const queryFn = vi.fn(async () => {
       await sleep(5)
       return 'page 1'
     })

package/src/__tests__/suspense.test.tsx

@@ -11,6 +11,7 @@ import {
   useQueryErrorResetBoundary,
 } from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
+import { vi } from 'vitest'
 
 describe("useQuery's in Suspense mode", () => {
   const queryCache = new QueryCache()
@@ -119,7 +120,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn twice when used in Suspense mode', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => {
       sleep(10)
       return 'data'
@@ -189,91 +190,9 @@ describe("useQuery's in Suspense mode", () => {
     expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(0)
   })
 
-  it('should call onSuccess on the first successful call', async () => {
-    const key = queryKey()
-
-    const successFn = jest.fn()
-
-    function Page() {
-      useQuery({
-        queryKey: [key],
-        queryFn: async () => {
-          await sleep(10)
-          return key
-        },
-        suspense: true,
-        select: () => 'selected',
-        onSuccess: successFn,
-      })
-
-      return <>rendered</>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <React.Suspense fallback="loading">
-        <Page />
-      </React.Suspense>,
-    )
-
-    await waitFor(() => rendered.getByText('rendered'))
-
-    await waitFor(() => expect(successFn).toHaveBeenCalledTimes(1))
-    await waitFor(() => expect(successFn).toHaveBeenCalledWith('selected'))
-  })
-
-  it('should call every onSuccess handler within a suspense boundary', async () => {
-    const key = queryKey()
-
-    const successFn1 = jest.fn()
-    const successFn2 = jest.fn()
-
-    function FirstComponent() {
-      useQuery({
-        queryKey: key,
-        queryFn: () => {
-          sleep(10)
-          return 'data'
-        },
-        suspense: true,
-        onSuccess: successFn1,
-      })
-
-      return <span>first</span>
-    }
-
-    function SecondComponent() {
-      useQuery({
-        queryKey: key,
-        queryFn: () => {
-          sleep(10)
-          return 'data'
-        },
-
-        suspense: true,
-        onSuccess: successFn2,
-      })
-
-      return <span>second</span>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <React.Suspense fallback="loading">
-        <FirstComponent />
-        <SecondComponent />
-      </React.Suspense>,
-    )
-
-    await waitFor(() => rendered.getByText('second'))
-
-    await waitFor(() => expect(successFn1).toHaveBeenCalledTimes(1))
-    await waitFor(() => expect(successFn2).toHaveBeenCalledTimes(1))
-  })
-
   // https://github.com/tannerlinsley/react-query/issues/468
   it('should reset error state if new component instances are mounted', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -345,7 +264,7 @@ describe("useQuery's in Suspense mode", () => {
   })
 
   it('should retry fetch if the reset error boundary has been reset', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -510,7 +429,7 @@ describe("useQuery's in Suspense mode", () => {
   })
 
   it('should retry fetch if the reset error boundary has been reset with global hook', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -574,7 +493,7 @@ describe("useQuery's in Suspense mode", () => {
   })
 
   it('should throw errors to the error boundary by default', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -615,7 +534,7 @@ describe("useQuery's in Suspense mode", () => {
     consoleMock.mockRestore()
   })
 
-  it('should not throw errors to the error boundary when throwErrors: false', async () => {
+  it('should not throw errors to the error boundary when throwOnError: false', async () => {
     const key = queryKey()
 
     function Page() {
@@ -627,7 +546,7 @@ describe("useQuery's in Suspense mode", () => {
         },
         retry: false,
         suspense: true,
-        throwErrors: false,
+        throwOnError: false,
       })
       return <div>rendered</div>
     }
@@ -654,8 +573,8 @@ describe("useQuery's in Suspense mode", () => {
     await waitFor(() => rendered.getByText('rendered'))
   })
 
-  it('should throw errors to the error boundary when a throwErrors function returns true', async () => {
-    const consoleMock = jest
+  it('should throw errors to the error boundary when a throwOnError function returns true', async () => {
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -669,7 +588,7 @@ describe("useQuery's in Suspense mode", () => {
         },
         retry: false,
         suspense: true,
-        throwErrors: (err) => err.message !== 'Local Error',
+        throwOnError: (err) => err.message !== 'Local Error',
       })
       return <div>rendered</div>
     }
@@ -697,7 +616,7 @@ describe("useQuery's in Suspense mode", () => {
     consoleMock.mockRestore()
   })
 
-  it('should not throw errors to the error boundary when a throwErrors function returns false', async () => {
+  it('should not throw errors to the error boundary when a throwOnError function returns false', async () => {
     const key = queryKey()
 
     function Page() {
@@ -709,7 +628,7 @@ describe("useQuery's in Suspense mode", () => {
         },
         retry: false,
         suspense: true,
-        throwErrors: (err) => err.message !== 'Local Error',
+        throwOnError: (err) => err.message !== 'Local Error',
       })
       return <div>rendered</div>
     }
@@ -739,7 +658,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn when not enabled', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<Promise<string>, unknown[]>()
+    const queryFn = vi.fn<unknown[], Promise<string>>()
     queryFn.mockImplementation(async () => {
       await sleep(10)
       return '23'
@@ -781,7 +700,7 @@ describe("useQuery's in Suspense mode", () => {
   })
 
   it('should error catched in error boundary without infinite loop', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -854,7 +773,7 @@ describe("useQuery's in Suspense mode", () => {
   })
 
   it('should error catched in error boundary without infinite loop when query keys changed', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     let succeed = true
@@ -921,7 +840,7 @@ describe("useQuery's in Suspense mode", () => {
   })
 
   it('should error catched in error boundary without infinite loop when enabled changed', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     function Page() {

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -14,6 +14,8 @@ import type {
   UseInfiniteQueryResult,
 } from '..'
 import { QueryCache, useInfiniteQuery, keepPreviousData } from '..'
+import { vi } from 'vitest'
+import type { Mock } from 'vitest'
 
 interface Result {
   items: number[]
@@ -680,14 +682,14 @@ describe('useInfiniteQuery', () => {
   it('should silently cancel an ongoing fetchNextPage request when another fetchNextPage is invoked', async () => {
     const key = queryKey()
     const start = 10
-    const onAborts: jest.Mock<any, any>[] = []
-    const abortListeners: jest.Mock<any, any>[] = []
-    const fetchPage = jest.fn<
-      Promise<number>,
-      [QueryFunctionContext<typeof key, number>]
+    const onAborts: Mock<any, any>[] = []
+    const abortListeners: Mock<any, any>[] = []
+    const fetchPage = vi.fn<
+      [QueryFunctionContext<typeof key, number>],
+      Promise<number>
     >(async ({ pageParam, signal }) => {
-      const onAbort = jest.fn()
-      const abortListener = jest.fn()
+      const onAbort = vi.fn()
+      const abortListener = vi.fn()
       onAborts.push(onAbort)
       abortListeners.push(abortListener)
       signal.onabort = onAbort
@@ -756,14 +758,14 @@ describe('useInfiniteQuery', () => {
   it('should not cancel an ongoing fetchNextPage request when another fetchNextPage is invoked if `cancelRefetch: false` is used ', async () => {
     const key = queryKey()
     const start = 10
-    const onAborts: jest.Mock<any, any>[] = []
-    const abortListeners: jest.Mock<any, any>[] = []
-    const fetchPage = jest.fn<
-      Promise<number>,
-      [QueryFunctionContext<typeof key, number>]
+    const onAborts: Mock<any, any>[] = []
+    const abortListeners: Mock<any, any>[] = []
+    const fetchPage = vi.fn<
+      [QueryFunctionContext<typeof key, number>],
+      Promise<number>
     >(async ({ pageParam, signal }) => {
-      const onAbort = jest.fn()
-      const abortListener = jest.fn()
+      const onAbort = vi.fn()
+      const abortListener = vi.fn()
       onAborts.push(onAbort)
       abortListeners.push(abortListener)
       signal.onabort = onAbort
@@ -1491,11 +1493,11 @@ describe('useInfiniteQuery', () => {
 
   it('should cancel the query function when there are no more subscriptions', async () => {
     const key = queryKey()
-    let cancelFn: jest.Mock = jest.fn()
+    let cancelFn: Mock = vi.fn()
 
     const queryFn = ({ signal }: { signal?: AbortSignal }) => {
       const promise = new Promise<string>((resolve, reject) => {
-        cancelFn = jest.fn(() => reject('Cancelled'))
+        cancelFn = vi.fn(() => reject('Cancelled'))
         signal?.addEventListener('abort', cancelFn)
         sleep(1000).then(() => resolve('OK'))
       })

package/src/__tests__/useInfiniteQuery.type.test.tsx

@@ -20,7 +20,23 @@ describe('pageParam', () => {
     })
   })
 
-  it('there should be no pageParam passed to queryFn of useQuery', () => {
+  it('direction should be passed to queryFn of useInfiniteQuery', () => {
+    doNotExecute(() => {
+      useInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: ({ direction }) => {
+          const result: Expect<
+            Equal<'forward' | 'backward', typeof direction>
+          > = true
+          return result
+        },
+        defaultPageParam: 1,
+        getNextPageParam: () => undefined,
+      })
+    })
+  })
+
+  it('there should be no pageParam passed to the queryFn of useQuery', () => {
     doNotExecute(() => {
       useQuery({
         queryKey: ['key'],
@@ -32,6 +48,18 @@ describe('pageParam', () => {
     })
   })
 
+  it('there should be no direction passed to the queryFn of useQuery', () => {
+    doNotExecute(() => {
+      useQuery({
+        queryKey: ['key'],
+        // @ts-expect-error there should be no pageParam passed to queryFn of useQuery
+        queryFn: ({ direction }) => {
+          return String(direction)
+        },
+      })
+    })
+  })
+
   it('defaultPageParam should define type of param passed to queryFunctionContext for fetchInfiniteQuery', () => {
     doNotExecute(() => {
       const queryClient = new QueryClient()
@@ -60,7 +88,6 @@ describe('pageParam', () => {
     })
   })
 })
-
 describe('select', () => {
   it('should still return paginated data if no select result', () => {
     doNotExecute(() => {
@@ -101,24 +128,78 @@ describe('select', () => {
       return result
     })
   })
-  it('should pass transformed data to onSuccess', () => {
+})
+describe('getNextPageParam / getPreviousPageParam', () => {
+  it('should get typed params', () => {
     doNotExecute(() => {
       const infiniteQuery = useInfiniteQuery({
         queryKey: ['key'],
         queryFn: ({ pageParam }) => {
-          return pageParam * 5
+          return String(pageParam)
         },
         defaultPageParam: 1,
-        getNextPageParam: () => undefined,
-        select: (data) => {
-          return {
-            ...data,
-            pages: data.pages.map((page) => page.toString()),
-          }
+        getNextPageParam: (
+          lastPage,
+          allPages,
+          lastPageParam,
+          allPageParams,
+        ) => {
+          doNotExecute(() => {
+            const lastPageResult: Expect<Equal<string, typeof lastPage>> = true
+            return lastPageResult
+          })
+          doNotExecute(() => {
+            const allPagesResult: Expect<
+              Equal<Array<string>, typeof allPages>
+            > = true
+            return allPagesResult
+          })
+          doNotExecute(() => {
+            const lastPageParamResult: Expect<
+              Equal<number, typeof lastPageParam>
+            > = true
+            return lastPageParamResult
+          })
+          doNotExecute(() => {
+            const allPageParamsResult: Expect<
+              Equal<Array<number>, typeof allPageParams>
+            > = true
+            return allPageParamsResult
+          })
+
+          return undefined
         },
-        onSuccess: (data) => {
-          const result: Expect<Equal<InfiniteData<string>, typeof data>> = true
-          doNotExecute(() => result)
+        getPreviousPageParam: (
+          firstPage,
+          allPages,
+          firstPageParam,
+          allPageParams,
+        ) => {
+          doNotExecute(() => {
+            const firstPageResult: Expect<Equal<string, typeof firstPage>> =
+              true
+            return firstPageResult
+          })
+          doNotExecute(() => {
+            const allPagesResult: Expect<
+              Equal<Array<string>, typeof allPages>
+            > = true
+            return allPagesResult
+          })
+          doNotExecute(() => {
+            const firstPageParamResult: Expect<
+              Equal<number, typeof firstPageParam>
+            > = true
+            return firstPageParamResult
+          })
+          doNotExecute(() => {
+            const allPageParamsResult: Expect<
+              Equal<Array<number>, typeof allPageParams>
+            > = true
+            return allPageParamsResult
+          })
+
+          return undefined
         },
       })
 

package/src/__tests__/useMutation.test.tsx

@@ -13,6 +13,7 @@ import {
   setActTimeout,
   sleep,
 } from './utils'
+import { vi } from 'vitest'
 
 describe('useMutation', () => {
   const queryCache = new QueryCache()
@@ -95,8 +96,8 @@ describe('useMutation', () => {
 
   it('should be able to call `onSuccess` and `onSettled` after each successful mutate', async () => {
     let count = 0
-    const onSuccessMock = jest.fn()
-    const onSettledMock = jest.fn()
+    const onSuccessMock = vi.fn()
+    const onSettledMock = vi.fn()
 
     function Page() {
       const { mutate } = useMutation({
@@ -151,7 +152,7 @@ describe('useMutation', () => {
     let count = 0
     type Value = { count: number }
 
-    const mutateFn = jest.fn<Promise<Value>, [value: Value]>()
+    const mutateFn = vi.fn<[value: Value], Promise<Value>>()
 
     mutateFn.mockImplementationOnce(() => {
       return Promise.reject(new Error('Error test Jonas'))
@@ -197,8 +198,8 @@ describe('useMutation', () => {
   })
 
   it('should be able to call `onError` and `onSettled` after each failed mutate', async () => {
-    const onErrorMock = jest.fn()
-    const onSettledMock = jest.fn()
+    const onErrorMock = vi.fn()
+    const onSettledMock = vi.fn()
     let count = 0
 
     function Page() {
@@ -488,7 +489,7 @@ describe('useMutation', () => {
 
   it('should call onMutate even if paused', async () => {
     const onlineMock = mockNavigatorOnLine(false)
-    const onMutate = jest.fn()
+    const onMutate = vi.fn()
     let count = 0
 
     function Page() {
@@ -687,8 +688,8 @@ describe('useMutation', () => {
     fireEvent.click(getByText('unmount'))
   })
 
-  it('should be able to throw an error when throwErrors is set to true', async () => {
-    const consoleMock = jest
+  it('should be able to throw an error when throwOnError is set to true', async () => {
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     function Page() {
@@ -698,7 +699,7 @@ describe('useMutation', () => {
           err.stack = ''
           return Promise.reject(err)
         },
-        throwErrors: true,
+        throwOnError: true,
       })
 
       return (
@@ -734,8 +735,8 @@ describe('useMutation', () => {
     consoleMock.mockRestore()
   })
 
-  it('should be able to throw an error when throwErrors is a function that returns true', async () => {
-    const consoleMock = jest
+  it('should be able to throw an error when throwOnError is a function that returns true', async () => {
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     let boundary = false
@@ -746,7 +747,7 @@ describe('useMutation', () => {
           err.stack = ''
           return Promise.reject(err)
         },
-        throwErrors: () => {
+        throwOnError: () => {
           boundary = !boundary
           return !boundary
         },
@@ -788,8 +789,8 @@ describe('useMutation', () => {
   })
 
   it('should pass meta to mutation', async () => {
-    const errorMock = jest.fn()
-    const successMock = jest.fn()
+    const errorMock = vi.fn()
+    const successMock = vi.fn()
 
     const queryClientMutationMeta = createQueryClient({
       mutationCache: new MutationCache({
@@ -847,10 +848,10 @@ describe('useMutation', () => {
   })
 
   it('should call cache callbacks when unmounted', async () => {
-    const onSuccess = jest.fn()
-    const onSuccessMutate = jest.fn()
-    const onSettled = jest.fn()
-    const onSettledMutate = jest.fn()
+    const onSuccess = vi.fn()
+    const onSuccessMutate = vi.fn()
+    const onSettled = vi.fn()
+    const onSettledMutate = vi.fn()
     const mutationKey = queryKey()
     let count = 0
 
@@ -919,10 +920,10 @@ describe('useMutation', () => {
   })
 
   it('should call mutate callbacks only for the last observer', async () => {
-    const onSuccess = jest.fn()
-    const onSuccessMutate = jest.fn()
-    const onSettled = jest.fn()
-    const onSettledMutate = jest.fn()
+    const onSuccess = vi.fn()
+    const onSuccessMutate = vi.fn()
+    const onSettled = vi.fn()
+    const onSettledMutate = vi.fn()
     let count = 0
 
     function Page() {
@@ -1008,7 +1009,7 @@ describe('useMutation', () => {
 
   it('should go to error state if onSuccess callback errors', async () => {
     const error = new Error('error from onSuccess')
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const mutation = useMutation({
@@ -1076,7 +1077,7 @@ describe('useMutation', () => {
   it('should go to error state if onSettled callback errors', async () => {
     const error = new Error('error from onSettled')
     const mutateFnError = new Error('mutateFnError')
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const mutation = useMutation({