queries.md

id	queries
title	Queries
ref	docs/framework/react/guides/queries.md
replace	React react-query promise custom hooks the `useQuery` hook `useQuery` TypeScript will also narrow the type of data correctly if you've checked for pending and error before accessing it. Angular angular-query promise or observable services `injectQuery` `injectQuery` TypeScript will only narrow the type when checking boolean signals such as `isPending` and `isError`.

import { injectQuery } from '@tanstack/angular-query-experimental'

@Component({
  // ...
})
export class TodosComponent {
  info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
}

result = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))

@Component({
  selector: 'todos',
  template: `
    @if (todos.isPending()) {
      <span>Loading...</span>
    } @else if (todos.isError()) {
      <span>Error: {{ todos.error()?.message }}</span>
    } @else {
      <!-- We can assume by this point that status === 'success' -->
      @for (todo of todos.data(); track todo.id) {
        <li>{{ todo.title }}</li>
      } @empty {
        <li>No todos found</li>
      }
    }
  `,
})
export class PostsComponent {
  todos = injectQuery(() => ({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  }))
}