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

package/src/infiniteQueryBehavior.ts

@@ -7,11 +7,9 @@ import type {
   QueryKey,
 } from './types'
 
-export function infiniteQueryBehavior<
-  TQueryFnData,
-  TError,
-  TData,
->(): QueryBehavior<TQueryFnData, TError, InfiniteData<TData>> {
+export function infiniteQueryBehavior<TQueryFnData, TError, TData>(
+  pages?: number,
+): QueryBehavior<TQueryFnData, TError, InfiniteData<TData>> {
   return {
     onFetch: (context) => {
       context.fetchFn = async () => {
@@ -41,7 +39,10 @@ export function infiniteQueryBehavior<
         // Get query function
         const queryFn =
           context.options.queryFn ||
-          (() => Promise.reject(new Error('Missing queryFn')))
+          (() =>
+            Promise.reject(
+              new Error(`Missing queryFn: '${context.options.queryHash}'`),
+            ))
 
         // Create function to fetch a page
         const fetchPage = async (
@@ -84,13 +85,8 @@ export function infiniteQueryBehavior<
 
         let result: InfiniteData<unknown>
 
-        // Fetch first page?
-        if (!oldPages.length) {
-          result = await fetchPage(empty, options.defaultPageParam)
-        }
-
         // fetch next / previous page?
-        else if (direction) {
+        if (direction && oldPages.length) {
           const previous = direction === 'backward'
           const pageParamFn = previous ? getPreviousPageParam : getNextPageParam
           const oldData = {
@@ -100,15 +96,17 @@ export function infiniteQueryBehavior<
           const param = pageParamFn(options, oldData)
 
           result = await fetchPage(oldData, param, previous)
-        }
-
-        // Refetch pages
-        else {
+        } else {
           // Fetch first page
-          result = await fetchPage(empty, oldPageParams[0])
+          result = await fetchPage(
+            empty,
+            oldPageParams[0] ?? options.defaultPageParam,
+          )
+
+          const remainingPages = pages ?? oldPages.length
 
           // Fetch remaining pages
-          for (let i = 1; i < oldPages.length; i++) {
+          for (let i = 1; i < remainingPages; i++) {
             const param = getNextPageParam(options, result)
             result = await fetchPage(result, param)
           }

package/src/mutation.ts

@@ -119,7 +119,7 @@ export class Mutation<
   }
 
   addObserver(observer: MutationObserver<any, any, any, any>): void {
-    if (this.#observers.indexOf(observer) === -1) {
+    if (!this.#observers.includes(observer)) {
       this.#observers.push(observer)
 
       // Stop the mutation from being garbage collected

package/src/mutationCache.ts

@@ -139,11 +139,11 @@ export class MutationCache extends Subscribable<MutationCacheListener> {
   >(
     filters: MutationFilters,
   ): Mutation<TData, TError, TVariables, TContext> | undefined {
-    if (typeof filters.exact === 'undefined') {
-      filters.exact = true
-    }
+    const defaultedFilters = { exact: true, ...filters }
 
-    return this.#mutations.find((mutation) => matchMutation(filters, mutation))
+    return this.#mutations.find((mutation) =>
+      matchMutation(defaultedFilters, mutation),
+    )
   }
 
   findAll(filters: MutationFilters = {}): Mutation[] {

package/src/mutationObserver.ts

@@ -68,7 +68,7 @@ export class MutationObserver<
   }
 
   protected onUnsubscribe(): void {
-    if (!this.listeners.length) {
+    if (!this.hasListeners()) {
       this.#currentMutation?.removeObserver(this)
     }
   }

package/src/notifyManager.ts

@@ -8,6 +8,8 @@ type NotifyFunction = (callback: () => void) => void
 
 type BatchNotifyFunction = (callback: () => void) => void
 
+type BatchCallsCallback<T extends unknown[]> = (...args: T) => void
+
 export function createNotifyManager() {
   let queue: NotifyCallback[] = []
   let transactions = 0
@@ -45,12 +47,14 @@ export function createNotifyManager() {
   /**
    * All calls to the wrapped function will be batched.
    */
-  const batchCalls = <T extends Function>(callback: T): T => {
-    return ((...args: any[]) => {
+  const batchCalls = <T extends unknown[]>(
+    callback: BatchCallsCallback<T>,
+  ): BatchCallsCallback<T> => {
+    return (...args) => {
       schedule(() => {
         callback(...args)
       })
-    }) as any
+    }
   }
 
   const flush = (): void => {

package/src/onlineManager.ts

@@ -5,6 +5,8 @@ type SetupFn = (
   setOnline: (online?: boolean) => void,
 ) => (() => void) | undefined
 
+const onlineEvents = ['online', 'offline'] as const
+
 export class OnlineManager extends Subscribable {
   #online?: boolean
   #cleanup?: () => void
@@ -19,13 +21,15 @@ export class OnlineManager extends Subscribable {
       if (!isServer && window.addEventListener) {
         const listener = () => onOnline()
         // Listen to online
-        window.addEventListener('online', listener, false)
-        window.addEventListener('offline', listener, false)
+        onlineEvents.forEach((event) => {
+          window.addEventListener(event, listener, false)
+        })
 
         return () => {
           // Be sure to unsubscribe if a new handler is set
-          window.removeEventListener('online', listener)
-          window.removeEventListener('offline', listener)
+          onlineEvents.forEach((event) => {
+            window.removeEventListener(event, listener)
+          })
         }
       }
 

package/src/queriesObserver.ts

@@ -8,9 +8,10 @@ import type { QueryClient } from './queryClient'
 import type { NotifyOptions } from './queryObserver'
 import { QueryObserver } from './queryObserver'
 import { Subscribable } from './subscribable'
+import { replaceEqualDeep } from './utils'
 
 function difference<T>(array1: T[], array2: T[]): T[] {
-  return array1.filter((x) => array2.indexOf(x) === -1)
+  return array1.filter((x) => !array2.includes(x))
 }
 
 function replaceAt<T>(array: T[], index: number, value: T): T[] {
@@ -21,27 +22,44 @@ function replaceAt<T>(array: T[], index: number, value: T): T[] {
 
 type QueriesObserverListener = (result: QueryObserverResult[]) => void
 
-export class QueriesObserver extends Subscribable<QueriesObserverListener> {
+export interface QueriesObserverOptions<
+  TCombinedResult = QueryObserverResult[],
+> {
+  combine?: (result: QueryObserverResult[]) => TCombinedResult
+}
+
+export class QueriesObserver<
+  TCombinedResult = QueryObserverResult[],
+> extends Subscribable<QueriesObserverListener> {
   #client: QueryClient
-  #result: QueryObserverResult[]
+  #result!: QueryObserverResult[]
   #queries: QueryObserverOptions[]
   #observers: QueryObserver[]
+  #options?: QueriesObserverOptions<TCombinedResult>
+  #combinedResult!: TCombinedResult
 
-  constructor(client: QueryClient, queries?: QueryObserverOptions[]) {
+  constructor(
+    client: QueryClient,
+    queries: QueryObserverOptions[],
+    options?: QueriesObserverOptions<TCombinedResult>,
+  ) {
     super()
 
     this.#client = client
     this.#queries = []
-    this.#result = []
     this.#observers = []
 
-    if (queries) {
-      this.setQueries(queries)
-    }
+    this.#setResult([])
+    this.setQueries(queries, options)
+  }
+
+  #setResult(value: QueryObserverResult[]) {
+    this.#result = value
+    this.#combinedResult = this.#combineResult(value)
   }
 
   protected onSubscribe(): void {
-    if (this.listeners.length === 1) {
+    if (this.listeners.size === 1) {
       this.#observers.forEach((observer) => {
         observer.subscribe((result) => {
           this.#onUpdate(observer, result)
@@ -51,13 +69,13 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
   }
 
   protected onUnsubscribe(): void {
-    if (!this.listeners.length) {
+    if (!this.listeners.size) {
       this.destroy()
     }
   }
 
   destroy(): void {
-    this.listeners = []
+    this.listeners = new Set()
     this.#observers.forEach((observer) => {
       observer.destroy()
     })
@@ -65,9 +83,11 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
 
   setQueries(
     queries: QueryObserverOptions[],
+    options?: QueriesObserverOptions<TCombinedResult>,
     notifyOptions?: NotifyOptions,
   ): void {
     this.#queries = queries
+    this.#options = options
 
     notifyManager.batch(() => {
       const prevObservers = this.#observers
@@ -92,7 +112,7 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
       }
 
       this.#observers = newObservers
-      this.#result = newResult
+      this.#setResult(newResult)
 
       if (!this.hasListeners()) {
         return
@@ -112,8 +132,8 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
     })
   }
 
-  getCurrentResult(): QueryObserverResult[] {
-    return this.#result
+  getCurrentResult(): TCombinedResult {
+    return this.#combinedResult
   }
 
   getQueries() {
@@ -124,38 +144,68 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
     return this.#observers
   }
 
-  getOptimisticResult(queries: QueryObserverOptions[]): QueryObserverResult[] {
-    return this.#findMatchingObservers(queries).map((match) =>
+  getOptimisticResult(
+    queries: QueryObserverOptions[],
+  ): [
+    rawResult: QueryObserverResult[],
+    combineResult: (r?: QueryObserverResult[]) => TCombinedResult,
+    trackResult: () => QueryObserverResult[],
+  ] {
+    const matches = this.#findMatchingObservers(queries)
+    const result = matches.map((match) =>
       match.observer.getOptimisticResult(match.defaultedQueryOptions),
     )
+
+    return [
+      result,
+      (r?: QueryObserverResult[]) => {
+        return this.#combineResult(r ?? result)
+      },
+      () => {
+        return matches.map((match, index) => {
+          const observerResult = result[index]!
+          return !match.defaultedQueryOptions.notifyOnChangeProps
+            ? match.observer.trackResult(observerResult)
+            : observerResult
+        })
+      },
+    ]
+  }
+
+  #combineResult(input: QueryObserverResult[]): TCombinedResult {
+    const combine = this.#options?.combine
+    if (combine) {
+      return replaceEqualDeep(this.#combinedResult, combine(input))
+    }
+    return input as any
   }
 
   #findMatchingObservers(
     queries: QueryObserverOptions[],
   ): QueryObserverMatch[] {
     const prevObservers = this.#observers
+    const prevObserversMap = new Map(
+      prevObservers.map((observer) => [observer.options.queryHash, observer]),
+    )
+
     const defaultedQueryOptions = queries.map((options) =>
       this.#client.defaultQueryOptions(options),
     )
 
     const matchingObservers: QueryObserverMatch[] =
       defaultedQueryOptions.flatMap((defaultedOptions) => {
-        const match = prevObservers.find(
-          (observer) =>
-            observer.options.queryHash === defaultedOptions.queryHash,
-        )
+        const match = prevObserversMap.get(defaultedOptions.queryHash)
         if (match != null) {
           return [{ defaultedQueryOptions: defaultedOptions, observer: match }]
         }
         return []
       })
 
-    const matchedQueryHashes = matchingObservers.map(
-      (match) => match.defaultedQueryOptions.queryHash,
+    const matchedQueryHashes = new Set(
+      matchingObservers.map((match) => match.defaultedQueryOptions.queryHash),
     )
     const unmatchedQueries = defaultedQueryOptions.filter(
-      (defaultedOptions) =>
-        !matchedQueryHashes.includes(defaultedOptions.queryHash),
+      (defaultedOptions) => !matchedQueryHashes.has(defaultedOptions.queryHash),
     )
 
     const getObserver = (options: QueryObserverOptions): QueryObserver => {
@@ -192,7 +242,7 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
   #onUpdate(observer: QueryObserver, result: QueryObserverResult): void {
     const index = this.#observers.indexOf(observer)
     if (index !== -1) {
-      this.#result = replaceAt(this.#result, index, result)
+      this.#setResult(replaceAt(this.#result, index, result))
       this.#notify()
     }
   }

package/src/query.ts

@@ -281,7 +281,7 @@ export class Query<
   }
 
   addObserver(observer: QueryObserver<any, any, any, any, any>): void {
-    if (this.#observers.indexOf(observer) === -1) {
+    if (!this.#observers.includes(observer)) {
       this.#observers.push(observer)
 
       // Stop the query from being garbage collected
@@ -292,7 +292,7 @@ export class Query<
   }
 
   removeObserver(observer: QueryObserver<any, any, any, any, any>): void {
-    if (this.#observers.indexOf(observer) !== -1) {
+    if (this.#observers.includes(observer)) {
       this.#observers = this.#observers.filter((x) => x !== observer)
 
       if (!this.#observers.length) {
@@ -387,7 +387,9 @@ export class Query<
     // Create fetch function
     const fetchFn = () => {
       if (!this.options.queryFn) {
-        return Promise.reject(new Error('Missing queryFn'))
+        return Promise.reject(
+          new Error(`Missing queryFn: '${this.options.queryHash}'`),
+        )
       }
       this.#abortSignalConsumed = false
       return this.options.queryFn(
@@ -464,7 +466,7 @@ export class Query<
               `Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ${this.queryHash}`,
             )
           }
-          onError(new Error('undefined') as any)
+          onError(new Error(`${this.queryHash} data is undefined`) as any)
           return
         }
 
@@ -588,7 +590,7 @@ export class Query<
 
     notifyManager.batch(() => {
       this.#observers.forEach((observer) => {
-        observer.onQueryUpdate(action)
+        observer.onQueryUpdate()
       })
 
       this.#cache.notify({ query: this, type: 'updated', action })

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 {
@@ -69,7 +68,7 @@ interface NotifyEventQueryObserverOptionsUpdated extends NotifyEvent {
   observer: QueryObserver<any, any, any, any, any>
 }
 
-type QueryCacheNotifyEvent =
+export type QueryCacheNotifyEvent =
   | NotifyEventQueryAdded
   | NotifyEventQueryRemoved
   | NotifyEventQueryUpdated
@@ -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<
@@ -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<