@tanstack/query-core 5.0.0-alpha.7 → 5.0.0-alpha.70

package/src/queryObserver.ts

@@ -1,14 +1,6 @@
-import type { DefaultedQueryObserverOptions, DefaultError } from './types'
-import {
-  isServer,
-  isValidTimeout,
-  noop,
-  replaceData,
-  shallowEqualObjects,
-  timeUntilStale,
-} from './utils'
-import { notifyManager } from './notifyManager'
 import type {
+  DefaultedQueryObserverOptions,
+  DefaultError,
   PlaceholderDataFunction,
   QueryKey,
   QueryObserverBaseResult,
@@ -17,11 +9,20 @@ import type {
   QueryOptions,
   RefetchOptions,
 } from './types'
-import type { Query, QueryState, Action, FetchOptions } from './query'
+import {
+  isServer,
+  isValidTimeout,
+  noop,
+  replaceData,
+  shallowEqualObjects,
+  timeUntilStale,
+} from './utils'
+import { notifyManager } from './notifyManager'
+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 +30,6 @@ type QueryObserverListener<TData, TError> = (
 
 export interface NotifyOptions {
   listeners?: boolean
-  onError?: boolean
-  onSuccess?: boolean
 }
 
 export interface ObserverFetchOptions extends FetchOptions {
@@ -64,10 +63,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 query with defined data.
+  // It will be used to pass the previous data and query to the placeholder function between renders.
+  #lastQueryWithDefinedData?: Query<TQueryFnData, TError, TQueryData, TQueryKey>
   #staleTimeoutId?: ReturnType<typeof setTimeout>
   #refetchIntervalId?: ReturnType<typeof setInterval>
   #currentRefetchInterval?: number | false
@@ -97,7 +98,7 @@ export class QueryObserver<
   }
 
   protected onSubscribe(): void {
-    if (this.listeners.length === 1) {
+    if (this.listeners.size === 1) {
       this.#currentQuery.addObserver(this)
 
       if (shouldFetchOnMount(this.#currentQuery, this.options)) {
@@ -109,7 +110,7 @@ export class QueryObserver<
   }
 
   protected onUnsubscribe(): void {
-    if (!this.listeners.length) {
+    if (!this.hasListeners()) {
       this.destroy()
     }
   }
@@ -131,7 +132,7 @@ export class QueryObserver<
   }
 
   destroy(): void {
-    this.listeners = []
+    this.listeners = new Set()
     this.#clearStaleTimeout()
     this.#clearRefetchInterval()
     this.#currentQuery.removeObserver(this)
@@ -190,7 +191,7 @@ export class QueryObserver<
     }
 
     // Update result
-    this.#updateResult(notifyOptions)
+    this.updateResult(notifyOptions)
 
     // Update stale interval if needed
     if (
@@ -290,7 +291,7 @@ export class QueryObserver<
       ...fetchOptions,
       cancelRefetch: fetchOptions.cancelRefetch ?? true,
     }).then(() => {
-      this.#updateResult()
+      this.updateResult()
       return this.#currentResult
     })
   }
@@ -336,18 +337,20 @@ export class QueryObserver<
 
     this.#staleTimeoutId = setTimeout(() => {
       if (!this.#currentResult.isStale) {
-        this.#updateResult()
+        this.updateResult()
       }
     }, timeout)
   }
 
   #computeRefetchInterval() {
-    return typeof this.options.refetchInterval === 'function'
-      ? this.options.refetchInterval(
-          this.#currentResult.data,
-          this.#currentQuery,
-        )
-      : this.options.refetchInterval ?? false
+    return (
+      (typeof this.options.refetchInterval === 'function'
+        ? this.options.refetchInterval(
+            this.#currentResult.data,
+            this.#currentQuery,
+          )
+        : this.options.refetchInterval) ?? false
+    )
   }
 
   #updateRefetchInterval(nextInterval: number | false): void {
@@ -414,9 +417,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 +490,10 @@ export class QueryObserver<
           typeof options.placeholderData === 'function'
             ? (
                 options.placeholderData as unknown as PlaceholderDataFunction<TQueryData>
-              )(prevQueryResult?.data as TQueryData | undefined)
+              )(
+                this.#lastQueryWithDefinedData?.state.data,
+                this.#lastQueryWithDefinedData as any,
+              )
             : options.placeholderData
         if (options.select && typeof placeholderData !== 'undefined') {
           try {
@@ -504,7 +507,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
       }
     }
@@ -554,7 +561,7 @@ export class QueryObserver<
     return result as QueryObserverResult<TData, TError>
   }
 
-  #updateResult(notifyOptions?: NotifyOptions): void {
+  updateResult(notifyOptions?: NotifyOptions): void {
     const prevResult = this.#currentResult as
       | QueryObserverResult<TData, TError>
       | undefined
@@ -568,6 +575,9 @@ export class QueryObserver<
       return
     }
 
+    if (this.#currentResultState.data !== undefined) {
+      this.#lastQueryWithDefinedData = this.#currentQuery
+    }
     this.#currentResult = nextResult
 
     // Determine which callbacks to trigger
@@ -589,7 +599,7 @@ export class QueryObserver<
 
       const includedProps = new Set(notifyOnChangeProps ?? this.#trackedProps)
 
-      if (this.options.throwErrors) {
+      if (this.options.throwOnError) {
         includedProps.add('error')
       }
 
@@ -619,7 +629,6 @@ export class QueryObserver<
       | undefined
     this.#currentQuery = query
     this.#currentQueryInitialState = query.state
-    this.#previousQueryResult = this.#currentResult
 
     if (this.hasListeners()) {
       prevQuery?.removeObserver(this)
@@ -627,16 +636,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 +646,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/subscribable.ts

@@ -1,26 +1,26 @@
 type Listener = () => void
 
 export class Subscribable<TListener extends Function = Listener> {
-  protected listeners: TListener[]
+  protected listeners: Set<TListener>
 
   constructor() {
-    this.listeners = []
+    this.listeners = new Set()
     this.subscribe = this.subscribe.bind(this)
   }
 
   subscribe(listener: TListener): () => void {
-    this.listeners.push(listener)
+    this.listeners.add(listener)
 
     this.onSubscribe()
 
     return () => {
-      this.listeners = this.listeners.filter((x) => x !== listener)
+      this.listeners.delete(listener)
       this.onUnsubscribe()
     }
   }
 
   hasListeners(): boolean {
-    return this.listeners.length > 0
+    return this.listeners.size > 0
   }
 
   protected onSubscribe(): void {

package/src/tests/hydration.test.tsx

@@ -113,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)
 
@@ -244,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({
@@ -446,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)
 

package/src/tests/infiniteQueryBehavior.test.tsx

@@ -1,14 +1,16 @@
 import { waitFor } from '@testing-library/react'
-import type { QueryClient, InfiniteQueryObserverResult } from '..'
+import type { QueryClient, QueryCache, InfiniteQueryObserverResult } from '..'
 import { InfiniteQueryObserver, CancelledError } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
 import { vi } from 'vitest'
 
 describe('InfiniteQueryBehavior', () => {
   let queryClient: QueryClient
+  let queryCache: QueryCache
 
   beforeEach(() => {
     queryClient = createQueryClient()
+    queryCache = queryClient.getQueryCache()
     queryClient.mount()
   })
 
@@ -35,9 +37,10 @@ describe('InfiniteQueryBehavior', () => {
     })
 
     await waitFor(() => {
+      const query = queryCache.find({ queryKey: key })!
       return expect(observerResult).toMatchObject({
         isError: true,
-        error: new Error('Missing queryFn'),
+        error: new Error(`Missing queryFn: '${query.queryHash}'`),
       })
     })
 

package/src/tests/notifyManager.test.tsx

@@ -49,4 +49,19 @@ describe('notifyManager', () => {
 
     expect(notifySpy).toHaveBeenCalledTimes(1)
   })
+
+  it('typedefs should catch proper signatures', async () => {
+    const notifyManagerTest = createNotifyManager()
+
+    // we define some fn with its signature:
+    const fn: (a: string, b: number) => string = (a, b) => a + b
+
+    //now somefn expect to be called with args [a: string, b: number]
+    const someFn = notifyManagerTest.batchCalls(fn)
+
+    someFn('im happy', 4)
+
+    //@ts-expect-error
+    someFn('im not happy', false)
+  })
 })

package/src/tests/query.test.tsx

@@ -761,10 +761,12 @@ describe('query', () => {
     })
 
     const unsubscribe = observer.subscribe(() => undefined)
+
     await sleep(10)
+    const query = queryCache.find({ queryKey: key })!
     expect(observer.getCurrentResult()).toMatchObject({
       status: 'error',
-      error: new Error('Missing queryFn'),
+      error: new Error(`Missing queryFn: '${query.queryHash}'`),
     })
     unsubscribe()
   })
@@ -788,7 +790,7 @@ describe('query', () => {
 
     await sleep(10)
 
-    const error = new Error('undefined')
+    const error = new Error(`${JSON.stringify(key)} data is undefined`)
 
     expect(observerResult).toMatchObject({
       isError: true,

package/src/tests/queryCache.test.tsx

@@ -1,6 +1,5 @@
 import { sleep, queryKey, createQueryClient } from './utils'
-import { QueryClient } from '..'
-import { QueryCache, QueryObserver } from '..'
+import { QueryClient, QueryCache, QueryObserver } from '..'
 import { waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 
@@ -329,23 +328,6 @@ describe('queryCache', () => {
     })
   })
 
-  describe('QueryCacheConfig.createStore', () => {
-    test('should call createStore', async () => {
-      const createStore = vi.fn().mockImplementation(() => new Map())
-      new QueryCache({ createStore })
-      expect(createStore).toHaveBeenCalledWith()
-    })
-
-    test('should use created store', async () => {
-      const store = new Map()
-      const spy = vi.spyOn(store, 'get')
-
-      new QueryCache({ createStore: () => store }).get('key')
-
-      expect(spy).toHaveBeenCalledTimes(1)
-    })
-  })
-
   describe('QueryCache.add', () => {
     test('should not try to add a query already added to the cache', async () => {
       const key = queryKey()

package/src/tests/queryClient.test.tsx

@@ -1,15 +1,24 @@
 import { waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
-import { sleep, queryKey, createQueryClient } from './utils'
+import {
+  sleep,
+  queryKey,
+  createQueryClient,
+  mockNavigatorOnLine,
+} from './utils'
 import type {
   QueryCache,
   QueryClient,
   QueryFunction,
   QueryObserverOptions,
 } from '..'
-import { MutationObserver, QueryObserver } from '..'
-import { focusManager, onlineManager } from '..'
+import {
+  MutationObserver,
+  QueryObserver,
+  focusManager,
+  onlineManager,
+} from '..'
 import { noop } from '../utils'
 import { vi } from 'vitest'
 
@@ -640,6 +649,46 @@ describe('queryClient', () => {
         pageParams: [10],
       })
     })
+
+    test('should prefetch multiple pages', async () => {
+      const key = queryKey()
+
+      await queryClient.prefetchInfiniteQuery({
+        queryKey: key,
+        queryFn: ({ pageParam }) => String(pageParam),
+        getNextPageParam: (_lastPage, _pages, lastPageParam) =>
+          lastPageParam + 5,
+        defaultPageParam: 10,
+        pages: 3,
+      })
+
+      const result = queryClient.getQueryData(key)
+
+      expect(result).toEqual({
+        pages: ['10', '15', '20'],
+        pageParams: [10, 15, 20],
+      })
+    })
+
+    test('should stop prefetching if getNextPageParam returns undefined', async () => {
+      const key = queryKey()
+
+      await queryClient.prefetchInfiniteQuery({
+        queryKey: key,
+        queryFn: ({ pageParam }) => String(pageParam),
+        getNextPageParam: (_lastPage, _pages, lastPageParam) =>
+          lastPageParam >= 20 ? undefined : lastPageParam + 5,
+        defaultPageParam: 10,
+        pages: 5,
+      })
+
+      const result = queryClient.getQueryData(key)
+
+      expect(result).toEqual({
+        pages: ['10', '15', '20'],
+        pageParams: [10, 15, 20],
+      })
+    })
   })
 
   describe('prefetchQuery', () => {
@@ -1020,6 +1069,33 @@ describe('queryClient', () => {
       }
       expect(error).toEqual('error')
     })
+
+    test('should resolve Promise immediately if query is paused', async () => {
+      const key1 = queryKey()
+      const queryFn1 = vi.fn<unknown[], string>().mockReturnValue('data1')
+      await queryClient.fetchQuery({ queryKey: key1, queryFn: queryFn1 })
+      const onlineMock = mockNavigatorOnLine(false)
+
+      await queryClient.refetchQueries({ queryKey: key1 })
+
+      // if we reach this point, the test succeeds because the Promise was resolved immediately
+      expect(queryFn1).toHaveBeenCalledTimes(1)
+      onlineMock.mockRestore()
+    })
+
+    test('should refetch if query we are offline but query networkMode is always', async () => {
+      const key1 = queryKey()
+      queryClient.setQueryDefaults(key1, { networkMode: 'always' })
+      const queryFn1 = vi.fn<unknown[], string>().mockReturnValue('data1')
+      await queryClient.fetchQuery({ queryKey: key1, queryFn: queryFn1 })
+      const onlineMock = mockNavigatorOnLine(false)
+
+      await queryClient.refetchQueries({ queryKey: key1 })
+
+      // initial fetch + refetch (even though we are offline)
+      expect(queryFn1).toHaveBeenCalledTimes(2)
+      onlineMock.mockRestore()
+    })
   })
 
   describe('invalidateQueries', () => {

package/src/tests/queryObserver.test.tsx

@@ -691,6 +691,127 @@ describe('queryObserver', () => {
     expect(observer.getCurrentResult().isPlaceholderData).toBe(false)
   })
 
+  test('should pass the correct previous queryKey (from prevQuery) to placeholderData function params with select', async () => {
+    const results: QueryObserverResult[] = []
+    const keys: Array<readonly unknown[] | null> = []
+
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    const data1 = { value: 'data1' }
+    const data2 = { value: 'data2' }
+
+    const observer = new QueryObserver(queryClient, {
+      queryKey: key1,
+      queryFn: () => data1,
+      placeholderData: (prev, prevQuery) => {
+        keys.push(prevQuery?.queryKey || null)
+        return prev
+      },
+      select: (data) => data.value,
+    })
+
+    const unsubscribe = observer.subscribe((result) => {
+      results.push(result)
+    })
+
+    await sleep(1)
+
+    observer.setOptions({
+      queryKey: key2,
+      queryFn: () => data2,
+      placeholderData: (prev, prevQuery) => {
+        keys.push(prevQuery?.queryKey || null)
+        return prev
+      },
+      select: (data) => data.value,
+    })
+
+    await sleep(1)
+    unsubscribe()
+    expect(results.length).toBe(4)
+    expect(keys.length).toBe(3)
+    expect(keys[0]).toBe(null) // First Query - status: 'pending', fetchStatus: 'idle'
+    expect(keys[1]).toBe(null) // First Query - status: 'pending', fetchStatus: 'fetching'
+    expect(keys[2]).toBe(key1) // Second Query - status: 'pending', fetchStatus: 'fetching'
+
+    expect(results[0]).toMatchObject({
+      data: undefined,
+      status: 'pending',
+      fetchStatus: 'fetching',
+    }) // Initial fetch
+    expect(results[1]).toMatchObject({
+      data: 'data1',
+      status: 'success',
+      fetchStatus: 'idle',
+    }) // Successful fetch
+    expect(results[2]).toMatchObject({
+      data: 'data1',
+      status: 'success',
+      fetchStatus: 'fetching',
+    }) // Fetch for new key, but using previous data as placeholder
+    expect(results[3]).toMatchObject({
+      data: 'data2',
+      status: 'success',
+      fetchStatus: 'idle',
+    }) // Successful fetch for new key
+  })
+
+  test('should pass the correct previous data to placeholderData function params when select function is used in conjunction', async () => {
+    const results: QueryObserverResult[] = []
+
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    const data1 = { value: 'data1' }
+    const data2 = { value: 'data2' }
+
+    const observer = new QueryObserver(queryClient, {
+      queryKey: key1,
+      queryFn: () => data1,
+      placeholderData: (prev) => prev,
+      select: (data) => data.value,
+    })
+
+    const unsubscribe = observer.subscribe((result) => {
+      results.push(result)
+    })
+
+    await sleep(1)
+
+    observer.setOptions({
+      queryKey: key2,
+      queryFn: () => data2,
+      placeholderData: (prev) => prev,
+      select: (data) => data.value,
+    })
+
+    await sleep(1)
+    unsubscribe()
+
+    expect(results.length).toBe(4)
+    expect(results[0]).toMatchObject({
+      data: undefined,
+      status: 'pending',
+      fetchStatus: 'fetching',
+    }) // Initial fetch
+    expect(results[1]).toMatchObject({
+      data: 'data1',
+      status: 'success',
+      fetchStatus: 'idle',
+    }) // Successful fetch
+    expect(results[2]).toMatchObject({
+      data: 'data1',
+      status: 'success',
+      fetchStatus: 'fetching',
+    }) // Fetch for new key, but using previous data as placeholder
+    expect(results[3]).toMatchObject({
+      data: 'data2',
+      status: 'success',
+      fetchStatus: 'idle',
+    }) // Successful fetch for new key
+  })
+
   test('setOptions should notify cache listeners', async () => {
     const key = queryKey()