@tanstack/query-core 5.0.0-alpha.2 → 5.0.0-alpha.21

package/src/queryObserver.ts

@@ -17,11 +17,11 @@ import type {
   QueryOptions,
   RefetchOptions,
 } from './types'
-import type { Query, QueryState, Action, FetchOptions } from './query'
+import type { Query, QueryState, FetchOptions } from './query'
 import type { QueryClient } from './queryClient'
 import { focusManager } from './focusManager'
 import { Subscribable } from './subscribable'
-import { canFetch, isCancelledError } from './retryer'
+import { canFetch } from './retryer'
 
 type QueryObserverListener<TData, TError> = (
   result: QueryObserverResult<TData, TError>,
@@ -29,8 +29,6 @@ type QueryObserverListener<TData, TError> = (
 
 export interface NotifyOptions {
   listeners?: boolean
-  onError?: boolean
-  onSuccess?: boolean
 }
 
 export interface ObserverFetchOptions extends FetchOptions {
@@ -64,10 +62,12 @@ export class QueryObserver<
     TQueryData,
     TQueryKey
   >
-  #previousQueryResult?: QueryObserverResult<TData, TError>
   #selectError: TError | null
   #selectFn?: (data: TQueryData) => TData
   #selectResult?: TData
+  // This property keeps track of the last defined query data.
+  // It will be used to pass the previous data to the placeholder function between renders.
+  #lastDefinedQueryData?: TQueryData
   #staleTimeoutId?: ReturnType<typeof setTimeout>
   #refetchIntervalId?: ReturnType<typeof setInterval>
   #currentRefetchInterval?: number | false
@@ -414,9 +414,6 @@ export class QueryObserver<
     const queryInitialState = queryChange
       ? query.state
       : this.#currentQueryInitialState
-    const prevQueryResult = queryChange
-      ? this.#currentResult
-      : this.#previousQueryResult
 
     const { state } = query
     let { error, errorUpdatedAt, fetchStatus, status } = state
@@ -490,7 +487,7 @@ export class QueryObserver<
           typeof options.placeholderData === 'function'
             ? (
                 options.placeholderData as unknown as PlaceholderDataFunction<TQueryData>
-              )(prevQueryResult?.data as TQueryData | undefined)
+              )(this.#lastDefinedQueryData)
             : options.placeholderData
         if (options.select && typeof placeholderData !== 'undefined') {
           try {
@@ -504,7 +501,11 @@ export class QueryObserver<
 
       if (typeof placeholderData !== 'undefined') {
         status = 'success'
-        data = replaceData(prevResult?.data, placeholderData, options) as TData
+        data = replaceData(
+          prevResult?.data,
+          placeholderData as unknown,
+          options,
+        ) as TData
         isPlaceholderData = true
       }
     }
@@ -568,6 +569,9 @@ export class QueryObserver<
       return
     }
 
+    if (this.#currentResultState.data !== undefined) {
+      this.#lastDefinedQueryData = this.#currentResultState.data
+    }
     this.#currentResult = nextResult
 
     // Determine which callbacks to trigger
@@ -619,7 +623,6 @@ export class QueryObserver<
       | undefined
     this.#currentQuery = query
     this.#currentQueryInitialState = query.state
-    this.#previousQueryResult = this.#currentResult
 
     if (this.hasListeners()) {
       prevQuery?.removeObserver(this)
@@ -627,16 +630,8 @@ export class QueryObserver<
     }
   }
 
-  onQueryUpdate(action: Action<TData, TError>): void {
-    const notifyOptions: NotifyOptions = {}
-
-    if (action.type === 'success') {
-      notifyOptions.onSuccess = !action.manual
-    } else if (action.type === 'error' && !isCancelledError(action.error)) {
-      notifyOptions.onError = true
-    }
-
-    this.#updateResult(notifyOptions)
+  onQueryUpdate(): void {
+    this.#updateResult()
 
     if (this.hasListeners()) {
       this.#updateTimers()
@@ -645,16 +640,7 @@ export class QueryObserver<
 
   #notify(notifyOptions: NotifyOptions): void {
     notifyManager.batch(() => {
-      // First trigger the configuration callbacks
-      if (notifyOptions.onSuccess) {
-        this.options.onSuccess?.(this.#currentResult.data!)
-        this.options.onSettled?.(this.#currentResult.data, null)
-      } else if (notifyOptions.onError) {
-        this.options.onError?.(this.#currentResult.error!)
-        this.options.onSettled?.(undefined, this.#currentResult.error)
-      }
-
-      // Then trigger the listeners
+      // First, trigger the listeners
       if (notifyOptions.listeners) {
         this.listeners.forEach((listener) => {
           listener(this.#currentResult)

package/src/tests/focusManager.test.tsx

@@ -1,17 +1,18 @@
 import { sleep } from '../utils'
 import { FocusManager } from '../focusManager'
 import { setIsServer } from './utils'
+import { vi } from 'vitest'
 
 describe('focusManager', () => {
   let focusManager: FocusManager
   beforeEach(() => {
-    jest.resetModules()
+    vi.resetModules()
     focusManager = new FocusManager()
   })
 
   it('should call previous remove handler when replacing an event listener', () => {
-    const remove1Spy = jest.fn()
-    const remove2Spy = jest.fn()
+    const remove1Spy = vi.fn()
+    const remove2Spy = vi.fn()
 
     focusManager.setEventListener(() => remove1Spy)
     focusManager.setEventListener(() => remove2Spy)
@@ -39,7 +40,7 @@ describe('focusManager', () => {
   })
 
   it('should not notify listeners on focus if already focused', async () => {
-    const subscriptionSpy = jest.fn()
+    const subscriptionSpy = vi.fn()
     const unsubscribe = focusManager.subscribe(subscriptionSpy)
 
     focusManager.setFocused(true)
@@ -66,7 +67,7 @@ describe('focusManager', () => {
   test('cleanup (removeEventListener) should not be called if window is not defined', async () => {
     const restoreIsServer = setIsServer(true)
 
-    const removeEventListenerSpy = jest.spyOn(globalThis, 'removeEventListener')
+    const removeEventListenerSpy = vi.spyOn(globalThis, 'removeEventListener')
 
     const unsubscribe = focusManager.subscribe(() => undefined)
 
@@ -83,7 +84,7 @@ describe('focusManager', () => {
     // @ts-expect-error
     globalThis.window.addEventListener = undefined
 
-    const removeEventListenerSpy = jest.spyOn(globalThis, 'removeEventListener')
+    const removeEventListenerSpy = vi.spyOn(globalThis, 'removeEventListener')
 
     const unsubscribe = focusManager.subscribe(() => undefined)
 
@@ -95,8 +96,8 @@ describe('focusManager', () => {
   })
 
   it('should replace default window listener when a new event listener is set', async () => {
-    const unsubscribeSpy = jest.fn().mockImplementation(() => undefined)
-    const handlerSpy = jest.fn().mockImplementation(() => unsubscribeSpy)
+    const unsubscribeSpy = vi.fn().mockImplementation(() => undefined)
+    const handlerSpy = vi.fn().mockImplementation(() => unsubscribeSpy)
 
     focusManager.setEventListener(() => handlerSpy())
 
@@ -115,12 +116,9 @@ describe('focusManager', () => {
   })
 
   test('should call removeEventListener when last listener unsubscribes', () => {
-    const addEventListenerSpy = jest.spyOn(
-      globalThis.window,
-      'addEventListener',
-    )
+    const addEventListenerSpy = vi.spyOn(globalThis.window, 'addEventListener')
 
-    const removeEventListenerSpy = jest.spyOn(
+    const removeEventListenerSpy = vi.spyOn(
       globalThis.window,
       'removeEventListener',
     )
@@ -136,7 +134,7 @@ describe('focusManager', () => {
   })
 
   test('should keep setup function even if last listener unsubscribes', () => {
-    const setupSpy = jest.fn().mockImplementation(() => () => undefined)
+    const setupSpy = vi.fn().mockImplementation(() => () => undefined)
 
     focusManager.setEventListener(setupSpy)
 

package/src/tests/hydration.test.tsx

@@ -6,6 +6,7 @@ import {
 } from './utils'
 import { QueryCache } from '../queryCache'
 import { dehydrate, hydrate } from '../hydration'
+import { vi } from 'vitest'
 
 async function fetchData<TData>(value: TData, ms?: number): Promise<TData> {
   await sleep(ms || 0)
@@ -67,7 +68,7 @@ describe('dehydration and rehydration', () => {
       key: [{ nestedKey: 1 }],
     })
 
-    const fetchDataAfterHydration = jest.fn<unknown, unknown[]>()
+    const fetchDataAfterHydration = vi.fn<unknown[], unknown>()
     await hydrationClient.prefetchQuery({
       queryKey: ['string'],
       queryFn: fetchDataAfterHydration,
@@ -112,7 +113,9 @@ describe('dehydration and rehydration', () => {
       queryFn: () => fetchData('string'),
     })
 
-    const dehydrated = dehydrate(queryClient, { dehydrateQueries: false })
+    const dehydrated = dehydrate(queryClient, {
+      shouldDehydrateQuery: () => false,
+    })
 
     expect(dehydrated.queries.length).toBe(0)
 
@@ -192,7 +195,7 @@ describe('dehydration and rehydration', () => {
       })?.state.data,
     ).toBe('string')
 
-    const fetchDataAfterHydration = jest.fn<unknown, unknown[]>()
+    const fetchDataAfterHydration = vi.fn<unknown[], unknown>()
     await hydrationClient.prefetchQuery({
       queryKey: ['string', { key: ['string'], key2: 0 }],
       queryFn: fetchDataAfterHydration,
@@ -205,7 +208,7 @@ describe('dehydration and rehydration', () => {
   })
 
   test('should only hydrate successful queries by default', async () => {
-    const consoleMock = jest.spyOn(console, 'error')
+    const consoleMock = vi.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
     const queryCache = new QueryCache()
@@ -243,7 +246,7 @@ describe('dehydration and rehydration', () => {
     consoleMock.mockRestore()
   })
 
-  test('should filter queries via shouldDehydrateQuery', async () => {
+  test('should filter queries via dehydrateQuery', async () => {
     const queryCache = new QueryCache()
     const queryClient = createQueryClient({ queryCache })
     await queryClient.prefetchQuery({
@@ -341,18 +344,18 @@ describe('dehydration and rehydration', () => {
   })
 
   test('should be able to dehydrate mutations and continue on hydration', async () => {
-    const consoleMock = jest.spyOn(console, 'error')
+    const consoleMock = vi.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
     const onlineMock = mockNavigatorOnLine(false)
 
-    const serverAddTodo = jest
+    const serverAddTodo = vi
       .fn()
       .mockImplementation(() => Promise.reject(new Error('offline')))
-    const serverOnMutate = jest.fn().mockImplementation((variables) => {
+    const serverOnMutate = vi.fn().mockImplementation((variables) => {
       const optimisticTodo = { id: 1, text: variables.text }
       return { optimisticTodo }
     })
-    const serverOnSuccess = jest.fn()
+    const serverOnSuccess = vi.fn()
 
     const serverClient = createQueryClient()
 
@@ -386,14 +389,14 @@ describe('dehydration and rehydration', () => {
     const parsed = JSON.parse(stringified)
     const client = createQueryClient()
 
-    const clientAddTodo = jest.fn().mockImplementation((variables) => {
+    const clientAddTodo = vi.fn().mockImplementation((variables) => {
       return { id: 2, text: variables.text }
     })
-    const clientOnMutate = jest.fn().mockImplementation((variables) => {
+    const clientOnMutate = vi.fn().mockImplementation((variables) => {
       const optimisticTodo = { id: 1, text: variables.text }
       return { optimisticTodo }
     })
-    const clientOnSuccess = jest.fn()
+    const clientOnSuccess = vi.fn()
 
     client.setMutationDefaults(['addTodo'], {
       mutationFn: clientAddTodo,
@@ -422,10 +425,10 @@ describe('dehydration and rehydration', () => {
   })
 
   test('should not dehydrate mutations if dehydrateMutations is set to false', async () => {
-    const consoleMock = jest.spyOn(console, 'error')
+    const consoleMock = vi.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
-    const serverAddTodo = jest
+    const serverAddTodo = vi
       .fn()
       .mockImplementation(() => Promise.reject(new Error('offline')))
 
@@ -445,7 +448,9 @@ describe('dehydration and rehydration', () => {
     ).catch(() => undefined)
 
     await sleep(1)
-    const dehydrated = dehydrate(queryClient, { dehydrateMutations: false })
+    const dehydrated = dehydrate(queryClient, {
+      shouldDehydrateMutation: () => false,
+    })
 
     expect(dehydrated.mutations.length).toBe(0)
 
@@ -454,10 +459,10 @@ describe('dehydration and rehydration', () => {
   })
 
   test('should not dehydrate mutation if mutation state is set to pause', async () => {
-    const consoleMock = jest.spyOn(console, 'error')
+    const consoleMock = vi.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
-    const serverAddTodo = jest
+    const serverAddTodo = vi
       .fn()
       .mockImplementation(() => Promise.reject(new Error('offline')))
 

package/src/tests/infiniteQueryBehavior.test.tsx

@@ -1,10 +1,8 @@
 import { waitFor } from '@testing-library/react'
-import type {
-  QueryClient,
-  InfiniteQueryObserverResult,
-} from '@tanstack/query-core'
-import { InfiniteQueryObserver, CancelledError } from '@tanstack/query-core'
+import type { QueryClient, InfiniteQueryObserverResult } from '..'
+import { InfiniteQueryObserver, CancelledError } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
+import { vi } from 'vitest'
 
 describe('InfiniteQueryBehavior', () => {
   let queryClient: QueryClient
@@ -50,7 +48,7 @@ describe('InfiniteQueryBehavior', () => {
     const key = queryKey()
     let abortSignal: AbortSignal | null = null
 
-    const queryFnSpy = jest.fn().mockImplementation(({ pageParam, signal }) => {
+    const queryFnSpy = vi.fn().mockImplementation(({ pageParam, signal }) => {
       abortSignal = signal
       return pageParam
     })
@@ -84,6 +82,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 1,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -95,6 +94,7 @@ describe('InfiniteQueryBehavior', () => {
     expect(queryFnSpy).toHaveBeenNthCalledWith(1, {
       queryKey: key,
       pageParam: 2,
+      direction: 'forward',
       meta: undefined,
       signal: abortSignal,
     })
@@ -112,6 +112,7 @@ describe('InfiniteQueryBehavior', () => {
     expect(queryFnSpy).toHaveBeenNthCalledWith(1, {
       queryKey: key,
       pageParam: 0,
+      direction: 'backward',
       meta: undefined,
       signal: abortSignal,
     })
@@ -131,6 +132,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: -1,
       meta: undefined,
+      direction: 'backward',
       signal: abortSignal,
     })
 
@@ -148,6 +150,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 1,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -168,6 +171,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 0,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -175,6 +179,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 1,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -185,7 +190,7 @@ describe('InfiniteQueryBehavior', () => {
     const key = queryKey()
     let abortSignal: AbortSignal | null = null
 
-    const queryFnSpy = jest.fn().mockImplementation(({ pageParam, signal }) => {
+    const queryFnSpy = vi.fn().mockImplementation(({ pageParam, signal }) => {
       abortSignal = signal
       sleep(10)
       return pageParam
@@ -226,6 +231,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 1,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -236,7 +242,7 @@ describe('InfiniteQueryBehavior', () => {
     const key = queryKey()
     let abortSignal: AbortSignal | null = null
 
-    let queryFnSpy = jest.fn().mockImplementation(({ pageParam, signal }) => {
+    let queryFnSpy = vi.fn().mockImplementation(({ pageParam, signal }) => {
       abortSignal = signal
       return pageParam
     })
@@ -281,10 +287,11 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 2,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
-    queryFnSpy = jest.fn().mockImplementation(({ pageParam = 1, signal }) => {
+    queryFnSpy = vi.fn().mockImplementation(({ pageParam = 1, signal }) => {
       abortSignal = signal
       sleep(10)
       return pageParam

package/src/tests/infiniteQueryObserver.test.tsx

@@ -1,6 +1,7 @@
 import { createQueryClient, queryKey, sleep } from './utils'
 import type { QueryClient } from '..'
 import { InfiniteQueryObserver } from '..'
+import { vi } from 'vitest'
 
 describe('InfiniteQueryObserver', () => {
   let queryClient: QueryClient
@@ -43,7 +44,7 @@ describe('InfiniteQueryObserver', () => {
     }
 
     const key = queryKey()
-    const queryFn = jest.fn(() => 1)
+    const queryFn = vi.fn(() => 1)
     const observer = new InfiniteQueryObserver(queryClient, {
       meta,
       queryKey: key,
@@ -66,4 +67,64 @@ describe('InfiniteQueryObserver', () => {
     })
     expect(queryFn).toBeCalledWith(expect.objectContaining({ meta }))
   })
+
+  test('getNextPagParam and getPreviousPageParam should receive current pageParams', async () => {
+    const key = queryKey()
+    let single: string[] = []
+    let all: string[] = []
+    const observer = new InfiniteQueryObserver(queryClient, {
+      queryKey: key,
+      queryFn: ({ pageParam }) => String(pageParam),
+      defaultPageParam: 1,
+      getNextPageParam: (_, __, lastPageParam, allPageParams) => {
+        single.push('next' + lastPageParam)
+        all.push('next' + allPageParams.join(','))
+        return lastPageParam + 1
+      },
+      getPreviousPageParam: (_, __, firstPageParam, allPageParams) => {
+        single.push('prev' + firstPageParam)
+        all.push('prev' + allPageParams.join(','))
+        return firstPageParam - 1
+      },
+    })
+
+    await observer.fetchNextPage()
+    await observer.fetchPreviousPage()
+
+    expect(single).toEqual(['next1', 'prev1', 'prev1', 'next1', 'prev0'])
+    expect(all).toEqual(['next1', 'prev1', 'prev1', 'next0,1', 'prev0,1'])
+
+    single = []
+    all = []
+
+    await observer.refetch()
+
+    expect(single).toEqual(['next0', 'next1', 'prev0'])
+    expect(all).toEqual(['next0', 'next0,1', 'prev0,1'])
+  })
+
+  test('should stop refetching if undefined is returned from getNextPageParam', async () => {
+    const key = queryKey()
+    let next: number | undefined = 2
+    const queryFn = vi.fn<any, any>(({ pageParam }) => String(pageParam))
+    const observer = new InfiniteQueryObserver(queryClient, {
+      queryKey: key,
+      queryFn,
+      defaultPageParam: 1,
+      getNextPageParam: () => next,
+    })
+
+    await observer.fetchNextPage()
+    await observer.fetchNextPage()
+
+    expect(observer.getCurrentResult().data?.pages).toEqual(['1', '2'])
+    expect(queryFn).toBeCalledTimes(2)
+
+    next = undefined
+
+    await observer.refetch()
+
+    expect(observer.getCurrentResult().data?.pages).toEqual(['1'])
+    expect(queryFn).toBeCalledTimes(3)
+  })
 })

package/src/tests/mutationCache.test.tsx

@@ -1,14 +1,15 @@
 import { waitFor } from '@testing-library/react'
 import { queryKey, sleep, executeMutation, createQueryClient } from './utils'
 import { MutationCache, MutationObserver } from '..'
+import { vi } from 'vitest'
 
 describe('mutationCache', () => {
   describe('MutationCacheConfig error callbacks', () => {
     test('should call onError and onSettled when a mutation errors', async () => {
       const key = queryKey()
-      const onError = jest.fn()
-      const onSuccess = jest.fn()
-      const onSettled = jest.fn()
+      const onError = vi.fn()
+      const onSuccess = vi.fn()
+      const onSettled = vi.fn()
       const testCache = new MutationCache({ onError, onSuccess, onSettled })
       const testClient = createQueryClient({ mutationCache: testCache })
 
@@ -86,9 +87,9 @@ describe('mutationCache', () => {
   describe('MutationCacheConfig success callbacks', () => {
     test('should call onSuccess and onSettled when a mutation is successful', async () => {
       const key = queryKey()
-      const onError = jest.fn()
-      const onSuccess = jest.fn()
-      const onSettled = jest.fn()
+      const onError = vi.fn()
+      const onSuccess = vi.fn()
+      const onSettled = vi.fn()
       const testCache = new MutationCache({ onError, onSuccess, onSettled })
       const testClient = createQueryClient({ mutationCache: testCache })
 
@@ -163,7 +164,7 @@ describe('mutationCache', () => {
   describe('MutationCacheConfig.onMutate', () => {
     test('should be called before a mutation executes', async () => {
       const key = queryKey()
-      const onMutate = jest.fn()
+      const onMutate = vi.fn()
       const testCache = new MutationCache({ onMutate })
       const testClient = createQueryClient({ mutationCache: testCache })
 
@@ -286,7 +287,7 @@ describe('mutationCache', () => {
     test('should remove unused mutations after gcTime has elapsed', async () => {
       const testCache = new MutationCache()
       const testClient = createQueryClient({ mutationCache: testCache })
-      const onSuccess = jest.fn()
+      const onSuccess = vi.fn()
       await executeMutation(
         testClient,
         {
@@ -329,7 +330,7 @@ describe('mutationCache', () => {
 
     test('should be garbage collected later when unsubscribed and mutation is pending', async () => {
       const queryClient = createQueryClient()
-      const onSuccess = jest.fn()
+      const onSuccess = vi.fn()
       const observer = new MutationObserver(queryClient, {
         gcTime: 10,
         mutationFn: async () => {
@@ -355,7 +356,7 @@ describe('mutationCache', () => {
 
     test('should call callbacks even with gcTime 0 and mutation still pending', async () => {
       const queryClient = createQueryClient()
-      const onSuccess = jest.fn()
+      const onSuccess = vi.fn()
       const observer = new MutationObserver(queryClient, {
         gcTime: 0,
         mutationFn: async () => {

package/src/tests/mutationObserver.test.tsx

@@ -2,6 +2,7 @@ import { waitFor } from '@testing-library/react'
 import { createQueryClient, sleep } from './utils'
 import type { QueryClient } from '..'
 import { MutationObserver } from '..'
+import { vi } from 'vitest'
 
 describe('mutationObserver', () => {
   let queryClient: QueryClient
@@ -23,8 +24,8 @@ describe('mutationObserver', () => {
       },
     })
 
-    const subscription1Handler = jest.fn()
-    const subscription2Handler = jest.fn()
+    const subscription1Handler = vi.fn()
+    const subscription2Handler = vi.fn()
 
     const unsubscribe1 = mutation.subscribe(subscription1Handler)
     const unsubscribe2 = mutation.subscribe(subscription2Handler)