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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-core",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.81",
   "description": "The framework agnostic core that powers TanStack Query",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -10,29 +10,33 @@
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
+  "type": "module",
   "types": "build/lib/index.d.ts",
-  "main": "build/lib/index.js",
-  "module": "build/lib/index.esm.js",
+  "main": "build/lib/index.legacy.cjs",
+  "module": "build/lib/index.legacy.js",
   "exports": {
     ".": {
       "types": "./build/lib/index.d.ts",
-      "import": "./build/lib/index.mjs",
-      "default": "./build/lib/index.js"
+      "import": "./build/lib/index.js",
+      "require": "./build/lib/index.cjs",
+      "default": "./build/lib/index.cjs"
     },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
   "files": [
     "build/lib/*",
-    "build/umd/*",
     "src"
   ],
   "scripts": {
-    "clean": "rimraf ./build",
+    "clean": "rimraf ./build && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
-    "test:types": "tsc",
+    "test:types": "tsc --noEmit",
     "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
-    "build:types": "tsc --build"
+    "test:build": "publint --strict",
+    "build": "pnpm build:rollup && pnpm build:types",
+    "build:rollup": "rollup --config rollup.config.js",
+    "build:types": "tsc --emitDeclarationOnly"
   }
 }

package/src/focusManager.ts

@@ -56,9 +56,9 @@ export class FocusManager extends Subscribable {
   }
 
   setFocused(focused?: boolean): void {
-    this.#focused = focused
-
-    if (focused) {
+    const changed = this.#focused !== focused
+    if (changed) {
+      this.#focused = focused
       this.onFocus()
     }
   }

package/src/hydration.ts

@@ -11,10 +11,8 @@ import type { Mutation, MutationState } from './mutation'
 // TYPES
 
 export interface DehydrateOptions {
-  dehydrateMutations?: boolean
-  dehydrateQueries?: boolean
-  shouldDehydrateMutation?: ShouldDehydrateMutationFunction
-  shouldDehydrateQuery?: ShouldDehydrateQueryFunction
+  shouldDehydrateMutation?: (mutation: Mutation) => boolean
+  shouldDehydrateQuery?: (query: Query) => boolean
 }
 
 export interface HydrateOptions {
@@ -40,10 +38,6 @@ export interface DehydratedState {
   queries: DehydratedQuery[]
 }
 
-export type ShouldDehydrateQueryFunction = (query: Query) => boolean
-
-export type ShouldDehydrateMutationFunction = (mutation: Mutation) => boolean
-
 // FUNCTIONS
 
 function dehydrateMutation(mutation: Mutation): DehydratedMutation {
@@ -77,36 +71,23 @@ export function dehydrate(
   client: QueryClient,
   options: DehydrateOptions = {},
 ): DehydratedState {
-  const mutations: DehydratedMutation[] = []
-  const queries: DehydratedQuery[] = []
-
-  if (options.dehydrateMutations !== false) {
-    const shouldDehydrateMutation =
-      options.shouldDehydrateMutation || defaultShouldDehydrateMutation
-
-    client
-      .getMutationCache()
-      .getAll()
-      .forEach((mutation) => {
-        if (shouldDehydrateMutation(mutation)) {
-          mutations.push(dehydrateMutation(mutation))
-        }
-      })
-  }
+  const filterMutation =
+    options.shouldDehydrateMutation ?? defaultShouldDehydrateMutation
+
+  const mutations = client
+    .getMutationCache()
+    .getAll()
+    .flatMap((mutation) =>
+      filterMutation(mutation) ? [dehydrateMutation(mutation)] : [],
+    )
 
-  if (options.dehydrateQueries !== false) {
-    const shouldDehydrateQuery =
-      options.shouldDehydrateQuery || defaultShouldDehydrateQuery
-
-    client
-      .getQueryCache()
-      .getAll()
-      .forEach((query) => {
-        if (shouldDehydrateQuery(query)) {
-          queries.push(dehydrateQuery(query))
-        }
-      })
-  }
+  const filterQuery =
+    options.shouldDehydrateQuery ?? defaultShouldDehydrateQuery
+
+  const queries = client
+    .getQueryCache()
+    .getAll()
+    .flatMap((query) => (filterQuery(query) ? [dehydrateQuery(query)] : []))
 
   return { mutations, queries }
 }

package/src/index.ts

@@ -2,6 +2,7 @@
 
 export { CancelledError } from './retryer'
 export { QueryCache } from './queryCache'
+export type { QueryCacheNotifyEvent } from './queryCache'
 export { QueryClient } from './queryClient'
 export { QueryObserver } from './queryObserver'
 export { QueriesObserver } from './queriesObserver'
@@ -23,8 +24,8 @@ export { isCancelledError } from './retryer'
 export {
   dehydrate,
   hydrate,
-  defaultShouldDehydrateMutation,
   defaultShouldDehydrateQuery,
+  defaultShouldDehydrateMutation,
 } from './hydration'
 
 // Types
@@ -35,6 +36,5 @@ export type {
   DehydrateOptions,
   DehydratedState,
   HydrateOptions,
-  ShouldDehydrateMutationFunction,
-  ShouldDehydrateQueryFunction,
 } from './hydration'
+export type { QueriesObserverOptions } from './queriesObserver'

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)
+          })
         }
       }
 
@@ -59,9 +63,10 @@ export class OnlineManager extends Subscribable {
   }
 
   setOnline(online?: boolean): void {
-    this.#online = online
+    const changed = this.#online !== online
 
-    if (online) {
+    if (changed) {
+      this.#online = online
       this.onOnline()
     }
   }

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[] {