feat: add support for concurrent mode (TanStack#1775)

Author: boschni

docs/src/pages/guides/placeholder-query-data.md

@@ -28,15 +28,12 @@ function Todos() {
 
 ### Placeholder Data as a Function
 
-If the process for accessing a query's placeholder data is intensive or just not something you want to perform on every render, you can pass a function as the `placeholderData` value. This function will be executed only once when the query is placeholderized, saving you precious memory and/or CPU:
+If the process for accessing a query's placeholder data is intensive or just not something you want to perform on every render, you can memoize the value or pass a memoized function as the `placeholderData` value:
 
 ```js
 function Todos() {
-  const result = useQuery('todos', () => fetch('/todos'), {
-    placeholderData: () => {
-      return generateFakeTodos()
-    },
-  })
+  const placeholderData = useMemo(() => generateFakeTodos(), [])
+  const result = useQuery('todos', () => fetch('/todos'), { placeholderData })
 }
 ```
 

src/core/infiniteQueryObserver.ts

@@ -12,6 +12,7 @@ import {
   hasPreviousPage,
   infiniteQueryBehavior,
 } from './infiniteQueryBehavior'
+import { Query } from './query'
 
 type InfiniteQueryObserverListener<TData, TError> = (
   result: InfiniteQueryObserverResult<TData, TError>
@@ -98,9 +99,17 @@ export class InfiniteQueryObserver<
     })
   }
 
-  protected getNewResult(): InfiniteQueryObserverResult<TData, TError> {
+  protected createResult(
+    query: Query<TQueryFnData, TError, InfiniteData<TQueryData>>,
+    options: InfiniteQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData
+    >
+  ): InfiniteQueryObserverResult<TData, TError> {
     const { state } = this.getCurrentQuery()
-    const result = super.getNewResult()
+    const result = super.createResult(query, options)
     return {
       ...result,
       fetchNextPage: this.fetchNextPage,

src/core/mutationObserver.ts

@@ -7,7 +7,6 @@ import type {
   MutationObserverResult,
   MutationObserverOptions,
 } from './types'
-import { getStatusProps } from './utils'
 
 // TYPES
 
@@ -132,7 +131,10 @@ export class MutationObserver<
 
     this.currentResult = {
       ...state,
-      ...getStatusProps(state.status),
+      isLoading: state.status === 'loading',
+      isSuccess: state.status === 'success',
+      isError: state.status === 'error',
+      isIdle: state.status === 'idle',
       mutate: this.mutate,
       reset: this.reset,
     }

src/core/queriesObserver.ts

@@ -2,7 +2,7 @@ import { difference, getQueryKeyHashFn, replaceAt } from './utils'
 import { notifyManager } from './notifyManager'
 import type { QueryObserverOptions, QueryObserverResult } from './types'
 import type { QueryClient } from './queryClient'
-import { QueryObserver } from './queryObserver'
+import { NotifyOptions, QueryObserver } from './queryObserver'
 import { Subscribable } from './subscribable'
 
 type QueriesObserverListener = (result: QueryObserverResult[]) => void
@@ -20,9 +20,7 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
     this.queries = queries || []
     this.result = []
     this.observers = []
-
-    // Subscribe to queries
-    this.updateObservers()
+    this.setQueries(this.queries)
   }
 
   protected onSubscribe(): void {
@@ -48,21 +46,21 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
     })
   }
 
-  setQueries(queries: QueryObserverOptions[]): void {
+  setQueries(
+    queries: QueryObserverOptions[],
+    notifyOptions?: NotifyOptions
+  ): void {
     this.queries = queries
-    this.updateObservers()
+    this.updateObservers(notifyOptions)
   }
 
   getCurrentResult(): QueryObserverResult[] {
     return this.result
   }
 
-  private updateObservers(): void {
-    let hasIndexChange = false
-
-    const prevObservers = this.observers
-    const newObservers = this.queries.map((options, i) => {
-      let observer: QueryObserver | undefined = prevObservers[i]
+  getOptimisticResult(queries: QueryObserverOptions[]): QueryObserverResult[] {
+    return queries.map((options, i) => {
+      let observer: QueryObserver | undefined = this.observers[i]
 
       const defaultedOptions = this.client.defaultQueryObserverOptions(options)
       const hashFn = getQueryKeyHashFn(defaultedOptions)
@@ -72,42 +70,74 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
         !observer ||
         observer.getCurrentQuery().queryHash !== defaultedOptions.queryHash
       ) {
-        hasIndexChange = true
-        observer = prevObservers.find(
+        observer = this.observers.find(
           x => x.getCurrentQuery().queryHash === defaultedOptions.queryHash
         )
       }
 
-      if (observer) {
-        observer.setOptions(defaultedOptions)
-        return observer
+      if (!observer) {
+        observer = new QueryObserver(this.client, defaultedOptions)
       }
 
-      return new QueryObserver(this.client, defaultedOptions)
+      return observer.getOptimisticResult(defaultedOptions)
     })
+  }
 
-    if (prevObservers.length === newObservers.length && !hasIndexChange) {
-      return
-    }
+  private updateObservers(notifyOptions?: NotifyOptions): void {
+    notifyManager.batch(() => {
+      let hasIndexChange = false
 
-    this.observers = newObservers
-    this.result = newObservers.map(observer => observer.getCurrentResult())
+      const prevObservers = this.observers
+      const newObservers = this.queries.map((options, i) => {
+        let observer: QueryObserver | undefined = prevObservers[i]
 
-    if (!this.listeners.length) {
-      return
-    }
+        const defaultedOptions = this.client.defaultQueryObserverOptions(
+          options
+        )
+        const hashFn = getQueryKeyHashFn(defaultedOptions)
+        defaultedOptions.queryHash = hashFn(defaultedOptions.queryKey!)
+
+        if (
+          !observer ||
+          observer.getCurrentQuery().queryHash !== defaultedOptions.queryHash
+        ) {
+          hasIndexChange = true
+          observer = prevObservers.find(
+            x => x.getCurrentQuery().queryHash === defaultedOptions.queryHash
+          )
+        }
+
+        if (observer) {
+          observer.setOptions(defaultedOptions, notifyOptions)
+          return observer
+        }
+
+        return new QueryObserver(this.client, defaultedOptions)
+      })
 
-    difference(prevObservers, newObservers).forEach(observer => {
-      observer.destroy()
-    })
+      if (prevObservers.length === newObservers.length && !hasIndexChange) {
+        return
+      }
 
-    difference(newObservers, prevObservers).forEach(observer => {
-      observer.subscribe(result => {
-        this.onUpdate(observer, result)
+      this.observers = newObservers
+      this.result = newObservers.map(observer => observer.getCurrentResult())
+
+      if (!this.listeners.length) {
+        return
+      }
+
+      difference(prevObservers, newObservers).forEach(observer => {
+        observer.destroy()
       })
-    })
 
-    this.notify()
+      difference(newObservers, prevObservers).forEach(observer => {
+        observer.subscribe(result => {
+          this.onUpdate(observer, result)
+        })
+      })
+
+      this.notify()
+    })
   }
 
   private onUpdate(observer: QueryObserver, result: QueryObserverResult): void {

src/core/query.ts

@@ -260,7 +260,7 @@ export class Query<
   }
 
   onFocus(): void {
-    const observer = this.observers.find(x => x.willFetchOnWindowFocus())
+    const observer = this.observers.find(x => x.shouldFetchOnWindowFocus())
 
     if (observer) {
       observer.refetch()
@@ -271,7 +271,7 @@ export class Query<
   }
 
   onOnline(): void {
-    const observer = this.observers.find(x => x.willFetchOnReconnect())
+    const observer = this.observers.find(x => x.shouldFetchOnReconnect())
 
     if (observer) {
       observer.refetch()
@@ -328,14 +328,15 @@ export class Query<
     options?: QueryOptions<TQueryFnData, TError, TData>,
     fetchOptions?: FetchOptions
   ): Promise<TData> {
-    if (this.state.isFetching)
+    if (this.state.isFetching) {
       if (this.state.dataUpdatedAt && fetchOptions?.cancelRefetch) {
         // Silently cancel current fetch if the user wants to cancel refetches
         this.cancel({ silent: true })
       } else if (this.promise) {
         // Return current promise if we are already fetching
         return this.promise
       }
+    }
 
     // Update config if passed, otherwise the config from the last execution is used
     if (options) {

src/core/queryCache.ts

@@ -42,9 +42,8 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
     options: QueryOptions<TQueryFnData, TError, TData>,
     state?: QueryState<TData, TError>
   ): Query<TQueryFnData, TError, TData> {
-    const hashFn = getQueryKeyHashFn(options)
     const queryKey = options.queryKey!
-    const queryHash = options.queryHash ?? hashFn(queryKey)
+    const queryHash = options.queryHash ?? getQueryKeyHashFn(options)(queryKey)
     let query = this.get<TQueryFnData, TError, TData>(queryHash)
 
     if (!query) {

src/core/queryClient.ts

@@ -6,6 +6,7 @@ import {
   parseFilterArgs,
   parseQueryArgs,
   partialMatchKey,
+  getQueryKeyHashFn,
 } from './utils'
 import type {
   DefaultOptions,
@@ -446,12 +447,21 @@ export class QueryClient {
     if (options?._defaulted) {
       return options
     }
-    return {
+
+    const defaultedOptions = {
       ...this.defaultOptions.queries,
       ...this.getQueryDefaults(options?.queryKey),
       ...options,
       _defaulted: true,
     } as T
+
+    if (!defaultedOptions.queryHash && defaultedOptions.queryKey) {
+      defaultedOptions.queryHash = getQueryKeyHashFn(defaultedOptions)(
+        defaultedOptions.queryKey
+      )
+    }
+
+    return defaultedOptions
   }
 
   defaultQueryObserverOptions<