@tanstack/angular-query-experimental 5.24.8 → 5.26.0

package/src/__tests__/test-utils.ts

@@ -1,4 +1,6 @@
-import { isSignal, untracked } from '@angular/core'
+import { type InputSignal, isSignal, untracked } from '@angular/core'
+import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals'
+import type { ComponentFixture } from '@angular/core/testing'
 
 export function simpleFetcher(): Promise<string> {
   return new Promise((resolve) => {
@@ -82,3 +84,48 @@ export const expectSignals = <T extends Record<string, any>>(
 ): void => {
   expect(evaluateSignals(obj)).toMatchObject(expected)
 }
+
+type ToSignalInputUpdatableMap<T> = {
+  [K in keyof T as T[K] extends InputSignal<any>
+    ? K
+    : never]: T[K] extends InputSignal<infer Value> ? Value : never
+}
+
+function componentHasSignalInputProperty<TProperty extends string>(
+  component: object,
+  property: TProperty,
+): component is { [key in TProperty]: InputSignal<unknown> } {
+  return (
+    component.hasOwnProperty(property) && (component as any)[property][SIGNAL]
+  )
+}
+
+/**
+ * Set required signal input value to component fixture
+ * @see https://github.com/angular/angular/issues/54013
+ */
+export function setSignalInputs<T extends NonNullable<unknown>>(
+  component: T,
+  inputs: ToSignalInputUpdatableMap<T>,
+) {
+  for (const inputKey in inputs) {
+    if (componentHasSignalInputProperty(component, inputKey)) {
+      signalSetFn(component[inputKey][SIGNAL], inputs[inputKey])
+    }
+  }
+}
+
+export function setFixtureSignalInputs<T extends NonNullable<unknown>>(
+  componentFixture: ComponentFixture<T>,
+  inputs: ToSignalInputUpdatableMap<T>,
+  options: { detectChanges: boolean } = { detectChanges: true },
+) {
+  setSignalInputs(componentFixture.componentInstance, inputs)
+  if (options.detectChanges) {
+    componentFixture.detectChanges()
+  }
+}
+
+export async function flushQueue() {
+  await new Promise(setImmediate)
+}

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

@@ -10,7 +10,7 @@ import {
 } from '@angular/core'
 import { notifyManager } from '@tanstack/query-core'
 import { signalProxy } from './signal-proxy'
-import { lazyInit } from './lazy-init'
+import { lazyInit } from './util/lazy-init/lazy-init'
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types'
 
@@ -67,20 +67,17 @@ 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(

package/src/inject-mutation-state.ts

@@ -10,6 +10,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> = {
@@ -49,33 +50,38 @@ export function injectMutationState<TResult = MutationState>(
 
     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) {
+            result.set(nextResult)
+          }
+        }),
+      )
 
-    destroyRef.onDestroy(unsubscribe)
+      destroyRef.onDestroy(unsubscribe)
 
-    return result
+      return result
+    })
   })
 }

package/src/inject-mutation.ts

@@ -1,12 +1,20 @@
-import { DestroyRef, computed, effect, inject, signal } from '@angular/core'
+import {
+  DestroyRef,
+  Injector,
+  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, QueryClient } from '@tanstack/query-core'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
@@ -26,42 +34,51 @@ export function injectMutation<
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
   return assertInjector(injectMutation, injector, () => {
     const queryClient = injectQueryClient()
+    const currentInjector = inject(Injector)
     const destroyRef = inject(DestroyRef)
 
-    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) => 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/inject-queries.ts

@@ -11,6 +11,7 @@ import type {
   QueryKey,
   QueryObserverOptions,
   QueryObserverResult,
+  SkipToken,
   ThrowOnError,
 } from '@tanstack/query-core'
 
@@ -52,7 +53,9 @@ type GetOptions<T> =
               ? QueryObserverOptionsForCreateQueries<TQueryFnData>
               : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
                 T extends {
-                    queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
+                    queryFn?:
+                      | QueryFunction<infer TQueryFnData, infer TQueryKey>
+                      | SkipToken
                     select: (data: any) => infer TData
                     throwOnError?: ThrowOnError<any, infer TError, any, any>
                   }
@@ -63,10 +66,9 @@ type GetOptions<T> =
                     TQueryKey
                   >
                 : T extends {
-                      queryFn?: QueryFunction<
-                        infer TQueryFnData,
-                        infer TQueryKey
-                      >
+                      queryFn?:
+                        | QueryFunction<infer TQueryFnData, infer TQueryKey>
+                        | SkipToken
                       throwOnError?: ThrowOnError<any, infer TError, any, any>
                     }
                   ? QueryObserverOptionsForCreateQueries<

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