Make it reactive (or is it already?)

[mfp22]

Which @ngneat/query-* package(s) are relevant/releated to the feature request?

query

Description

I may have missed this in the examples, but I don't see a way to define the query key in terms of a signal or observable, or the query function in terms of a signal or observable. This is the default behavior of React Query and every other official implementation, so I'm hoping it's easy here.

Proposed solution

I'll modify an example in the README to what I think would be nice:

import { injectQuery } from '@ngneat/query';

@Injectable({ providedIn: 'root' })
export class TodosService {
  #http = inject(HttpClient);
  #query = injectQuery();

-  getTodos() {
+  getTodos(id: Signal<string>) {
    return this.#query({
-      queryKey: ['todos'] as const,
+      queryKey: () => ['todos', id()] as const,
      queryFn: () => {
        return this.#http.get<Todo[]>(
-          'https://jsonplaceholder.typicode.com/todos',
+          'https://jsonplaceholder.typicode.com/todos/' + id(),
        );
      },
    });
  }
}

Alternatives considered

An observable would be nice too, but this is more likely to be used with signals because RxJS already has switchMap for people already comfortable with reactive programming. Maybe RxJS is missing a cacheMap operator, but I think Query should maintain the simplicity of React Query at all costs.

Do you want to create a pull request?

No

[luii]

https://github.com/ngneat/query/discussions/159

[mfp22]

Huh. Okay, I didn't expect that.

[mfp22]

I'll let someone else close this because I still think it should be part of the implementation. It's kind of fundamental to how TanStack Query works imo.