fix: required signal inputs errors

projects/ngrx-rtk-query/src/lib/build-hooks.ts

@@ -36,7 +36,7 @@ import type {
   UseQuerySubscription,
 } from './types';
 import { useStableQueryArgs } from './useSerializedStableValue';
-import { shallowEqual, signalProxy, toDeepSignal } from './utils';
+import { shallowEqual, signalProxy, toDeepSignal, toLazySignal } from './utils';
 
 /**
  * Wrapper around `defaultQueryStateSelector` to be used in `useQuery`.
@@ -401,16 +401,19 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
       },
       useQuery(arg, options) {
         const querySubscriptionResults = useQuerySubscription(arg, options);
+        // We need to use `toLazySignal` here to prevent 'signal required inputs' errors
+        const lazyArg =
+          typeof arg === 'function' ? toLazySignal<unknown>(arg as any, { initialValue: skipToken }) : () => arg;
         const subscriptionOptions = computed(() => {
-          const subscriptionArg = typeof arg === 'function' ? arg() : arg;
+          const subscriptionArg = lazyArg();
           const subscriptionOptions = typeof options === 'function' ? options() : options;
           return {
             selectFromResult:
               subscriptionArg === skipToken || subscriptionOptions?.skip ? undefined : noPendingQueryStateSelector,
             ...subscriptionOptions,
           };
         });
-        const queryStateResults = useQueryState(arg, subscriptionOptions);
+        const queryStateResults = useQueryState(lazyArg, subscriptionOptions);
         Object.assign(queryStateResults, querySubscriptionResults);
 
         return queryStateResults as any;

projects/ngrx-rtk-query/src/lib/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './capitalize';
+export * from './lazy-signal';
 export * from './shallow-equal';
 export * from './signal-proxy';
 export * from './tsHelpers';

projects/ngrx-rtk-query/src/lib/utils/lazy-signal.ts

@@ -0,0 +1,15 @@
+import { effect, signal, untracked, type Signal } from '@angular/core';
+
+export function toLazySignal<T>(
+  inputSignal: Signal<T> | (() => T),
+  { initialValue = undefined }: { initialValue?: T } = {},
+): Signal<T> {
+  const s = signal<T>(initialValue as T);
+
+  effect(() => {
+    const input = inputSignal();
+    untracked(() => s.set(input));
+  });
+
+  return s.asReadonly();
+}

src/app/features/counter/counter/counter.component.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { skipToken } from 'ngrx-rtk-query';
 
 import { useDecrementCountByIdMutation, useGetCountByIdQuery, useIncrementCountByIdMutation } from '@app/core/services';
 import { pollingOptions } from '../utils/polling-options';
@@ -44,17 +43,14 @@ import { pollingOptions } from '../utils/polling-options';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CounterComponent {
-  readonly counterId = input<string>();
+  readonly counterId = input.required<string>();
 
   // Polling
   pollingOptions = pollingOptions;
   pollingInterval = signal<number>(this.pollingOptions[0].value);
 
   // Queries
-  countQuery = useGetCountByIdQuery(
-    () => this.counterId() ?? skipToken,
-    () => ({ pollingInterval: this.pollingInterval() }),
-  );
+  countQuery = useGetCountByIdQuery(this.counterId, () => ({ pollingInterval: this.pollingInterval() }));
   increment = useIncrementCountByIdMutation();
   decrement = useDecrementCountByIdMutation();
 }