What is the proper pattern to use queries in Angular?

[sandrooco]

I know react-query and use hooks to reuse queries (when I need data in more than one component). Now I'm trying the Angular library and try to do the same. Is there a recommended pattern? Put it in a service? Simply export the query from a .ts file?

[V1OL3TF0X]

After some digging, I've come up with something like this:

import { Injectable } from '@angular/core';
import { TodosService } from './todos.service';
import {
  CreateQueryResult,
  injectQuery,
} from '@tanstack/angular-query-experimental';
import { Todo } from './todo';

export interface TodoQueryService extends CreateQueryResult<Todo[], Error> {}

@Injectable({ providedIn: 'root' })
export class TodoQueryService {
  constructor(private service: TodosService) {
    return Object.assign(
      this,
      injectQuery(() => ({
        queryKey: ['todos'],
        queryFn: () => this.service.getTodos(),
      })),
    );
  }
}

It get's the job done, I think it even has all the right type coersions, but someone more experienced with TS and/or Angular should take a look on that - I started playing with NG only last year.

CAVEAT: It seems to make every consumer use the same entity of the query / mutation if you inject it, so if you want separete it's probably best to use the c-or

EDIT: Apparently (I'm so new to Angular) you can just do this:

import { inject } from '@angular/core';
import { TodosService } from './todos.service';
import {
  injectQuery,
} from '@tanstack/angular-query-experimental';
import { Todo } from './todo';

export function injectTodoQuery() {
  const service = inject(TodosService);
  return injectQuery(() => ({
    queryKey: ['todos'],
    queryFn: () => service.getTodos(),
  }));
}