feat(query): 🔥 add experimental signal support

Author: NetanelBasal

.eslintrc.base.json

@@ -24,7 +24,9 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],

.github/workflows/ci.yml

@@ -31,6 +31,9 @@ jobs:
       - name: Install dependencies
         run: npm i
 
+      - name: Run Lint
+        run: npm run lint:all
+
       - name: Run Build
         run: npm run build:all
 

devtools/.eslintrc.json

@@ -35,9 +35,7 @@
     {
       "files": ["*.json"],
       "parser": "jsonc-eslint-parser",
-      "rules": {
-        "@nx/dependency-checks": "error"
-      }
+      "rules": {}
     }
   ]
 }

package.json

@@ -9,6 +9,7 @@
     "build:devtools": "nx build devtools",
     "build:all": "nx run-many --target=build",
     "test:all": "nx run-many --target=test",
+    "lint:all": "nx run-many --target=lint",
     "start": "nx serve",
     "format": "nx format:write --all",
     "update": "nx migrate latest",

query/.eslintrc.json

@@ -35,9 +35,7 @@
     {
       "files": ["*.json"],
       "parser": "jsonc-eslint-parser",
-      "rules": {
-        "@nx/dependency-checks": "error"
-      }
+      "rules": {}
     }
   ]
 }

query/src/lib/base-query.ts

@@ -10,6 +10,7 @@ import {
 import { Observable, shareReplay } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Result } from './types';
+import { assertInInjectionContext } from '@angular/core';
 
 export type CreateBaseQueryOptions<
   TQueryFnData = unknown,
@@ -60,11 +61,9 @@ export function createBaseQuery<
   >(client, defaultedOptions);
 
   const result$ = new Observable((observer) => {
-    const mergedOptions = client.defaultQueryOptions({
-      ...options,
-      // The query key can be changed, so we need to rebuild it each time
-      ...queryObserver.options,
-    });
+    const mergedOptions = client.defaultQueryOptions(
+      client.defaultQueryOptions(options)
+    );
 
     observer.next(queryObserver.getOptimisticResult(mergedOptions));
 
@@ -89,6 +88,18 @@ export function createBaseQuery<
   return {
     result$,
     setOptions: queryObserver.setOptions.bind(queryObserver),
-    toSignal: () => toSignal(result$),
+    __cached__: undefined,
+    // @experimental signal support
+    get result() {
+      assertInInjectionContext(function queryResultSignal() {
+        // noop
+      });
+
+      if (!this.__cached__) {
+        this.__cached__ = toSignal(this.result$);
+      }
+
+      return this.__cached__;
+    },
   };
 }

query/src/lib/mutation.ts

@@ -7,8 +7,9 @@ import {
   MutationObserverResult,
   notifyManager,
 } from '@tanstack/query-core';
-import { firstValueFrom, isObservable, Observable, shareReplay } from 'rxjs';
+import { isObservable, Observable, shareReplay } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { toPromise } from './utils';
 
 type CreateMutationOptions<
   TData = unknown,
@@ -40,9 +41,7 @@ type MutationResult<
   result$: Observable<
     MutationObserverResult<TData, TError, TVariables, TContext>
   >;
-  toSignal: () => Signal<
-    MutationObserverResult<TData, TError, TVariables, TContext>
-  >;
+  result: Signal<MutationObserverResult<TData, TError, TVariables, TContext>>;
 };
 
 @Injectable({ providedIn: 'root' })
@@ -65,10 +64,12 @@ class Mutation {
     >(this.instance, {
       ...options,
       mutationFn: (variables: TVariables): Promise<TData> => {
-        const result: Promise<TData> | Observable<TData> =
+        const source: Promise<TData> | Observable<TData> =
           options.mutationFn(variables);
-        if (isObservable(result)) return firstValueFrom(result);
-        return result;
+
+        if (isObservable(source)) return toPromise({ source });
+
+        return source;
       },
     });
 
@@ -94,17 +95,26 @@ class Mutation {
     );
 
     const mutate = (variables: TVariables) => {
-      mutationObserver.mutate(variables).catch(() => {});
+      mutationObserver.mutate(variables).catch(() => {
+        // noop
+      });
     };
 
     return {
       mutate,
-      mutateAsync: mutationObserver.mutate.bind(mutationObserver),
       reset: mutationObserver.reset.bind(mutationObserver),
       setOptions: mutationObserver.setOptions.bind(mutationObserver),
       result$,
-      toSignal: () => toSignal(result$, { requireSync: true }),
-    };
+      __cached__: undefined,
+      // @experimental signal support
+      get result() {
+        if (!this.__cached__) {
+          this.__cached__ = toSignal(this.result$);
+        }
+
+        return this.__cached__;
+      },
+    } as any;
   }
 }
 

query/src/lib/types.ts

@@ -6,6 +6,6 @@ export type ObservableQueryResult<T> = Observable<QueryObserverResult<T>>;
 
 export type Result<T> = {
   result$: Observable<T>;
-  toSignal(): Signal<T>;
+  result: Signal<T>;
   setOptions: QueryObserver['setOptions'];
 };

query/src/lib/utils.ts

@@ -5,14 +5,16 @@ export function toPromise<T>({
   signal,
 }: {
   source: Observable<T>;
-  signal: AbortSignal;
+  signal?: AbortSignal;
 }): Promise<T> {
   const cancel = new Subject<void>();
 
-  signal.addEventListener('abort', () => {
-    cancel.next();
-    cancel.complete();
-  });
+  if (signal) {
+    signal.addEventListener('abort', () => {
+      cancel.next();
+      cancel.complete();
+    });
+  }
 
-  return firstValueFrom(source.pipe(takeUntil(cancel)));
+  return firstValueFrom(source.pipe(signal ? takeUntil(cancel) : (s) => s));
 }

src/app/basic-page/todos-page.component.html

@@ -1,12 +1,16 @@
-<ng-container *ngIf="todos$ | async as todos">
+<ng-container *ngIf="todosResult.result$ | async as todos">
   <p *ngIf="todos.isPending">loading</p>
   <p *ngIf="todos.isSuccess">
     {{ todos.data[0].title }}
   </p>
+  <p *ngIf="todos.isError">Error</p>
 </ng-container>
 
-<h1>Singals</h1>
-<p *ngIf="todos().isLoading">loading</p>
-<p *ngIf="todos().isSuccess">
-  {{ todos().data?.[0]?.title }}
-</p>
+<h1>Signals</h1>
+<ng-container *ngIf="todos() as result">
+  <p *ngIf="result.isLoading">loading</p>
+  <p *ngIf="result.isSuccess">
+    {{ result.data[0].title }}
+  </p>
+  <p *ngIf="result.isError">Error</p>
+</ng-container>

src/app/basic-page/todos-page.component.ts

@@ -11,6 +11,6 @@ import { TodosService } from '../services/todos.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TodosPageComponent {
-  todos$ = inject(TodosService).getTodos().result$;
-  todos = inject(TodosService).getTodos().toSignal();
+  todosResult = inject(TodosService).getTodos();
+  todos = this.todosResult.result;
 }

src/app/mutation-page/mutation-page.component.ts

@@ -1,16 +1,9 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { injectIsMutating, injectMutation } from '@ngneat/query';
-import { HttpClient } from '@angular/common/http';
+import { injectIsMutating } from '@ngneat/query';
+
 import { FormsModule } from '@angular/forms';
 import { TodosService } from '../services/todos.service';
-
-interface Todo {
-  id: number;
-  title: string;
-  completed: boolean;
-}
-
 @Component({
   selector: 'query-mutation-page',
   standalone: true,
@@ -25,9 +18,8 @@ export class MutationPageComponent {
 
   public addTodoMutationsActive = this.useIsMutating().toSignal();
 
-
   public addTodo = this.todoService.addTodo();
-  public addTodoSignalResult = this.addTodo.toSignal();
+  public addTodoSignalResult = this.addTodo.result;
   public newTodo = '';
 
   public onAddTodo(title: string) {

src/app/services/todos.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
-import { injectMutation, injectQuery, queryOptions, toPromise } from '@ngneat/query';
+import { injectMutation, injectQuery, toPromise } from '@ngneat/query';
 
 interface Todo {
   id: number;
@@ -13,17 +13,6 @@ export class TodosService {
   private useMutation = injectMutation();
   private http = inject(HttpClient);
 
-  todosQuery = queryOptions({
-    queryKey: ['todos'] as const,
-    queryFn: ({ signal }) => {
-      const source = this.http.get<Todo[]>(
-        'https://jsonplaceholder.typicode.com/todos'
-      );
-
-      return toPromise({ source, signal });
-    },
-  });
-
   getTodos() {
     return this.query({
       queryKey: ['todos'] as const,
@@ -39,12 +28,20 @@ export class TodosService {
 
   addTodo() {
     return this.useMutation({
-      mutationFn: ({title, showError}: {title: string, showError: boolean}) => {
-        const url = showError ? 'https://jsonplaceholder.typicode.com/error/404' : 'https://jsonplaceholder.typicode.com/todos';
+      mutationFn: ({
+        title,
+        showError,
+      }: {
+        title: string;
+        showError: boolean;
+      }) => {
+        const url = showError
+          ? 'https://jsonplaceholder.typicode.com/error/404'
+          : 'https://jsonplaceholder.typicode.com/todos';
         return this.http.post<Todo>(url, {
           title,
         });
-      }
+      },
     });
   }
 }