@tanstack/query-core 5.0.0-alpha.5 → 5.0.0-alpha.50

package/src/queryCache.ts

@@ -27,7 +27,6 @@ interface QueryCacheConfig {
     error: DefaultError | null,
     query: Query<unknown, unknown, unknown>,
   ) => void
-  createStore?: () => QueryStore
 }
 
 interface NotifyEventQueryAdded extends NotifyEvent {
@@ -95,7 +94,7 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
 
   constructor(public config: QueryCacheConfig = {}) {
     super()
-    this.#queries = config.createStore?.() ?? new Map<string, Query>()
+    this.#queries = new Map<string, Query>()
   }
 
   build<TQueryFnData, TError, TData, TQueryKey extends QueryKey>(
@@ -176,13 +175,11 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
   find<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData>(
     filters: WithRequired<QueryFilters, 'queryKey'>,
   ): Query<TQueryFnData, TError, TData> | undefined {
-    if (typeof filters.exact === 'undefined') {
-      filters.exact = true
-    }
+    const defaultedFilters = { exact: true, ...filters }
 
-    return this.getAll().find((query) => matchQuery(filters, query)) as
-      | Query<TQueryFnData, TError, TData>
-      | undefined
+    return this.getAll().find((query) =>
+      matchQuery(defaultedFilters, query),
+    ) as Query<TQueryFnData, TError, TData> | undefined
   }
 
   findAll(filters: QueryFilters = {}): Query[] {

package/src/queryClient.ts

@@ -25,6 +25,8 @@ import type {
   ResetOptions,
   SetDataOptions,
   DefaultError,
+  CancelOptions,
+  DefaultedQueryObserverOptions,
 } from './types'
 import type { QueryState } from './query'
 import { QueryCache } from './queryCache'
@@ -33,7 +35,6 @@ import { focusManager } from './focusManager'
 import { onlineManager } from './onlineManager'
 import { notifyManager } from './notifyManager'
 import { infiniteQueryBehavior } from './infiniteQueryBehavior'
-import type { CancelOptions, DefaultedQueryObserverOptions } from './types'
 
 // TYPES
 
@@ -212,14 +213,12 @@ export class QueryClient {
     filters: QueryFilters = {},
     cancelOptions: CancelOptions = {},
   ): Promise<void> {
-    if (typeof cancelOptions.revert === 'undefined') {
-      cancelOptions.revert = true
-    }
+    const defaultedCancelOptions = { revert: true, ...cancelOptions }
 
     const promises = notifyManager.batch(() =>
       this.#queryCache
         .findAll(filters)
-        .map((query) => query.cancel(cancelOptions)),
+        .map((query) => query.cancel(defaultedCancelOptions)),
     )
 
     return Promise.all(promises).then(noop).catch(noop)
@@ -249,25 +248,26 @@ export class QueryClient {
     filters: RefetchQueryFilters = {},
     options?: RefetchOptions,
   ): Promise<void> {
+    const fetchOptions = {
+      ...options,
+      cancelRefetch: options?.cancelRefetch ?? true,
+    }
     const promises = notifyManager.batch(() =>
       this.#queryCache
         .findAll(filters)
         .filter((query) => !query.isDisabled())
-        .map((query) =>
-          query.fetch(undefined, {
-            ...options,
-            cancelRefetch: options?.cancelRefetch ?? true,
-          }),
-        ),
+        .map((query) => {
+          let promise = query.fetch(undefined, fetchOptions)
+          if (!fetchOptions.throwOnError) {
+            promise = promise.catch(noop)
+          }
+          return query.state.fetchStatus === 'paused'
+            ? Promise.resolve()
+            : promise
+        }),
     )
 
-    let promise = Promise.all(promises).then(noop)
-
-    if (!options?.throwOnError) {
-      promise = promise.catch(noop)
-    }
-
-    return promise
+    return Promise.all(promises).then(noop)
   }
 
   fetchQuery<
@@ -480,8 +480,8 @@ export class QueryClient {
       defaultedOptions.refetchOnReconnect =
         defaultedOptions.networkMode !== 'always'
     }
-    if (typeof defaultedOptions.throwErrors === 'undefined') {
-      defaultedOptions.throwErrors = !!defaultedOptions.suspense
+    if (typeof defaultedOptions.throwOnError === 'undefined') {
+      defaultedOptions.throwOnError = !!defaultedOptions.suspense
     }
 
     return defaultedOptions as DefaultedQueryObserverOptions<

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)
@@ -342,12 +343,14 @@ export class QueryObserver<
   }
 
   #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
       }
     }
@@ -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

@@ -82,6 +82,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 1,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -93,6 +94,7 @@ describe('InfiniteQueryBehavior', () => {
     expect(queryFnSpy).toHaveBeenNthCalledWith(1, {
       queryKey: key,
       pageParam: 2,
+      direction: 'forward',
       meta: undefined,
       signal: abortSignal,
     })
@@ -110,6 +112,7 @@ describe('InfiniteQueryBehavior', () => {
     expect(queryFnSpy).toHaveBeenNthCalledWith(1, {
       queryKey: key,
       pageParam: 0,
+      direction: 'backward',
       meta: undefined,
       signal: abortSignal,
     })
@@ -129,6 +132,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: -1,
       meta: undefined,
+      direction: 'backward',
       signal: abortSignal,
     })
 
@@ -146,6 +150,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 1,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -166,6 +171,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 0,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -173,6 +179,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 1,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -224,6 +231,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 1,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 
@@ -279,6 +287,7 @@ describe('InfiniteQueryBehavior', () => {
       queryKey: key,
       pageParam: 2,
       meta: undefined,
+      direction: 'forward',
       signal: abortSignal,
     })
 

package/src/tests/query.test.tsx

@@ -788,7 +788,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'
 
@@ -1020,6 +1029,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()