@tanstack/angular-query-experimental 5.73.3 → 5.74.1

package/src/inject-is-mutating.ts

@@ -1,8 +1,14 @@
-import { DestroyRef, NgZone, inject, signal } from '@angular/core'
+import {
+  DestroyRef,
+  Injector,
+  NgZone,
+  assertInInjectionContext,
+  inject,
+  signal,
+} from '@angular/core'
 import { QueryClient, notifyManager } from '@tanstack/query-core'
-import { assertInjector } from './util/assert-injector/assert-injector'
 import type { MutationFilters } from '@tanstack/query-core'
-import type { Injector, Signal } from '@angular/core'
+import type { Signal } from '@angular/core'
 
 export interface InjectIsMutatingOptions {
   /**
@@ -26,34 +32,34 @@ export function injectIsMutating(
   filters?: MutationFilters,
   options?: InjectIsMutatingOptions,
 ): Signal<number> {
-  return assertInjector(injectIsMutating, options?.injector, () => {
-    const destroyRef = inject(DestroyRef)
-    const ngZone = inject(NgZone)
-    const queryClient = inject(QueryClient)
+  !options?.injector && assertInInjectionContext(injectIsMutating)
+  const injector = options?.injector ?? inject(Injector)
+  const destroyRef = injector.get(DestroyRef)
+  const ngZone = injector.get(NgZone)
+  const queryClient = injector.get(QueryClient)
 
-    const cache = queryClient.getMutationCache()
-    // isMutating is the prev value initialized on mount *
-    let isMutating = queryClient.isMutating(filters)
+  const cache = queryClient.getMutationCache()
+  // isMutating is the prev value initialized on mount *
+  let isMutating = queryClient.isMutating(filters)
 
-    const result = signal(isMutating)
+  const result = signal(isMutating)
 
-    const unsubscribe = ngZone.runOutsideAngular(() =>
-      cache.subscribe(
-        notifyManager.batchCalls(() => {
-          const newIsMutating = queryClient.isMutating(filters)
-          if (isMutating !== newIsMutating) {
-            // * and update with each change
-            isMutating = newIsMutating
-            ngZone.run(() => {
-              result.set(isMutating)
-            })
-          }
-        }),
-      ),
-    )
+  const unsubscribe = ngZone.runOutsideAngular(() =>
+    cache.subscribe(
+      notifyManager.batchCalls(() => {
+        const newIsMutating = queryClient.isMutating(filters)
+        if (isMutating !== newIsMutating) {
+          // * and update with each change
+          isMutating = newIsMutating
+          ngZone.run(() => {
+            result.set(isMutating)
+          })
+        }
+      }),
+    ),
+  )
 
-    destroyRef.onDestroy(unsubscribe)
+  destroyRef.onDestroy(unsubscribe)
 
-    return result
-  })
+  return result
 }

package/src/inject-is-restoring.ts

@@ -0,0 +1,50 @@
+import {
+  InjectionToken,
+  Injector,
+  assertInInjectionContext,
+  computed,
+  inject,
+} from '@angular/core'
+import type { Provider, Signal } from '@angular/core'
+
+const IS_RESTORING = new InjectionToken<Signal<boolean>>('')
+
+/**
+ * The `Injector` in which to create the isRestoring signal.
+ *
+ * If this is not provided, the current injection context will be used instead (via `inject`).
+ */
+interface InjectIsRestoringOptions {
+  injector?: Injector
+}
+
+/**
+ * Injects a signal that tracks whether a restore is currently in progress. {@link injectQuery} and friends also check this internally to avoid race conditions between the restore and mounting queries.
+ * @param options - Options for injectIsRestoring.
+ * @returns signal with boolean that indicates whether a restore is in progress.
+ * @public
+ */
+export function injectIsRestoring(
+  options?: InjectIsRestoringOptions,
+): Signal<boolean> {
+  !options?.injector && assertInInjectionContext(injectIsRestoring)
+  const injector = options?.injector ?? inject(Injector)
+  return injector.get(
+    IS_RESTORING,
+    computed(() => false),
+    { optional: true },
+  )
+}
+
+/**
+ * Used by TanStack Query Angular persist client plugin to provide the signal that tracks the restore state
+ * @param isRestoring - a readonly signal that returns a boolean
+ * @returns Provider for the `isRestoring` signal
+ * @public
+ */
+export function provideIsRestoring(isRestoring: Signal<boolean>): Provider {
+  return {
+    provide: IS_RESTORING,
+    useValue: isRestoring,
+  }
+}

package/src/inject-mutation-state.ts

@@ -1,11 +1,18 @@
-import { DestroyRef, NgZone, computed, inject, signal } from '@angular/core'
+import {
+  DestroyRef,
+  Injector,
+  NgZone,
+  assertInInjectionContext,
+  computed,
+  inject,
+  signal,
+} from '@angular/core'
 import {
   QueryClient,
   notifyManager,
   replaceEqualDeep,
 } from '@tanstack/query-core'
-import { assertInjector } from './util/assert-injector/assert-injector'
-import type { Injector, Signal } from '@angular/core'
+import type { Signal } from '@angular/core'
 import type {
   Mutation,
   MutationCache,
@@ -58,62 +65,61 @@ export function injectMutationState<TResult = MutationState>(
   injectMutationStateFn: () => MutationStateOptions<TResult> = () => ({}),
   options?: InjectMutationStateOptions,
 ): Signal<Array<TResult>> {
-  return assertInjector(injectMutationState, options?.injector, () => {
-    const destroyRef = inject(DestroyRef)
-    const ngZone = inject(NgZone)
-    const queryClient = inject(QueryClient)
-
-    const mutationCache = queryClient.getMutationCache()
+  !options?.injector && assertInInjectionContext(injectMutationState)
+  const injector = options?.injector ?? inject(Injector)
+  const destroyRef = injector.get(DestroyRef)
+  const ngZone = injector.get(NgZone)
+  const queryClient = injector.get(QueryClient)
+  const mutationCache = queryClient.getMutationCache()
 
-    /**
-     * Computed signal that gets result from mutation cache based on passed options
-     * First element is the result, second element is the time when the result was set
-     */
-    const resultFromOptionsSignal = computed(() => {
-      return [
-        getResult(mutationCache, injectMutationStateFn()),
-        performance.now(),
-      ] as const
-    })
+  /**
+   * Computed signal that gets result from mutation cache based on passed options
+   * First element is the result, second element is the time when the result was set
+   */
+  const resultFromOptionsSignal = computed(() => {
+    return [
+      getResult(mutationCache, injectMutationStateFn()),
+      performance.now(),
+    ] as const
+  })
 
-    /**
-     * Signal that contains result set by subscriber
-     * First element is the result, second element is the time when the result was set
-     */
-    const resultFromSubscriberSignal = signal<[Array<TResult>, number] | null>(
-      null,
-    )
+  /**
+   * Signal that contains result set by subscriber
+   * First element is the result, second element is the time when the result was set
+   */
+  const resultFromSubscriberSignal = signal<[Array<TResult>, number] | null>(
+    null,
+  )
 
-    /**
-     * Returns the last result by either subscriber or options
-     */
-    const effectiveResultSignal = computed(() => {
-      const optionsResult = resultFromOptionsSignal()
-      const subscriberResult = resultFromSubscriberSignal()
-      return subscriberResult && subscriberResult[1] > optionsResult[1]
-        ? subscriberResult[0]
-        : optionsResult[0]
-    })
+  /**
+   * Returns the last result by either subscriber or options
+   */
+  const effectiveResultSignal = computed(() => {
+    const optionsResult = resultFromOptionsSignal()
+    const subscriberResult = resultFromSubscriberSignal()
+    return subscriberResult && subscriberResult[1] > optionsResult[1]
+      ? subscriberResult[0]
+      : optionsResult[0]
+  })
 
-    const unsubscribe = ngZone.runOutsideAngular(() =>
-      mutationCache.subscribe(
-        notifyManager.batchCalls(() => {
-          const [lastResult] = effectiveResultSignal()
-          const nextResult = replaceEqualDeep(
-            lastResult,
-            getResult(mutationCache, injectMutationStateFn()),
-          )
-          if (lastResult !== nextResult) {
-            ngZone.run(() => {
-              resultFromSubscriberSignal.set([nextResult, performance.now()])
-            })
-          }
-        }),
-      ),
-    )
+  const unsubscribe = ngZone.runOutsideAngular(() =>
+    mutationCache.subscribe(
+      notifyManager.batchCalls(() => {
+        const [lastResult] = effectiveResultSignal()
+        const nextResult = replaceEqualDeep(
+          lastResult,
+          getResult(mutationCache, injectMutationStateFn()),
+        )
+        if (lastResult !== nextResult) {
+          ngZone.run(() => {
+            resultFromSubscriberSignal.set([nextResult, performance.now()])
+          })
+        }
+      }),
+    ),
+  )
 
-    destroyRef.onDestroy(unsubscribe)
+  destroyRef.onDestroy(unsubscribe)
 
-    return effectiveResultSignal
-  })
+  return effectiveResultSignal
 }

package/src/inject-mutation.ts

@@ -1,6 +1,8 @@
 import {
   DestroyRef,
+  Injector,
   NgZone,
+  assertInInjectionContext,
   computed,
   effect,
   inject,
@@ -12,10 +14,8 @@ import {
   QueryClient,
   notifyManager,
 } from '@tanstack/query-core'
-import { assertInjector } from './util/assert-injector/assert-injector'
 import { signalProxy } from './signal-proxy'
 import { noop, shouldThrowError } from './util'
-import type { Injector } from '@angular/core'
 import type { DefaultError, MutationObserverResult } from '@tanstack/query-core'
 import type { CreateMutateFunction, CreateMutationResult } from './types'
 import type { CreateMutationOptions } from './mutation-options'
@@ -52,123 +52,117 @@ export function injectMutation<
   >,
   options?: InjectMutationOptions,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
-  return assertInjector(injectMutation, options?.injector, () => {
-    const destroyRef = inject(DestroyRef)
-    const ngZone = inject(NgZone)
-    const queryClient = inject(QueryClient)
-
-    /**
-     * computed() is used so signals can be inserted into the options
-     * making it reactive. Wrapping options in a function ensures embedded expressions
-     * are preserved and can keep being applied after signal changes
-     */
-    const optionsSignal = computed(injectMutationFn)
-
-    const observerSignal = (() => {
-      let instance: MutationObserver<
-        TData,
-        TError,
-        TVariables,
-        TContext
-      > | null = null
-
-      return computed(() => {
-        return (instance ||= new MutationObserver(queryClient, optionsSignal()))
-      })
-    })()
+  !options?.injector && assertInInjectionContext(injectMutation)
+  const injector = options?.injector ?? inject(Injector)
+  const destroyRef = injector.get(DestroyRef)
+  const ngZone = injector.get(NgZone)
+  const queryClient = injector.get(QueryClient)
 
-    const mutateFnSignal = computed<
-      CreateMutateFunction<TData, TError, TVariables, TContext>
-    >(() => {
-      const observer = observerSignal()
-      return (variables, mutateOptions) => {
-        observer.mutate(variables, mutateOptions).catch(noop)
-      }
+  /**
+   * computed() is used so signals can be inserted into the options
+   * making it reactive. Wrapping options in a function ensures embedded expressions
+   * are preserved and can keep being applied after signal changes
+   */
+  const optionsSignal = computed(injectMutationFn)
+
+  const observerSignal = (() => {
+    let instance: MutationObserver<TData, TError, TVariables, TContext> | null =
+      null
+
+    return computed(() => {
+      return (instance ||= new MutationObserver(queryClient, optionsSignal()))
     })
+  })()
+
+  const mutateFnSignal = computed<
+    CreateMutateFunction<TData, TError, TVariables, TContext>
+  >(() => {
+    const observer = observerSignal()
+    return (variables, mutateOptions) => {
+      observer.mutate(variables, mutateOptions).catch(noop)
+    }
+  })
+
+  /**
+   * Computed signal that gets result from mutation cache based on passed options
+   */
+  const resultFromInitialOptionsSignal = computed(() => {
+    const observer = observerSignal()
+    return observer.getCurrentResult()
+  })
+
+  /**
+   * Signal that contains result set by subscriber
+   */
+  const resultFromSubscriberSignal = signal<MutationObserverResult<
+    TData,
+    TError,
+    TVariables,
+    TContext
+  > | null>(null)
 
-    /**
-     * Computed signal that gets result from mutation cache based on passed options
-     */
-    const resultFromInitialOptionsSignal = computed(() => {
+  effect(
+    () => {
       const observer = observerSignal()
-      return observer.getCurrentResult()
-    })
+      const observerOptions = optionsSignal()
 
-    /**
-     * Signal that contains result set by subscriber
-     */
-    const resultFromSubscriberSignal = signal<MutationObserverResult<
-      TData,
-      TError,
-      TVariables,
-      TContext
-    > | null>(null)
-
-    effect(
-      () => {
-        const observer = observerSignal()
-        const observerOptions = optionsSignal()
-
-        untracked(() => {
-          observer.setOptions(observerOptions)
-        })
-      },
-      {
-        injector: options?.injector,
-      },
-    )
-
-    effect(
-      () => {
-        // observer.trackResult is not used as this optimization is not needed for Angular
-        const observer = observerSignal()
-
-        untracked(() => {
-          const unsubscribe = ngZone.runOutsideAngular(() =>
-            observer.subscribe(
-              notifyManager.batchCalls((state) => {
-                ngZone.run(() => {
-                  if (
-                    state.isError &&
-                    shouldThrowError(observer.options.throwOnError, [
-                      state.error,
-                    ])
-                  ) {
-                    ngZone.onError.emit(state.error)
-                    throw state.error
-                  }
-
-                  resultFromSubscriberSignal.set(state)
-                })
-              }),
-            ),
-          )
-          destroyRef.onDestroy(unsubscribe)
-        })
-      },
-      {
-        injector: options?.injector,
-      },
-    )
-
-    const resultSignal = computed(() => {
-      const resultFromSubscriber = resultFromSubscriberSignal()
-      const resultFromInitialOptions = resultFromInitialOptionsSignal()
-
-      const result = resultFromSubscriber ?? resultFromInitialOptions
-
-      return {
-        ...result,
-        mutate: mutateFnSignal(),
-        mutateAsync: result.mutate,
-      }
-    })
+      untracked(() => {
+        observer.setOptions(observerOptions)
+      })
+    },
+    {
+      injector,
+    },
+  )
+
+  effect(
+    () => {
+      // observer.trackResult is not used as this optimization is not needed for Angular
+      const observer = observerSignal()
 
-    return signalProxy(resultSignal) as CreateMutationResult<
-      TData,
-      TError,
-      TVariables,
-      TContext
-    >
+      untracked(() => {
+        const unsubscribe = ngZone.runOutsideAngular(() =>
+          observer.subscribe(
+            notifyManager.batchCalls((state) => {
+              ngZone.run(() => {
+                if (
+                  state.isError &&
+                  shouldThrowError(observer.options.throwOnError, [state.error])
+                ) {
+                  ngZone.onError.emit(state.error)
+                  throw state.error
+                }
+
+                resultFromSubscriberSignal.set(state)
+              })
+            }),
+          ),
+        )
+        destroyRef.onDestroy(unsubscribe)
+      })
+    },
+    {
+      injector,
+    },
+  )
+
+  const resultSignal = computed(() => {
+    const resultFromSubscriber = resultFromSubscriberSignal()
+    const resultFromInitialOptions = resultFromInitialOptionsSignal()
+
+    const result = resultFromSubscriber ?? resultFromInitialOptions
+
+    return {
+      ...result,
+      mutate: mutateFnSignal(),
+      mutateAsync: result.mutate,
+    }
   })
+
+  return signalProxy(resultSignal) as CreateMutationResult<
+    TData,
+    TError,
+    TVariables,
+    TContext
+  >
 }

package/src/inject-queries.ts

@@ -5,14 +5,17 @@ import {
 } from '@tanstack/query-core'
 import {
   DestroyRef,
+  Injector,
   NgZone,
+  assertInInjectionContext,
   computed,
   effect,
   inject,
+  runInInjectionContext,
   signal,
 } from '@angular/core'
-import { assertInjector } from './util/assert-injector/assert-injector'
-import type { Injector, Signal } from '@angular/core'
+import { injectIsRestoring } from './inject-is-restoring'
+import type { Signal } from '@angular/core'
 import type {
   DefaultError,
   OmitKeyof,
@@ -213,16 +216,20 @@ export function injectQueries<
   },
   injector?: Injector,
 ): Signal<TCombinedResult> {
-  return assertInjector(injectQueries, injector, () => {
+  !injector && assertInInjectionContext(injectQueries)
+  return runInInjectionContext(injector ?? inject(Injector), () => {
     const destroyRef = inject(DestroyRef)
     const ngZone = inject(NgZone)
     const queryClient = inject(QueryClient)
+    const isRestoring = injectIsRestoring()
 
     const defaultedQueries = computed(() => {
       return queries().map((opts) => {
         const defaultedOptions = queryClient.defaultQueryOptions(opts)
         // Make sure the results are already in fetching state before subscribing or updating options
-        defaultedOptions._optimisticResults = 'optimistic'
+        defaultedOptions._optimisticResults = isRestoring()
+          ? 'isRestoring'
+          : 'optimistic'
 
         return defaultedOptions as QueryObserverOptions
       })
@@ -250,10 +257,14 @@ export function injectQueries<
 
     const result = signal(getCombinedResult() as any)
 
-    const unsubscribe = ngZone.runOutsideAngular(() =>
-      observer.subscribe(notifyManager.batchCalls(result.set)),
-    )
-    destroyRef.onDestroy(unsubscribe)
+    effect(() => {
+      const unsubscribe = isRestoring()
+        ? () => undefined
+        : ngZone.runOutsideAngular(() =>
+            observer.subscribe(notifyManager.batchCalls(result.set)),
+          )
+      destroyRef.onDestroy(unsubscribe)
+    })
 
     return result
   })

package/src/inject-query.ts

@@ -1,7 +1,11 @@
 import { QueryObserver } from '@tanstack/query-core'
-import { assertInjector } from './util/assert-injector/assert-injector'
+import {
+  Injector,
+  assertInInjectionContext,
+  inject,
+  runInInjectionContext,
+} from '@angular/core'
 import { createBaseQuery } from './create-base-query'
-import type { Injector } from '@angular/core'
 import type { DefaultError, QueryKey } from '@tanstack/query-core'
 import type {
   CreateQueryOptions,
@@ -219,7 +223,8 @@ export function injectQuery(
   injectQueryFn: () => CreateQueryOptions,
   options?: InjectQueryOptions,
 ) {
-  return assertInjector(injectQuery, options?.injector, () =>
+  !options?.injector && assertInInjectionContext(injectQuery)
+  return runInInjectionContext(options?.injector ?? inject(Injector), () =>
     createBaseQuery(injectQueryFn, QueryObserver),
   ) as unknown as CreateQueryResult
 }

package/src/providers.ts

@@ -140,7 +140,7 @@ export interface QueryFeature<TFeatureKind extends QueryFeatureKind> {
  * @param providers -
  * @returns A Query feature.
  */
-function queryFeature<TFeatureKind extends QueryFeatureKind>(
+export function queryFeature<TFeatureKind extends QueryFeatureKind>(
   kind: TFeatureKind,
   providers: Array<Provider>,
 ): QueryFeature<TFeatureKind> {
@@ -155,6 +155,13 @@ function queryFeature<TFeatureKind extends QueryFeatureKind>(
  */
 export type DeveloperToolsFeature = QueryFeature<'DeveloperTools'>
 
+/**
+ * A type alias that represents a feature which enables persistence.
+ * The type is used to describe the return value of the `withPersistQueryClient` function.
+ * @public
+ */
+export type PersistQueryClientFeature = QueryFeature<'PersistQueryClient'>
+
 /**
  * Options for configuring the TanStack Query devtools.
  * @public
@@ -342,8 +349,8 @@ export function withDevtools(
  * @public
  * @see {@link provideTanStackQuery}
  */
-export type QueryFeatures = DeveloperToolsFeature // Union type of features but just one now
+export type QueryFeatures = DeveloperToolsFeature | PersistQueryClientFeature
 
-export const queryFeatures = ['DeveloperTools'] as const
+export const queryFeatures = ['DeveloperTools', 'PersistQueryClient'] as const
 
 export type QueryFeatureKind = (typeof queryFeatures)[number]