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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.6",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "react-error-boundary": "^3.1.4"
   },
   "dependencies": {
-    "@tanstack/query-core": "5.0.0-alpha.3"
+    "@tanstack/query-core": "5.0.0-alpha.6"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -54,7 +54,7 @@
     "clean": "rimraf ./build",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "test:types": "tsc",
-    "test:lib": "jest --config ./jest.config.ts",
+    "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
     "build:types": "tsc --build"
   }

package/src/__tests__/HydrationBoundary.test.tsx

@@ -8,9 +8,10 @@ import {
   useQuery,
   dehydrate,
   HydrationBoundary,
-} from '@tanstack/react-query'
+} from '..'
 import { createQueryClient, sleep } from './utils'
 import * as coreModule from '@tanstack/query-core'
+import { vi } from 'vitest'
 
 describe('React hydration', () => {
   const fetchData: (value: string) => Promise<string> = (value) =>
@@ -213,7 +214,7 @@ describe('React hydration', () => {
     const queryCache = new QueryCache()
     const queryClient = createQueryClient({ queryCache })
 
-    const hydrateSpy = jest.spyOn(coreModule, 'hydrate')
+    const hydrateSpy = vi.spyOn(coreModule, 'hydrate')
 
     function Page() {
       return null
@@ -237,7 +238,7 @@ describe('React hydration', () => {
     const queryCache = new QueryCache()
     const queryClient = createQueryClient({ queryCache })
 
-    const hydrateSpy = jest.spyOn(coreModule, 'hydrate')
+    const hydrateSpy = vi.spyOn(coreModule, 'hydrate')
 
     function Page() {
       return null

package/src/__tests__/QueryClientProvider.test.tsx

@@ -3,6 +3,7 @@ import { render, waitFor } from '@testing-library/react'
 
 import { sleep, queryKey, createQueryClient } from './utils'
 import { QueryClientProvider, QueryCache, useQuery, useQueryClient } from '..'
+import { vi } from 'vitest'
 
 describe('QueryClientProvider', () => {
   test('sets a specific cache for all queries to use', async () => {
@@ -142,7 +143,7 @@ describe('QueryClientProvider', () => {
 
   describe('useQueryClient', () => {
     test('should throw an error if no query client has been set', () => {
-      const consoleMock = jest
+      const consoleMock = vi
         .spyOn(console, 'error')
         .mockImplementation(() => undefined)
 

package/src/__tests__/QueryResetErrorBoundary.test.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 import { QueryCache, QueryErrorResetBoundary, useQuery } from '..'
+import { vi } from 'vitest'
 
 // TODO: This should be removed with the types for react-error-boundary get updated.
 declare module 'react-error-boundary' {
@@ -17,7 +18,7 @@ describe('QueryErrorResetBoundary', () => {
   const queryClient = createQueryClient({ queryCache })
 
   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()
@@ -75,7 +76,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should not throw error if query is disabled', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -139,7 +140,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should not throw error if query is disabled, and refetch if query becomes enabled again', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -205,7 +206,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should throw error if query is disabled and manually refetched', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -267,7 +268,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should not retry fetch if the reset error boundary has not been reset', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -325,7 +326,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should retry fetch if the reset error boundary has been reset and the query contains data from a previous fetch', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -385,7 +386,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should not retry fetch if the reset error boundary has not been reset after a previous reset', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -453,7 +454,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should throw again on error after the reset error boundary has been reset', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -511,7 +512,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should never render the component while the query is in error state', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -578,7 +579,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should render children', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -602,7 +603,7 @@ describe('QueryErrorResetBoundary', () => {
   })
 
   it('should show error boundary when using tracked queries even though we do not track the error field', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 

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'
@@ -192,7 +193,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should call onSuccess on the first successful call', async () => {
     const key = queryKey()
 
-    const successFn = jest.fn()
+    const successFn = vi.fn()
 
     function Page() {
       useQuery({
@@ -225,8 +226,8 @@ describe("useQuery's in Suspense mode", () => {
   it('should call every onSuccess handler within a suspense boundary', async () => {
     const key = queryKey()
 
-    const successFn1 = jest.fn()
-    const successFn2 = jest.fn()
+    const successFn1 = vi.fn()
+    const successFn2 = vi.fn()
 
     function FirstComponent() {
       useQuery({
@@ -273,7 +274,7 @@ describe("useQuery's in Suspense mode", () => {
 
   // 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 +346,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 +511,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 +575,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()
@@ -655,7 +656,7 @@ describe("useQuery's in Suspense mode", () => {
   })
 
   it('should throw errors to the error boundary when a throwErrors function returns true', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -739,7 +740,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 +782,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 +855,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 +922,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(() => {
@@ -129,3 +156,84 @@ describe('select', () => {
     })
   })
 })
+describe('getNextPageParam / getPreviousPageParam', () => {
+  it('should get typed params', () => {
+    doNotExecute(() => {
+      const infiniteQuery = useInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: ({ pageParam }) => {
+          return String(pageParam)
+        },
+        defaultPageParam: 1,
+        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
+        },
+        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
+        },
+      })
+
+      const result: Expect<
+        Equal<InfiniteData<string> | undefined, (typeof infiniteQuery)['data']>
+      > = true
+      return result
+    })
+  })
+})