From 47e89052204105ed2f8edf512b352d9703c6e364 Mon Sep 17 00:00:00 2001
From: Saul <saul.moro.gomez@gmail.com>
Date: Mon, 11 Mar 2024 17:18:19 +0100
Subject: [PATCH] fix: required signal inputs errors

---
 projects/ngrx-rtk-query/src/lib/build-hooks.ts    |  9 ++++++---
 projects/ngrx-rtk-query/src/lib/utils/index.ts    |  1 +
 .../ngrx-rtk-query/src/lib/utils/lazy-signal.ts   | 15 +++++++++++++++
 .../features/counter/counter/counter.component.ts |  8 ++------
 4 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 projects/ngrx-rtk-query/src/lib/utils/lazy-signal.ts

diff --git a/projects/ngrx-rtk-query/src/lib/build-hooks.ts b/projects/ngrx-rtk-query/src/lib/build-hooks.ts
index fd7d657..54b11e4 100644
--- a/projects/ngrx-rtk-query/src/lib/build-hooks.ts
+++ b/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,8 +401,11 @@ 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:
@@ -410,7 +413,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
             ...subscriptionOptions,
           };
         });
-        const queryStateResults = useQueryState(arg, subscriptionOptions);
+        const queryStateResults = useQueryState(lazyArg, subscriptionOptions);
         Object.assign(queryStateResults, querySubscriptionResults);
 
         return queryStateResults as any;
diff --git a/projects/ngrx-rtk-query/src/lib/utils/index.ts b/projects/ngrx-rtk-query/src/lib/utils/index.ts
index f5da529..8776efb 100644
--- a/projects/ngrx-rtk-query/src/lib/utils/index.ts
+++ b/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';
diff --git a/projects/ngrx-rtk-query/src/lib/utils/lazy-signal.ts b/projects/ngrx-rtk-query/src/lib/utils/lazy-signal.ts
new file mode 100644
index 0000000..47df93b
--- /dev/null
+++ b/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();
+}
diff --git a/src/app/features/counter/counter/counter.component.ts b/src/app/features/counter/counter/counter.component.ts
index d19b732..e59ff9e 100644
--- a/src/app/features/counter/counter/counter.component.ts
+++ b/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();
 }