@tanstack/lit-query 0.2.6 → 0.2.7

package/src/createQueriesController.ts

@@ -1,5 +1,6 @@
 import {
   QueriesObserver,
+  replaceEqualDeep,
   type DefaultError,
   type DefinedQueryObserverResult,
   type OmitKeyof,
@@ -322,6 +323,10 @@ class QueriesController<
   private observer: QueriesObserver<TCombinedResult> | undefined
   private unsubscribe: (() => void) | undefined
   private queryClient: QueryClient | undefined
+  private queries: Array<QueryObserverOptions> = []
+  private combine: QueriesObserverOptions<TCombinedResult>['combine']
+  private combinedResult: TCombinedResult | undefined
+  private rawResult: Array<QueryObserverResult> = []
   private explicitInitializationError: unknown | undefined
   private placeholderInitialized = false
   private placeholderRetryableFailure = true
@@ -394,8 +399,7 @@ class QueriesController<
     }
 
     this.unsubscribe = this.observer.subscribe((next) => {
-      const { combine } = this.readResolvedOptions()
-      this.setResult(this.computeResult(next, combine))
+      this.setObserverResult(next)
     })
   }
 
@@ -405,12 +409,14 @@ class QueriesController<
         this.options,
         queryClient,
       )
-      const observer = new QueriesObserver(queryClient, queries, {
-        combine,
+      this.queries = queries
+      this.combine = combine
+      const observer = new QueriesObserver(queryClient, this.queries, {
+        combine: this.combine,
       } as QueriesObserverOptions<TCombinedResult>)
       this.queryClient = queryClient
       this.observer = observer
-      this.result = this.computeResult(observer.getCurrentResult(), combine)
+      this.assignObserverResult(observer.getCurrentResult(), true)
       this.explicitInitializationError = undefined
       this.placeholderInitialized = true
       return true
@@ -448,6 +454,10 @@ class QueriesController<
       this.unsubscribeObserver()
       this.queryClient = undefined
       this.observer = undefined
+      this.queries = []
+      this.combine = undefined
+      this.combinedResult = undefined
+      this.rawResult = []
       this.setPlaceholderResult()
       return false
     }
@@ -459,12 +469,12 @@ class QueriesController<
     this.unsubscribeObserver()
     this.queryClient = nextClient
     const { queries, combine } = this.readResolvedOptions()
-    this.observer = new QueriesObserver(this.queryClient, queries, {
-      combine,
+    this.queries = queries
+    this.combine = combine
+    this.observer = new QueriesObserver(this.queryClient, this.queries, {
+      combine: this.combine,
     } as QueriesObserverOptions<TCombinedResult>)
-    this.setResult(
-      this.computeResult(this.observer.getCurrentResult(), combine),
-    )
+    this.setObserverResult(this.observer.getCurrentResult(), true)
     this.placeholderInitialized = true
     return true
   }
@@ -475,17 +485,14 @@ class QueriesController<
     }
 
     const { queries, combine } = this.readResolvedOptions()
+    this.queries = queries
+    this.combine = combine
 
-    this.observer.setQueries(queries, {
-      combine,
+    this.observer.setQueries(this.queries, {
+      combine: this.combine,
     } as QueriesObserverOptions<TCombinedResult>)
 
-    const [rawResult, getCombinedResult] = this.observer.getOptimisticResult(
-      queries,
-      combine,
-    )
-
-    this.setResult(getCombinedResult(rawResult))
+    this.setObserverResult(this.observer.getCurrentResult(), true)
     return true
   }
 
@@ -513,11 +520,87 @@ class QueriesController<
     return typeof this.options.queries === 'function'
   }
 
-  private computeResult(
+  private createResult(rawResult: Array<QueryObserverResult>): TCombinedResult {
+    const trackedResult = this.trackResult(rawResult)
+    const combine = this.combine
+
+    if (!combine) {
+      return trackedResult as TCombinedResult
+    }
+
+    this.combinedResult = replaceEqualDeep(
+      this.combinedResult,
+      combine(trackedResult),
+    ) as TCombinedResult
+
+    return this.combinedResult
+  }
+
+  private assignObserverResult(
     rawResult: Array<QueryObserverResult>,
-    combine: QueriesObserverOptions<TCombinedResult>['combine'],
-  ): TCombinedResult {
-    return (combine ? combine(rawResult) : rawResult) as TCombinedResult
+    force = false,
+  ): void {
+    if (!force && this.hasObserverResult(rawResult)) {
+      return
+    }
+
+    this.rawResult = rawResult
+    this.result = this.createResult(rawResult)
+  }
+
+  private setObserverResult(
+    rawResult: Array<QueryObserverResult>,
+    force = false,
+  ): void {
+    if (!force && this.hasObserverResult(rawResult)) {
+      return
+    }
+
+    this.rawResult = rawResult
+    this.setResult(this.createResult(rawResult))
+  }
+
+  private hasObserverResult(rawResult: Array<QueryObserverResult>): boolean {
+    return (
+      this.rawResult.length === rawResult.length &&
+      rawResult.every((result, index) =>
+        Object.is(this.rawResult[index], result),
+      )
+    )
+  }
+
+  private getCurrentObserverResults(): Array<QueryObserverResult> {
+    if (!this.observer) {
+      return []
+    }
+
+    return this.observer
+      .getObservers()
+      .map((observer) => observer.getCurrentResult())
+  }
+
+  private trackResult(
+    rawResult: Array<QueryObserverResult>,
+  ): Array<QueryObserverResult> {
+    if (!this.observer) {
+      return rawResult
+    }
+
+    const observers = this.observer.getObservers()
+
+    return rawResult.map((result, index) => {
+      const observer = observers[index]
+
+      if (!observer || observer.options.notifyOnChangeProps) {
+        return result
+      }
+
+      return observer.trackResult(result, (accessedProp) => {
+        observers.forEach((observer) => {
+          observer.trackProp(accessedProp)
+        })
+      })
+    })
   }
 
   private static createPlaceholderResult<TCombinedResult>(
@@ -559,10 +642,15 @@ class QueriesController<
       }
     }
 
+    if (this.observer) {
+      this.assignObserverResult(this.getCurrentObserverResults())
+    }
+
     return this.current
   }
 
   private setPlaceholderResult(): void {
+    this.rawResult = []
     this.result = QueriesController.createPlaceholderResult(this.options)
     this.placeholderInitialized = true
   }

package/src/createQueryController.ts

@@ -16,6 +16,7 @@ import {
 } from './accessor.js'
 import { createMissingQueryClientError } from './context.js'
 import { BaseController } from './controllers/BaseController.js'
+import { QueryObserverResultTracker } from './queryObserverResultTracker.js'
 
 /**
  * Options accepted by `createQueryController`.
@@ -100,6 +101,9 @@ class QueryController<
   private observer:
     | QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>
     | undefined
+  private readonly resultTracker = new QueryObserverResultTracker<
+    QueryObserverResult<TData, TError>
+  >()
   private unsubscribe: (() => void) | undefined
   private queryClient: QueryClient | undefined
 
@@ -126,7 +130,7 @@ class QueryController<
     const observer = new QueryObserver(initialClient, defaulted)
     this.queryClient = initialClient
     this.observer = observer
-    this.result = observer.getOptimisticResult(defaulted)
+    this.assignObserverResult(observer.getOptimisticResult(defaulted))
   }
 
   protected onConnected(): void {
@@ -138,7 +142,7 @@ class QueryController<
     this.subscribe()
     this.observer?.updateResult()
     if (this.observer) {
-      this.setResult(this.observer.getCurrentResult())
+      this.setObserverResult(this.observer.getCurrentResult())
     }
   }
 
@@ -168,16 +172,16 @@ class QueryController<
     this.subscribe()
     this.observer?.updateResult()
     if (this.observer) {
-      this.setResult(this.observer.getCurrentResult())
+      this.setObserverResult(this.observer.getCurrentResult())
     }
   }
 
   refetch: QueryObserverResult<TData, TError>['refetch'] = (...args) => {
-    if (!this.refreshOptions()) {
+    if (!this.applyOptions() || !this.observer) {
       return Promise.reject(createMissingQueryClientError())
     }
 
-    return this.result.refetch(...args)
+    return this.observer.refetch(...args)
   }
 
   suspense = async (): Promise<QueryObserverResult<TData, TError>> => {
@@ -195,6 +199,14 @@ class QueryController<
     return optimistic
   }
 
+  readCurrent(): QueryObserverResult<TData, TError> {
+    if (this.observer) {
+      this.assignObserverResult(this.observer.getCurrentResult())
+    }
+
+    return this.current
+  }
+
   private subscribe(): void {
     if (!this.observer) {
       return
@@ -205,7 +217,7 @@ class QueryController<
     }
 
     this.unsubscribe = this.observer.subscribe((next) => {
-      this.setResult(next)
+      this.setObserverResult(next)
     })
   }
 
@@ -220,6 +232,7 @@ class QueryController<
       this.unsubscribeObserver()
       this.queryClient = undefined
       this.observer = undefined
+      this.resultTracker.reset()
       this.setResult(createPendingQueryResult())
       return false
     }
@@ -232,21 +245,45 @@ class QueryController<
     this.queryClient = nextClient
     const options = this.defaultOptions()
     this.observer = new QueryObserver(this.queryClient, options)
-    this.setResult(this.observer.getOptimisticResult(options))
+    this.setObserverResult(this.observer.getOptimisticResult(options))
     return true
   }
 
-  private refreshOptions(): boolean {
+  private applyOptions(): boolean {
     if (!this.syncClient() || !this.observer) {
       return false
     }
 
     const options = this.defaultOptions(this.queryClient)
     this.observer.setOptions(options)
-    this.setResult(this.observer.getCurrentResult())
     return true
   }
 
+  private refreshOptions(): boolean {
+    if (!this.applyOptions() || !this.observer) {
+      return false
+    }
+
+    this.setObserverResult(this.observer.getCurrentResult())
+    return true
+  }
+
+  private assignObserverResult(
+    result: QueryObserverResult<TData, TError>,
+  ): void {
+    const trackedResult = this.resultTracker.update(this.observer, result)
+    if (trackedResult) {
+      this.result = trackedResult
+    }
+  }
+
+  private setObserverResult(result: QueryObserverResult<TData, TError>): void {
+    const trackedResult = this.resultTracker.update(this.observer, result)
+    if (trackedResult) {
+      this.setResult(trackedResult)
+    }
+  }
+
   private defaultOptions(
     client = this.queryClient,
   ): DefaultedQueryObserverOptions<
@@ -332,7 +369,7 @@ export function createQueryController<
   const controller = new QueryController(host, options, queryClient)
 
   return Object.assign(
-    createValueAccessor(() => controller.current),
+    createValueAccessor(() => controller.readCurrent()),
     {
       refetch: controller.refetch,
       suspense: controller.suspense,

package/src/queryObserverResultTracker.ts

@@ -0,0 +1,30 @@
+type TrackableQueryObserver<TResult extends object> = {
+  options: { notifyOnChangeProps?: unknown }
+  trackResult: (result: TResult) => unknown
+}
+
+export class QueryObserverResultTracker<TResult extends object> {
+  private result: TResult | undefined
+  private usesTracking = false
+
+  reset(): void {
+    this.result = undefined
+    this.usesTracking = false
+  }
+
+  update(
+    observer: TrackableQueryObserver<TResult> | undefined,
+    result: TResult,
+  ): TResult | undefined {
+    const usesTracking = !!observer && !observer.options.notifyOnChangeProps
+
+    if (Object.is(this.result, result) && this.usesTracking === usesTracking) {
+      return undefined
+    }
+
+    this.result = result
+    this.usesTracking = usesTracking
+
+    return usesTracking ? (observer.trackResult(result) as TResult) : result
+  }
+}

package/src/useMutationState.ts

@@ -1,8 +1,9 @@
-import type {
-  Mutation,
-  MutationFilters,
-  MutationState,
-  QueryClient,
+import {
+  replaceEqualDeep,
+  type Mutation,
+  type MutationFilters,
+  type MutationState,
+  type QueryClient,
 } from '@tanstack/query-core'
 import type { ReactiveControllerHost } from 'lit'
 import {
@@ -55,12 +56,12 @@ class MutationStateController<TResult> extends BaseController<TResult[]> {
 
   protected onConnected(): void {
     if (!this.syncClient()) {
-      this.setResult([])
+      this.setMutationState([])
       return
     }
 
     this.subscribe()
-    this.setResult(this.computeState())
+    this.setMutationState(this.computeState())
   }
 
   protected onDisconnected(): void {
@@ -74,18 +75,18 @@ class MutationStateController<TResult> extends BaseController<TResult[]> {
       return
     }
 
-    this.setResult(this.syncClient() ? this.computeState() : [])
+    this.setMutationState(this.syncClient() ? this.computeState() : [])
   }
 
   protected onQueryClientChanged(): void {
     if (!this.syncClient()) {
-      this.setResult([])
+      this.setMutationState([])
       return
     }
 
     if (this.connectedState) {
       this.subscribe()
-      this.setResult(this.computeState())
+      this.setMutationState(this.computeState())
     }
   }
 
@@ -118,10 +119,14 @@ class MutationStateController<TResult> extends BaseController<TResult[]> {
     }
 
     this.unsubscribe = this.queryClient.getMutationCache().subscribe(() => {
-      this.setResult(this.computeState())
+      this.setMutationState(this.computeState())
     })
   }
 
+  private setMutationState(next: TResult[]): void {
+    this.setResult(replaceEqualDeep(this.result, next))
+  }
+
   private shouldRefreshOnHostUpdate(): boolean {
     return (
       typeof this.options.filters === 'function' ||