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

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<
@@ -325,7 +325,9 @@ export class QueryClient {
       TPageParam
     >,
   ): Promise<InfiniteData<TData>> {
-    options.behavior = infiniteQueryBehavior<TQueryFnData, TError, TData>()
+    options.behavior = infiniteQueryBehavior<TQueryFnData, TError, TData>(
+      options.pages,
+    )
     return this.fetchQuery(options)
   }
 
@@ -480,8 +482,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)
@@ -190,7 +191,7 @@ export class QueryObserver<
     }
 
     // Update result
-    this.#updateResult(notifyOptions)
+    this.updateResult(notifyOptions)
 
     // Update stale interval if needed
     if (
@@ -226,7 +227,30 @@ export class QueryObserver<
   ): QueryObserverResult<TData, TError> {
     const query = this.#client.getQueryCache().build(this.#client, options)
 
-    return this.createResult(query, options)
+    const result = this.createResult(query, options)
+
+    if (shouldAssignObserverCurrentProperties(this, result)) {
+      // this assigns the optimistic result to the current Observer
+      // because if the query function changes, useQuery will be performing
+      // an effect where it would fetch again.
+      // When the fetch finishes, we perform a deep data cloning in order
+      // to reuse objects references. This deep data clone is performed against
+      // the `observer.currentResult.data` property
+      // When QueryKey changes, we refresh the query and get new `optimistic`
+      // result, while we leave the `observer.currentResult`, so when new data
+      // arrives, it finds the old `observer.currentResult` which is related
+      // to the old QueryKey. Which means that currentResult and selectData are
+      // out of sync already.
+      // To solve this, we move the cursor of the currentResult everytime
+      // an observer reads an optimistic value.
+
+      // When keeping the previous data, the result doesn't change until new
+      // data arrives.
+      this.#currentResult = result
+      this.#currentResultOptions = this.options
+      this.#currentResultState = this.#currentQuery.state
+    }
+    return result
   }
 
   getCurrentResult(): QueryObserverResult<TData, TError> {
@@ -290,7 +314,7 @@ export class QueryObserver<
       ...fetchOptions,
       cancelRefetch: fetchOptions.cancelRefetch ?? true,
     }).then(() => {
-      this.#updateResult()
+      this.updateResult()
       return this.#currentResult
     })
   }
@@ -336,18 +360,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 +440,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 +513,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 +530,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 +584,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 +598,9 @@ export class QueryObserver<
       return
     }
 
+    if (this.#currentResultState.data !== undefined) {
+      this.#lastQueryWithDefinedData = this.#currentQuery
+    }
     this.#currentResult = nextResult
 
     // Determine which callbacks to trigger
@@ -589,7 +622,7 @@ export class QueryObserver<
 
       const includedProps = new Set(notifyOnChangeProps ?? this.#trackedProps)
 
-      if (this.options.throwErrors) {
+      if (this.options.throwOnError) {
         includedProps.add('error')
       }
 
@@ -619,7 +652,6 @@ export class QueryObserver<
       | undefined
     this.#currentQuery = query
     this.#currentQueryInitialState = query.state
-    this.#previousQueryResult = this.#currentResult
 
     if (this.hasListeners()) {
       prevQuery?.removeObserver(this)
@@ -627,16 +659,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 +669,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)
@@ -727,3 +742,25 @@ function isStale(
 ): boolean {
   return query.isStaleByTime(options.staleTime)
 }
+
+// this function would decide if we will update the observer's 'current'
+// properties after an optimistic reading via getOptimisticResult
+function shouldAssignObserverCurrentProperties<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  observer: QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+  optimisticResult: QueryObserverResult<TData, TError>,
+) {
+  // if the newly created result isn't what the observer is holding as current,
+  // then we'll need to update the properties as well
+  if (observer.getCurrentResult() !== optimisticResult) {
+    return true
+  }
+
+  // basically, just keep previous properties if nothing changed
+  return false
+}

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/focusManager.test.tsx

@@ -39,20 +39,6 @@ describe('focusManager', () => {
     expect(focusManager.isFocused()).toBeTruthy()
   })
 
-  it('should not notify listeners on focus if already focused', async () => {
-    const subscriptionSpy = vi.fn()
-    const unsubscribe = focusManager.subscribe(subscriptionSpy)
-
-    focusManager.setFocused(true)
-    expect(subscriptionSpy).toHaveBeenCalledTimes(1)
-    subscriptionSpy.mockReset()
-
-    focusManager.setFocused(false)
-    expect(subscriptionSpy).toHaveBeenCalledTimes(0)
-
-    unsubscribe()
-  })
-
   it('should return true for isFocused if document is undefined', async () => {
     const { document } = globalThis
 
@@ -150,4 +136,25 @@ describe('focusManager', () => {
 
     unsubscribe2()
   })
+
+  test('should call listeners when setFocused is called', () => {
+    const listener = vi.fn()
+
+    focusManager.subscribe(listener)
+
+    focusManager.setFocused(true)
+    focusManager.setFocused(true)
+
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    focusManager.setFocused(false)
+    focusManager.setFocused(false)
+
+    expect(listener).toHaveBeenCalledTimes(2)
+
+    focusManager.setFocused(undefined)
+    focusManager.setFocused(undefined)
+
+    expect(listener).toHaveBeenCalledTimes(3)
+  })
 })

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/onlineManager.test.tsx

@@ -148,4 +148,25 @@ describe('onlineManager', () => {
 
     unsubscribe2()
   })
+
+  test('should call listeners when setOnline is called', () => {
+    const listener = vi.fn()
+
+    onlineManager.subscribe(listener)
+
+    onlineManager.setOnline(true)
+    onlineManager.setOnline(true)
+
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    onlineManager.setOnline(false)
+    onlineManager.setOnline(false)
+
+    expect(listener).toHaveBeenCalledTimes(2)
+
+    onlineManager.setOnline(undefined)
+    onlineManager.setOnline(undefined)
+
+    expect(listener).toHaveBeenCalledTimes(3)
+  })
 })

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()