fix: problem with lazy signal in edge cases

README.md

@@ -218,8 +218,8 @@ A good use case is to work with router inputs.
 // ...
 
 export class CharacterCardComponent {
-  readonly characterParamId = input.required<number>();
-  readonly characterQuery = useGetCharacterQuery(this.characterParamId);
+  characterParamId = input.required<number>();
+  characterQuery = useGetCharacterQuery(this.characterParamId);
 
 // ...
 ```
@@ -232,8 +232,8 @@ Another good use case is with signals inputs not required and use skipToken
 // ...
 
 export class CharacterCardComponent implements OnInit {
-  readonly character = input<Character | undefined>(undefined);
-  readonly locationQuery = useGetLocationQuery(() => this.character()?.currentLocation ?? skipToken);
+  character = input<Character | undefined>(undefined);
+  locationQuery = useGetLocationQuery(() => this.character()?.currentLocation ?? skipToken);
 
 // ...
 ```
@@ -283,8 +283,7 @@ Another use case is to work with nested or relational data.
 <span>{{ locationQuery.data() }}</span>
 
 export class CharacterCardComponent implements OnInit {
-  readonly character = input.required<Character>();
-
+  character = input.required<Character>();
   locationQuery = useLazyGetLocationQuery();
 
   ngOnInit(): void {

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

@@ -128,7 +128,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
       isFetching,
       isLoading,
       isSuccess,
-      // Deep signals required init in undefined atleast
+      // Deep signals required init properties undefined atleast
       endpointName: currentState.endpointName,
       error: currentState.error,
       fulfilledTimeStamp: currentState.fulfilledTimeStamp,
@@ -344,12 +344,12 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
     const useQueryState: UseQueryState<any> = (arg: any, options = {}) => {
       // We need to use `toLazySignal` here to prevent 'signal required inputs' errors
       const lazyArg = isSignal(arg)
-        ? toLazySignal(arg, { initialValue: undefined })
+        ? toLazySignal(arg, { initialValue: skipToken })
         : typeof arg === 'function'
           ? arg
           : () => arg;
       const lazyOptions = isSignal(options)
-        ? toLazySignal(options, { initialValue: {} })
+        ? toLazySignal(options, { initialValue: { selectFromResult: noPendingQueryStateSelector } })
         : typeof options === 'function'
           ? options
           : () => options;
@@ -414,7 +414,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
       useQuery(arg, options) {
         const querySubscriptionResults = useQuerySubscription(arg, options);
         const subscriptionOptions = computed(() => {
-          const subscriptionArg = typeof arg === 'function' ? arg() : options;
+          const subscriptionArg = typeof arg === 'function' ? arg() : arg;
           const subscriptionOptions = typeof options === 'function' ? options() : options;
           return {
             selectFromResult:
@@ -459,7 +459,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         const currentState = select(args)(state);
         return {
           ...currentState,
-          // Deep signals required init in undefined atleast
+          // Deep signals required init properties undefined atleast
           data: currentState.data,
           endpointName: currentState.endpointName,
           error: currentState.error,

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

@@ -22,7 +22,7 @@ import type {
   TSHelpersOverride,
 } from '@reduxjs/toolkit/query';
 import type { UninitializedValue } from '../constants';
-import { DeepSignal, SignalsMap } from '../utils';
+import type { DeepSignal, SignalsMap } from '../utils';
 
 export interface QueryHooks<Definition extends QueryDefinition<any, any, any, any, any>> {
   useQuery: UseQuery<Definition>;

projects/ngrx-rtk-query/src/lib/useSerializedStableValue.ts

@@ -1,4 +1,4 @@
-import { Signal, computed } from '@angular/core';
+import { computed, type Signal } from '@angular/core';
 import type { EndpointDefinition, SerializeQueryArgs } from '@reduxjs/toolkit/query';
 
 export function useStableQueryArgs<T>(

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

@@ -3,19 +3,3 @@ import type { NoInfer } from '@reduxjs/toolkit/dist/tsHelpers';
 export function safeAssign<T extends object>(target: T, ...args: Array<Partial<NoInfer<T>>>): T {
   return Object.assign(target, ...args);
 }
-
-export type IsRecord<T> = T extends object
-  ? T extends unknown[]
-    ? false
-    : T extends Set<unknown>
-      ? false
-      : T extends Map<unknown, unknown>
-        ? false
-        : T extends Function
-          ? false
-          : true
-  : false;
-
-export type IsUnknownRecord<T> = string extends keyof T ? true : number extends keyof T ? true : false;
-
-export type IsKnownRecord<T> = IsRecord<T> extends true ? (IsUnknownRecord<T> extends true ? false : true) : false;

src/app/core/router/router.selectors.ts

@@ -1,4 +1,5 @@
 import { getRouterSelectors } from '@ngrx/router-store';
+import { createSelector } from '@ngrx/store';
 
 export const {
   selectCurrentRoute,
@@ -13,4 +14,8 @@ export const {
 } = getRouterSelectors();
 
 export const selectParamId = selectRouteParam('id');
+export const selectParamIdNumber = createSelector(selectRouteParam('id'), (id) => {
+  const numberId = Number(id);
+  return isNaN(numberId) ? undefined : numberId;
+});
 export const selectCurrentPage = selectQueryParam('page');

src/app/features/posts/post-detail/post-detail.component.ts

@@ -1,6 +1,9 @@
-import { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, signal } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { RouterSelectors } from '@app/core/router';
+import { Store } from '@ngrx/store';
+import { skipToken } from 'ngrx-rtk-query';
 
 import { useDeletePostMutation, useGetPostQuery, useUpdatePostMutation } from '../services/posts';
 
@@ -47,13 +50,26 @@ import { useDeletePostMutation, useGetPostQuery, useUpdatePostMutation } from '.
       </ng-template>
 
       <pre class="bg-gray-200">{{ postQuery.data() | json }}</pre>
+
+      @if (!postDinamicQuery.isFetching() && !postDinamicQuery.isError() && postDinamicQuery.data()) {
+        <h3>Dynamic router arg and selectFromResult</h3>
+        <pre class="bg-gray-200">Name: {{ postDinamicQuery().name }}</pre>
+      }
     </section>
   `,
   styles: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PostDetailComponent {
-  postQuery = useGetPostQuery(+this.route.snapshot.params.id, { pollingInterval: 5000 });
+  // Static arg
+  readonly postQuery = useGetPostQuery(+this.route.snapshot.params.id, { pollingInterval: 5000 });
+
+  // Dynamic signal arg
+  readonly #paramId = inject(Store).selectSignal(RouterSelectors.selectParamIdNumber);
+  readonly postDinamicQuery = useGetPostQuery(() => this.#paramId() ?? skipToken, {
+    pollingInterval: 5000,
+    selectFromResult: (result) => ({ ...result, name: result.data?.name }),
+  });
 
   #_ = effect(() => {
     const result = this.postQuery();