@tanstack/query-core 4.24.10 → 5.0.0-alpha.0

package/src/mutationObserver.ts

@@ -5,9 +5,9 @@ import type { QueryClient } from './queryClient'
 import { Subscribable } from './subscribable'
 import type {
   MutateOptions,
-  MutationObserverBaseResult,
   MutationObserverResult,
   MutationObserverOptions,
+  RegisteredError,
 } from './types'
 import { shallowEqualObjects } from './utils'
 
@@ -17,17 +17,11 @@ type MutationObserverListener<TData, TError, TVariables, TContext> = (
   result: MutationObserverResult<TData, TError, TVariables, TContext>,
 ) => void
 
-interface NotifyOptions {
-  listeners?: boolean
-  onError?: boolean
-  onSuccess?: boolean
-}
-
 // CLASS
 
 export class MutationObserver<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TVariables = void,
   TContext = unknown,
 > extends Subscribable<
@@ -35,15 +29,11 @@ export class MutationObserver<
 > {
   options!: MutationObserverOptions<TData, TError, TVariables, TContext>
 
-  private client: QueryClient
-  private currentResult!: MutationObserverResult<
-    TData,
-    TError,
-    TVariables,
-    TContext
-  >
-  private currentMutation?: Mutation<TData, TError, TVariables, TContext>
-  private mutateOptions?: MutateOptions<TData, TError, TVariables, TContext>
+  #client: QueryClient
+  #currentResult: MutationObserverResult<TData, TError, TVariables, TContext> =
+    undefined!
+  #currentMutation?: Mutation<TData, TError, TVariables, TContext>
+  #mutateOptions?: MutateOptions<TData, TError, TVariables, TContext>
 
   constructor(
     client: QueryClient,
@@ -51,10 +41,10 @@ export class MutationObserver<
   ) {
     super()
 
-    this.client = client
+    this.#client = client
     this.setOptions(options)
     this.bindMethods()
-    this.updateResult()
+    this.#updateResult()
   }
 
   protected bindMethods(): void {
@@ -66,11 +56,11 @@ export class MutationObserver<
     options?: MutationObserverOptions<TData, TError, TVariables, TContext>,
   ) {
     const prevOptions = this.options
-    this.options = this.client.defaultMutationOptions(options)
+    this.options = this.#client.defaultMutationOptions(options)
     if (!shallowEqualObjects(prevOptions, this.options)) {
-      this.client.getMutationCache().notify({
+      this.#client.getMutationCache().notify({
         type: 'observerOptionsUpdated',
-        mutation: this.currentMutation,
+        mutation: this.#currentMutation,
         observer: this,
       })
     }
@@ -78,25 +68,14 @@ export class MutationObserver<
 
   protected onUnsubscribe(): void {
     if (!this.listeners.length) {
-      this.currentMutation?.removeObserver(this)
+      this.#currentMutation?.removeObserver(this)
     }
   }
 
   onMutationUpdate(action: Action<TData, TError, TVariables, TContext>): void {
-    this.updateResult()
-
-    // Determine which callbacks to trigger
-    const notifyOptions: NotifyOptions = {
-      listeners: true,
-    }
-
-    if (action.type === 'success') {
-      notifyOptions.onSuccess = true
-    } else if (action.type === 'error') {
-      notifyOptions.onError = true
-    }
+    this.#updateResult()
 
-    this.notify(notifyOptions)
+    this.#notify(action)
   }
 
   getCurrentResult(): MutationObserverResult<
@@ -105,101 +84,85 @@ export class MutationObserver<
     TVariables,
     TContext
   > {
-    return this.currentResult
+    return this.#currentResult
   }
 
   reset(): void {
-    this.currentMutation = undefined
-    this.updateResult()
-    this.notify({ listeners: true })
+    this.#currentMutation = undefined
+    this.#updateResult()
+    this.#notify()
   }
 
   mutate(
-    variables?: TVariables,
+    variables: TVariables,
     options?: MutateOptions<TData, TError, TVariables, TContext>,
   ): Promise<TData> {
-    this.mutateOptions = options
+    this.#mutateOptions = options
 
-    if (this.currentMutation) {
-      this.currentMutation.removeObserver(this)
-    }
+    this.#currentMutation?.removeObserver(this)
 
-    this.currentMutation = this.client.getMutationCache().build(this.client, {
-      ...this.options,
-      variables:
-        typeof variables !== 'undefined' ? variables : this.options.variables,
-    })
+    this.#currentMutation = this.#client
+      .getMutationCache()
+      .build(this.#client, {
+        ...this.options,
+      })
 
-    this.currentMutation.addObserver(this)
+    this.#currentMutation.addObserver(this)
 
-    return this.currentMutation.execute()
+    return this.#currentMutation.execute(variables)
   }
 
-  private updateResult(): void {
-    const state = this.currentMutation
-      ? this.currentMutation.state
-      : getDefaultState<TData, TError, TVariables, TContext>()
-
-    const result: MutationObserverBaseResult<
-      TData,
-      TError,
-      TVariables,
-      TContext
-    > = {
+  #updateResult(): void {
+    const state =
+      this.#currentMutation?.state ??
+      getDefaultState<TData, TError, TVariables, TContext>()
+
+    this.#currentResult = {
       ...state,
-      isLoading: state.status === 'loading',
+      isPending: state.status === 'pending',
       isSuccess: state.status === 'success',
       isError: state.status === 'error',
       isIdle: state.status === 'idle',
       mutate: this.mutate,
       reset: this.reset,
-    }
-
-    this.currentResult = result as MutationObserverResult<
-      TData,
-      TError,
-      TVariables,
-      TContext
-    >
+    } as MutationObserverResult<TData, TError, TVariables, TContext>
   }
 
-  private notify(options: NotifyOptions) {
+  #notify(action?: Action<TData, TError, TVariables, TContext>): void {
     notifyManager.batch(() => {
       // First trigger the mutate callbacks
-      if (this.mutateOptions && this.hasListeners()) {
-        if (options.onSuccess) {
-          this.mutateOptions.onSuccess?.(
-            this.currentResult.data!,
-            this.currentResult.variables!,
-            this.currentResult.context!,
+      if (this.#mutateOptions && this.hasListeners()) {
+        if (action?.type === 'success') {
+          this.#mutateOptions.onSuccess?.(
+            action.data,
+            this.#currentResult.variables!,
+            this.#currentResult.context!,
           )
-          this.mutateOptions.onSettled?.(
-            this.currentResult.data!,
+          this.#mutateOptions.onSettled?.(
+            action.data,
             null,
-            this.currentResult.variables!,
-            this.currentResult.context,
+            this.#currentResult.variables!,
+            this.#currentResult.context,
           )
-        } else if (options.onError) {
-          this.mutateOptions.onError?.(
-            this.currentResult.error!,
-            this.currentResult.variables!,
-            this.currentResult.context,
+        } else if (action?.type === 'error') {
+          this.#mutateOptions.onError?.(
+            action.error,
+            this.#currentResult.variables!,
+            this.#currentResult.context,
           )
-          this.mutateOptions.onSettled?.(
+          this.#mutateOptions.onSettled?.(
             undefined,
-            this.currentResult.error,
-            this.currentResult.variables!,
-            this.currentResult.context,
+            action.error,
+            this.#currentResult.variables!,
+            this.#currentResult.context,
           )
         }
       }
 
       // Then trigger the listeners
-      if (options.listeners) {
-        this.listeners.forEach((listener) => {
-          listener(this.currentResult)
-        })
-      }
+      this.listeners.forEach((listener) => {
+        listener(this.#currentResult)
+      })
     })
   }
 }

package/src/onlineManager.ts

@@ -6,14 +6,14 @@ type SetupFn = (
 ) => (() => void) | undefined
 
 export class OnlineManager extends Subscribable {
-  private online?: boolean
-  private cleanup?: () => void
+  #online?: boolean
+  #cleanup?: () => void
 
-  private setup: SetupFn
+  #setup: SetupFn
 
   constructor() {
     super()
-    this.setup = (onOnline) => {
+    this.#setup = (onOnline) => {
       // addEventListener does not exist in React Native, but window does
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (!isServer && window.addEventListener) {
@@ -34,22 +34,22 @@ export class OnlineManager extends Subscribable {
   }
 
   protected onSubscribe(): void {
-    if (!this.cleanup) {
-      this.setEventListener(this.setup)
+    if (!this.#cleanup) {
+      this.setEventListener(this.#setup)
     }
   }
 
   protected onUnsubscribe() {
     if (!this.hasListeners()) {
-      this.cleanup?.()
-      this.cleanup = undefined
+      this.#cleanup?.()
+      this.#cleanup = undefined
     }
   }
 
   setEventListener(setup: SetupFn): void {
-    this.setup = setup
-    this.cleanup?.()
-    this.cleanup = setup((online?: boolean) => {
+    this.#setup = setup
+    this.#cleanup?.()
+    this.#cleanup = setup((online?: boolean) => {
       if (typeof online === 'boolean') {
         this.setOnline(online)
       } else {
@@ -59,7 +59,7 @@ export class OnlineManager extends Subscribable {
   }
 
   setOnline(online?: boolean): void {
-    this.online = online
+    this.#online = online
 
     if (online) {
       this.onOnline()
@@ -73,8 +73,8 @@ export class OnlineManager extends Subscribable {
   }
 
   isOnline(): boolean {
-    if (typeof this.online === 'boolean') {
-      return this.online
+    if (typeof this.#online === 'boolean') {
+      return this.#online
     }
 
     if (

package/src/queriesObserver.ts

@@ -1,4 +1,3 @@
-import { difference, replaceAt } from './utils'
 import { notifyManager } from './notifyManager'
 import type {
   QueryObserverOptions,
@@ -10,23 +9,33 @@ import type { NotifyOptions } from './queryObserver'
 import { QueryObserver } from './queryObserver'
 import { Subscribable } from './subscribable'
 
+function difference<T>(array1: T[], array2: T[]): T[] {
+  return array1.filter((x) => array2.indexOf(x) === -1)
+}
+
+function replaceAt<T>(array: T[], index: number, value: T): T[] {
+  const copy = array.slice(0)
+  copy[index] = value
+  return copy
+}
+
 type QueriesObserverListener = (result: QueryObserverResult[]) => void
 
 export class QueriesObserver extends Subscribable<QueriesObserverListener> {
-  private client: QueryClient
-  private result: QueryObserverResult[]
-  private queries: QueryObserverOptions[]
-  private observers: QueryObserver[]
-  private observersMap: Record<string, QueryObserver>
+  #client: QueryClient
+  #result: QueryObserverResult[]
+  #queries: QueryObserverOptions[]
+  #observers: QueryObserver[]
+  #observersMap: Record<string, QueryObserver>
 
   constructor(client: QueryClient, queries?: QueryObserverOptions[]) {
     super()
 
-    this.client = client
-    this.queries = []
-    this.result = []
-    this.observers = []
-    this.observersMap = {}
+    this.#client = client
+    this.#queries = []
+    this.#result = []
+    this.#observers = []
+    this.#observersMap = {}
 
     if (queries) {
       this.setQueries(queries)
@@ -35,9 +44,9 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
 
   protected onSubscribe(): void {
     if (this.listeners.length === 1) {
-      this.observers.forEach((observer) => {
+      this.#observers.forEach((observer) => {
         observer.subscribe((result) => {
-          this.onUpdate(observer, result)
+          this.#onUpdate(observer, result)
         })
       })
     }
@@ -51,7 +60,7 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
 
   destroy(): void {
     this.listeners = []
-    this.observers.forEach((observer) => {
+    this.#observers.forEach((observer) => {
       observer.destroy()
     })
   }
@@ -60,12 +69,12 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
     queries: QueryObserverOptions[],
     notifyOptions?: NotifyOptions,
   ): void {
-    this.queries = queries
+    this.#queries = queries
 
     notifyManager.batch(() => {
-      const prevObservers = this.observers
+      const prevObservers = this.#observers
 
-      const newObserverMatches = this.findMatchingObservers(this.queries)
+      const newObserverMatches = this.#findMatchingObservers(this.#queries)
 
       // set options for the new observers to notify of changes
       newObserverMatches.forEach((match) =>
@@ -87,9 +96,9 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
         return
       }
 
-      this.observers = newObservers
-      this.observersMap = newObserversMap
-      this.result = newResult
+      this.#observers = newObservers
+      this.#observersMap = newObserversMap
+      this.#result = newResult
 
       if (!this.hasListeners()) {
         return
@@ -101,38 +110,38 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
 
       difference(newObservers, prevObservers).forEach((observer) => {
         observer.subscribe((result) => {
-          this.onUpdate(observer, result)
+          this.#onUpdate(observer, result)
         })
       })
 
-      this.notify()
+      this.#notify()
     })
   }
 
   getCurrentResult(): QueryObserverResult[] {
-    return this.result
+    return this.#result
   }
 
   getQueries() {
-    return this.observers.map((observer) => observer.getCurrentQuery())
+    return this.#observers.map((observer) => observer.getCurrentQuery())
   }
 
   getObservers() {
-    return this.observers
+    return this.#observers
   }
 
   getOptimisticResult(queries: QueryObserverOptions[]): QueryObserverResult[] {
-    return this.findMatchingObservers(queries).map((match) =>
+    return this.#findMatchingObservers(queries).map((match) =>
       match.observer.getOptimisticResult(match.defaultedQueryOptions),
     )
   }
 
-  private findMatchingObservers(
+  #findMatchingObservers(
     queries: QueryObserverOptions[],
   ): QueryObserverMatch[] {
-    const prevObservers = this.observers
+    const prevObservers = this.#observers
     const defaultedQueryOptions = queries.map((options) =>
-      this.client.defaultQueryOptions(options),
+      this.#client.defaultQueryOptions(options),
     )
 
     const matchingObservers: QueryObserverMatch[] =
@@ -155,29 +164,16 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
         !matchedQueryHashes.includes(defaultedOptions.queryHash),
     )
 
-    const unmatchedObservers = prevObservers.filter(
-      (prevObserver) =>
-        !matchingObservers.some((match) => match.observer === prevObserver),
-    )
-
     const getObserver = (options: QueryObserverOptions): QueryObserver => {
-      const defaultedOptions = this.client.defaultQueryOptions(options)
-      const currentObserver = this.observersMap[defaultedOptions.queryHash!]
-      return currentObserver ?? new QueryObserver(this.client, defaultedOptions)
+      const defaultedOptions = this.#client.defaultQueryOptions(options)
+      const currentObserver = this.#observersMap[defaultedOptions.queryHash!]
+      return (
+        currentObserver ?? new QueryObserver(this.#client, defaultedOptions)
+      )
     }
 
     const newOrReusedObservers: QueryObserverMatch[] = unmatchedQueries.map(
-      (options, index) => {
-        if (options.keepPreviousData) {
-          // return previous data from one of the observers that no longer match
-          const previouslyUsedObserver = unmatchedObservers[index]
-          if (previouslyUsedObserver !== undefined) {
-            return {
-              defaultedQueryOptions: options,
-              observer: previouslyUsedObserver,
-            }
-          }
-        }
+      (options) => {
         return {
           defaultedQueryOptions: options,
           observer: getObserver(options),
@@ -197,18 +193,18 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
       .sort(sortMatchesByOrderOfQueries)
   }
 
-  private onUpdate(observer: QueryObserver, result: QueryObserverResult): void {
-    const index = this.observers.indexOf(observer)
+  #onUpdate(observer: QueryObserver, result: QueryObserverResult): void {
+    const index = this.#observers.indexOf(observer)
     if (index !== -1) {
-      this.result = replaceAt(this.result, index, result)
-      this.notify()
+      this.#result = replaceAt(this.#result, index, result)
+      this.#notify()
     }
   }
 
-  private notify(): void {
+  #notify(): void {
     notifyManager.batch(() => {
       this.listeners.forEach((listener) => {
-        listener(this.result)
+        listener(this.#result)
       })
     })
   }