@tanstack/angular-query-experimental 5.25.0 → 5.26.1

package/src/__tests__/util/lazy-init/lazy-init.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, test } from 'vitest'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  type WritableSignal,
+  computed,
+  effect,
+  input,
+  signal,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { flushQueue, setFixtureSignalInputs } from '../../test-utils'
+import { lazyInit } from '../../../util/lazy-init/lazy-init'
+
+describe('lazyInit', () => {
+  test('should init lazily in next tick when not accessing manually', async () => {
+    const mockFn = vi.fn()
+
+    TestBed.runInInjectionContext(() => {
+      lazyInit(() => {
+        mockFn()
+        return {
+          data: signal(true),
+        }
+      })
+    })
+
+    expect(mockFn).not.toHaveBeenCalled()
+
+    await new Promise(setImmediate)
+
+    expect(mockFn).toHaveBeenCalled()
+  })
+
+  test('should init eagerly accessing manually', async () => {
+    const mockFn = vi.fn()
+
+    TestBed.runInInjectionContext(() => {
+      const lazySignal = lazyInit(() => {
+        mockFn()
+        return {
+          data: signal(true),
+        }
+      })
+
+      lazySignal.data()
+
+      console.log(lazySignal)
+    })
+
+    expect(mockFn).toHaveBeenCalled()
+  })
+
+  test('should init lazily and only once', async () => {
+    const initCallFn = vi.fn()
+    const registerDataValue = vi.fn<[number]>()
+
+    let value!: { data: WritableSignal<number> }
+    const outerSignal = signal(0)
+
+    TestBed.runInInjectionContext(() => {
+      value = lazyInit(() => {
+        initCallFn()
+
+        void outerSignal()
+
+        return { data: signal(0) }
+      })
+
+      effect(() => registerDataValue(value.data()))
+    })
+
+    value.data()
+
+    await flushQueue()
+
+    expect(outerSignal).toBeDefined()
+
+    expect(initCallFn).toHaveBeenCalledTimes(1)
+
+    outerSignal.set(1)
+    await flushQueue()
+    outerSignal.set(2)
+    await flushQueue()
+    value.data.set(4)
+    await flushQueue()
+
+    expect(initCallFn).toHaveBeenCalledTimes(1)
+    expect(registerDataValue).toHaveBeenCalledTimes(2)
+  })
+
+  test('should support required signal input', async () => {
+    @Component({
+      standalone: true,
+      template: `{{ call }} - {{ lazySignal.data() }}`,
+      changeDetection: ChangeDetectionStrategy.OnPush,
+    })
+    class Test {
+      readonly title = input.required<string>()
+      call = 0
+
+      lazySignal = lazyInit(() => {
+        this.call++
+        return {
+          data: computed(() => this.title()),
+        }
+      })
+    }
+
+    const fixture = TestBed.createComponent(Test)
+
+    setFixtureSignalInputs(fixture, { title: 'newValue' })
+    expect(fixture.debugElement.nativeElement.textContent).toBe('0 - newValue')
+    await flushQueue()
+
+    setFixtureSignalInputs(fixture, { title: 'updatedValue' })
+    expect(fixture.debugElement.nativeElement.textContent).toBe(
+      '1 - updatedValue',
+    )
+
+    setFixtureSignalInputs(fixture, { title: 'newUpdatedValue' })
+    expect(fixture.debugElement.nativeElement.textContent).toBe(
+      '1 - newUpdatedValue',
+    )
+  })
+})

package/src/__tests__/util/lazy-signal-initializer/lazy-signal-initializer.test.ts

@@ -0,0 +1,130 @@
+import { describe, expect, test } from 'vitest'
+import {
+  Component,
+  type Signal,
+  type WritableSignal,
+  effect,
+  input,
+  signal,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { lazySignalInitializer } from '../../../util/lazy-signal-initializer/lazy-signal-initializer'
+import { flushQueue, setFixtureSignalInputs } from '../../test-utils'
+
+describe('lazySignalInitializer', () => {
+  test('should init lazily in next tick when not accessing manually', async () => {
+    const mockFn = vi.fn()
+
+    TestBed.runInInjectionContext(() => {
+      lazySignalInitializer(() => {
+        mockFn()
+        return signal(true)
+      })
+    })
+
+    expect(mockFn).not.toHaveBeenCalled()
+
+    await new Promise(setImmediate)
+
+    expect(mockFn).toHaveBeenCalled()
+  })
+
+  test('should init eagerly accessing manually', async () => {
+    const mockFn = vi.fn()
+
+    TestBed.runInInjectionContext(() => {
+      const lazySignal = lazySignalInitializer(() => {
+        mockFn()
+        return signal(true)
+      })
+
+      lazySignal()
+    })
+
+    expect(mockFn).toHaveBeenCalled()
+  })
+
+  test('should init lazily and only once', async () => {
+    const initCallFn = vi.fn()
+    const registerEffectValue = vi.fn<[number]>()
+
+    let value!: Signal<number>
+    const outerSignal = signal(0)
+    let innerSignal!: WritableSignal<number>
+
+    TestBed.runInInjectionContext(() => {
+      value = lazySignalInitializer(() => {
+        initCallFn()
+        innerSignal = signal(0)
+
+        void outerSignal()
+
+        return innerSignal
+      })
+
+      effect(() => registerEffectValue(value()))
+    })
+
+    value()
+
+    await flushQueue()
+
+    expect(outerSignal).toBeDefined()
+    expect(innerSignal).toBeDefined()
+
+    expect(initCallFn).toHaveBeenCalledTimes(1)
+
+    innerSignal.set(1)
+    await flushQueue()
+    outerSignal.set(2)
+    await flushQueue()
+
+    expect(initCallFn).toHaveBeenCalledTimes(1)
+    expect(registerEffectValue).toHaveBeenCalledTimes(2)
+  })
+
+  test('should init lazily', async () => {
+    @Component({
+      standalone: true,
+      template: `{{ subscribed }}`,
+    })
+    class Test {
+      subscribed = false
+
+      lazySignal = lazySignalInitializer(() => {
+        this.subscribed = true
+        return signal('value')
+      })
+    }
+
+    const fixture = TestBed.createComponent(Test)
+    const { debugElement } = fixture
+    fixture.detectChanges()
+
+    expect(debugElement.nativeElement.textContent).toBe('false')
+
+    await new Promise(setImmediate)
+
+    fixture.detectChanges()
+
+    expect(debugElement.nativeElement.textContent).toBe('true')
+  })
+
+  test('should support required signal input', () => {
+    @Component({
+      standalone: true,
+      template: `{{ subscribed }}`,
+    })
+    class Test {
+      readonly title = input.required<string>()
+      subscribed = false
+
+      lazySignal = lazySignalInitializer(() => {
+        return signal(this.title())
+      })
+    }
+
+    const fixture = TestBed.createComponent(Test)
+    setFixtureSignalInputs(fixture, { title: 'newValue' })
+  })
+})

package/src/create-base-query.ts

@@ -1,6 +1,7 @@
 import {
   DestroyRef,
   Injector,
+  NgZone,
   computed,
   effect,
   inject,
@@ -10,8 +11,13 @@ import {
 } from '@angular/core'
 import { notifyManager } from '@tanstack/query-core'
 import { signalProxy } from './signal-proxy'
-import { lazyInit } from './lazy-init'
-import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
+import { lazyInit } from './util/lazy-init/lazy-init'
+import type {
+  QueryClient,
+  QueryKey,
+  QueryObserver,
+  QueryObserverResult,
+} from '@tanstack/query-core'
 import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types'
 
 /**
@@ -37,6 +43,7 @@ export function createBaseQuery<
   queryClient: QueryClient,
 ): CreateBaseQueryResult<TData, TError> {
   const injector = inject(Injector)
+  const ngZone = inject(NgZone)
 
   return lazyInit(() => {
     return runInInjectionContext(injector, () => {
@@ -67,24 +74,25 @@ export function createBaseQuery<
         observer.getOptimisticResult(defaultedOptionsSignal()),
       )
 
-      // Effects should not be called inside reactive contexts
-      untracked(() =>
-        effect(() => {
-          const defaultedOptions = defaultedOptionsSignal()
-          observer.setOptions(defaultedOptions, {
-            // Do not notify on updates because of changes in the options because
-            // these changes should already be reflected in the optimistic result.
-            listeners: false,
-          })
-          untracked(() => {
-            resultSignal.set(observer.getOptimisticResult(defaultedOptions))
-          })
-        }),
-      )
+      effect(() => {
+        const defaultedOptions = defaultedOptionsSignal()
+        observer.setOptions(defaultedOptions, {
+          // Do not notify on updates because of changes in the options because
+          // these changes should already be reflected in the optimistic result.
+          listeners: false,
+        })
+        untracked(() => {
+          resultSignal.set(observer.getOptimisticResult(defaultedOptions))
+        })
+      })
 
       // observer.trackResult is not used as this optimization is not needed for Angular
       const unsubscribe = observer.subscribe(
-        notifyManager.batchCalls((val) => resultSignal.set(val)),
+        notifyManager.batchCalls((val: QueryObserverResult<TData, TError>) => {
+          ngZone.run(() => {
+            resultSignal.set(val)
+          })
+        }),
       )
       destroyRef.onDestroy(unsubscribe)
 

package/src/inject-is-fetching.ts

@@ -1,4 +1,4 @@
-import { DestroyRef, inject, signal } from '@angular/core'
+import { DestroyRef, NgZone, inject, signal } from '@angular/core'
 import { type QueryFilters, notifyManager } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
@@ -11,6 +11,7 @@ export function injectIsFetching(
   return assertInjector(injectIsFetching, injector, () => {
     const queryClient = injectQueryClient()
     const destroyRef = inject(DestroyRef)
+    const ngZone = inject(NgZone)
 
     const cache = queryClient.getQueryCache()
     // isFetching is the prev value initialized on mount *
@@ -24,7 +25,9 @@ export function injectIsFetching(
         if (isFetching !== newIsFetching) {
           // * and update with each change
           isFetching = newIsFetching
-          result.set(isFetching)
+          ngZone.run(() => {
+            result.set(isFetching)
+          })
         }
       }),
     )

package/src/inject-is-mutating.ts

@@ -1,4 +1,4 @@
-import { DestroyRef, inject, signal } from '@angular/core'
+import { DestroyRef, NgZone, inject, signal } from '@angular/core'
 import { type MutationFilters, notifyManager } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
@@ -11,6 +11,7 @@ export function injectIsMutating(
   return assertInjector(injectIsMutating, injector, () => {
     const queryClient = injectQueryClient()
     const destroyRef = inject(DestroyRef)
+    const ngZone = inject(NgZone)
 
     const cache = queryClient.getMutationCache()
     // isMutating is the prev value initialized on mount *
@@ -24,7 +25,9 @@ export function injectIsMutating(
         if (isMutating !== newIsMutating) {
           // * and update with each change
           isMutating = newIsMutating
-          result.set(isMutating)
+          ngZone.run(() => {
+            result.set(isMutating)
+          })
         }
       }),
     )

package/src/inject-mutation-state.ts

@@ -1,4 +1,11 @@
-import { DestroyRef, effect, inject, signal, untracked } from '@angular/core'
+import {
+  DestroyRef,
+  NgZone,
+  effect,
+  inject,
+  signal,
+  untracked,
+} from '@angular/core'
 import {
   type DefaultError,
   type Mutation,
@@ -10,6 +17,7 @@ import {
 } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
+import { lazySignalInitializer } from './util/lazy-signal-initializer/lazy-signal-initializer'
 import type { Injector, Signal } from '@angular/core'
 
 type MutationStateOptions<TResult = MutationState> = {
@@ -46,36 +54,44 @@ export function injectMutationState<TResult = MutationState>(
   return assertInjector(injectMutationState, options?.injector, () => {
     const destroyRef = inject(DestroyRef)
     const queryClient = injectQueryClient()
+    const ngZone = inject(NgZone)
 
     const mutationCache = queryClient.getMutationCache()
 
-    const result = signal<Array<TResult>>(
-      getResult(mutationCache, mutationStateOptionsFn()),
-    )
+    return lazySignalInitializer((injector) => {
+      const result = signal<Array<TResult>>(
+        getResult(mutationCache, mutationStateOptionsFn()),
+      )
 
-    effect(() => {
-      const mutationStateOptions = mutationStateOptionsFn()
-      untracked(() => {
-        // Setting the signal from an effect because it's both 'computed' from options()
-        // and needs to be set imperatively in the mutationCache listener.
-        result.set(getResult(mutationCache, mutationStateOptions))
-      })
-    })
+      effect(
+        () => {
+          const mutationStateOptions = mutationStateOptionsFn()
+          untracked(() => {
+            // Setting the signal from an effect because it's both 'computed' from options()
+            // and needs to be set imperatively in the mutationCache listener.
+            result.set(getResult(mutationCache, mutationStateOptions))
+          })
+        },
+        { injector },
+      )
 
-    const unsubscribe = mutationCache.subscribe(
-      notifyManager.batchCalls(() => {
-        const nextResult = replaceEqualDeep(
-          result(),
-          getResult(mutationCache, mutationStateOptionsFn()),
-        )
-        if (result() !== nextResult) {
-          result.set(nextResult)
-        }
-      }),
-    )
+      const unsubscribe = mutationCache.subscribe(
+        notifyManager.batchCalls(() => {
+          const nextResult = replaceEqualDeep(
+            result(),
+            getResult(mutationCache, mutationStateOptionsFn()),
+          )
+          if (result() !== nextResult) {
+            ngZone.run(() => {
+              result.set(nextResult)
+            })
+          }
+        }),
+      )
 
-    destroyRef.onDestroy(unsubscribe)
+      destroyRef.onDestroy(unsubscribe)
 
-    return result
+      return result
+    })
   })
 }

package/src/inject-mutation.ts

@@ -1,12 +1,25 @@
-import { DestroyRef, computed, effect, inject, signal } from '@angular/core'
+import {
+  DestroyRef,
+  Injector,
+  NgZone,
+  computed,
+  effect,
+  inject,
+  runInInjectionContext,
+  signal,
+} from '@angular/core'
 import { MutationObserver, notifyManager } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import { signalProxy } from './signal-proxy'
 import { injectQueryClient } from './inject-query-client'
 import { noop } from './util'
-import type { DefaultError, QueryClient } from '@tanstack/query-core'
-import type { Injector } from '@angular/core'
 
+import { lazyInit } from './util/lazy-init/lazy-init'
+import type {
+  DefaultError,
+  MutationObserverResult,
+  QueryClient,
+} from '@tanstack/query-core'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
@@ -26,42 +39,60 @@ export function injectMutation<
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
   return assertInjector(injectMutation, injector, () => {
     const queryClient = injectQueryClient()
+    const currentInjector = inject(Injector)
     const destroyRef = inject(DestroyRef)
+    const ngZone = inject(NgZone)
 
-    const observer = new MutationObserver<TData, TError, TVariables, TContext>(
-      queryClient,
-      options(queryClient),
-    )
-    const mutate: CreateMutateFunction<TData, TError, TVariables, TContext> = (
-      variables,
-      mutateOptions,
-    ) => {
-      observer.mutate(variables, mutateOptions).catch(noop)
-    }
+    return lazyInit(() =>
+      runInInjectionContext(currentInjector, () => {
+        const observer = new MutationObserver<
+          TData,
+          TError,
+          TVariables,
+          TContext
+        >(queryClient, options(queryClient))
+        const mutate: CreateMutateFunction<
+          TData,
+          TError,
+          TVariables,
+          TContext
+        > = (variables, mutateOptions) => {
+          observer.mutate(variables, mutateOptions).catch(noop)
+        }
 
-    effect(() => {
-      observer.setOptions(options(queryClient))
-    })
+        effect(() => {
+          observer.setOptions(options(queryClient))
+        })
 
-    const result = signal(observer.getCurrentResult())
+        const result = signal(observer.getCurrentResult())
 
-    const unsubscribe = observer.subscribe(
-      notifyManager.batchCalls((val) => result.set(val)),
-    )
+        const unsubscribe = observer.subscribe(
+          notifyManager.batchCalls(
+            (
+              val: MutationObserverResult<TData, TError, TVariables, TContext>,
+            ) => {
+              ngZone.run(() => {
+                result.set(val)
+              })
+            },
+          ),
+        )
 
-    destroyRef.onDestroy(unsubscribe)
+        destroyRef.onDestroy(unsubscribe)
 
-    const resultSignal = computed(() => ({
-      ...result(),
-      mutate,
-      mutateAsync: result().mutate,
-    }))
+        const resultSignal = computed(() => ({
+          ...result(),
+          mutate,
+          mutateAsync: result().mutate,
+        }))
 
-    return signalProxy(resultSignal) as unknown as CreateMutationResult<
-      TData,
-      TError,
-      TVariables,
-      TContext
-    >
+        return signalProxy(resultSignal) as unknown as CreateMutationResult<
+          TData,
+          TError,
+          TVariables,
+          TContext
+        >
+      }),
+    )
   })
 }

package/src/{lazy-init.ts → util/lazy-init/lazy-init.ts}

@@ -1,9 +1,11 @@
+import { untracked } from '@angular/core'
+
 export function lazyInit<T extends object>(initializer: () => T): T {
   let object: T | null = null
 
   const initializeObject = () => {
     if (!object) {
-      object = initializer()
+      object = untracked(() => initializer())
     }
   }
 

package/src/util/lazy-signal-initializer/lazy-signal-initializer.ts

@@ -0,0 +1,28 @@
+import {
+  Injector,
+  type Signal,
+  computed,
+  inject,
+  untracked,
+} from '@angular/core'
+
+type SignalInitializerFn<T> = (injector: Injector) => Signal<T>
+
+export function lazySignalInitializer<T>(
+  initializerFn: SignalInitializerFn<T>,
+) {
+  const injector = inject(Injector)
+
+  let source: Signal<T> | null = null
+
+  const unwrapSignal = () => {
+    if (!source) {
+      source = untracked(() => initializerFn(injector))
+    }
+    return source()
+  }
+
+  queueMicrotask(() => unwrapSignal())
+
+  return computed(unwrapSignal)
+}

package/build/esm2022/lazy-init.mjs

@@ -1,30 +0,0 @@
-export function lazyInit(initializer) {
-    let object = null;
-    const initializeObject = () => {
-        if (!object) {
-            object = initializer();
-        }
-    };
-    queueMicrotask(() => initializeObject());
-    return new Proxy({}, {
-        get(_, prop, receiver) {
-            initializeObject();
-            return Reflect.get(object, prop, receiver);
-        },
-        has(_, prop) {
-            initializeObject();
-            return Reflect.has(object, prop);
-        },
-        ownKeys() {
-            initializeObject();
-            return Reflect.ownKeys(object);
-        },
-        getOwnPropertyDescriptor() {
-            return {
-                enumerable: true,
-                configurable: true,
-            };
-        },
-    });
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF6eS1pbml0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xhenktaW5pdC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLFVBQVUsUUFBUSxDQUFtQixXQUFvQjtJQUM3RCxJQUFJLE1BQU0sR0FBYSxJQUFJLENBQUE7SUFFM0IsTUFBTSxnQkFBZ0IsR0FBRyxHQUFHLEVBQUU7UUFDNUIsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNYLE1BQU0sR0FBRyxXQUFXLEVBQUUsQ0FBQTtTQUN2QjtJQUNILENBQUMsQ0FBQTtJQUVELGNBQWMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDLENBQUE7SUFFeEMsT0FBTyxJQUFJLEtBQUssQ0FBSSxFQUFPLEVBQUU7UUFDM0IsR0FBRyxDQUFDLENBQUMsRUFBRSxJQUFJLEVBQUUsUUFBUTtZQUNuQixnQkFBZ0IsRUFBRSxDQUFBO1lBQ2xCLE9BQU8sT0FBTyxDQUFDLEdBQUcsQ0FBQyxNQUFXLEVBQUUsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFBO1FBQ2pELENBQUM7UUFDRCxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUk7WUFDVCxnQkFBZ0IsRUFBRSxDQUFBO1lBQ2xCLE9BQU8sT0FBTyxDQUFDLEdBQUcsQ0FBQyxNQUFXLEVBQUUsSUFBSSxDQUFDLENBQUE7UUFDdkMsQ0FBQztRQUNELE9BQU87WUFDTCxnQkFBZ0IsRUFBRSxDQUFBO1lBQ2xCLE9BQU8sT0FBTyxDQUFDLE9BQU8sQ0FBQyxNQUFXLENBQUMsQ0FBQTtRQUNyQyxDQUFDO1FBQ0Qsd0JBQXdCO1lBQ3RCLE9BQU87Z0JBQ0wsVUFBVSxFQUFFLElBQUk7Z0JBQ2hCLFlBQVksRUFBRSxJQUFJO2FBQ25CLENBQUE7UUFDSCxDQUFDO0tBQ0YsQ0FBQyxDQUFBO0FBQ0osQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBmdW5jdGlvbiBsYXp5SW5pdDxUIGV4dGVuZHMgb2JqZWN0Pihpbml0aWFsaXplcjogKCkgPT4gVCk6IFQge1xuICBsZXQgb2JqZWN0OiBUIHwgbnVsbCA9IG51bGxcblxuICBjb25zdCBpbml0aWFsaXplT2JqZWN0ID0gKCkgPT4ge1xuICAgIGlmICghb2JqZWN0KSB7XG4gICAgICBvYmplY3QgPSBpbml0aWFsaXplcigpXG4gICAgfVxuICB9XG5cbiAgcXVldWVNaWNyb3Rhc2soKCkgPT4gaW5pdGlhbGl6ZU9iamVjdCgpKVxuXG4gIHJldHVybiBuZXcgUHJveHk8VD4oe30gYXMgVCwge1xuICAgIGdldChfLCBwcm9wLCByZWNlaXZlcikge1xuICAgICAgaW5pdGlhbGl6ZU9iamVjdCgpXG4gICAgICByZXR1cm4gUmVmbGVjdC5nZXQob2JqZWN0IGFzIFQsIHByb3AsIHJlY2VpdmVyKVxuICAgIH0sXG4gICAgaGFzKF8sIHByb3ApIHtcbiAgICAgIGluaXRpYWxpemVPYmplY3QoKVxuICAgICAgcmV0dXJuIFJlZmxlY3QuaGFzKG9iamVjdCBhcyBULCBwcm9wKVxuICAgIH0sXG4gICAgb3duS2V5cygpIHtcbiAgICAgIGluaXRpYWxpemVPYmplY3QoKVxuICAgICAgcmV0dXJuIFJlZmxlY3Qub3duS2V5cyhvYmplY3QgYXMgVClcbiAgICB9LFxuICAgIGdldE93blByb3BlcnR5RGVzY3JpcHRvcigpIHtcbiAgICAgIHJldHVybiB7XG4gICAgICAgIGVudW1lcmFibGU6IHRydWUsXG4gICAgICAgIGNvbmZpZ3VyYWJsZTogdHJ1ZSxcbiAgICAgIH1cbiAgICB9LFxuICB9KVxufVxuIl19