queries.md

id	title	ref	replace
queries	Queries	docs/framework/react/guides/queries.md	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'

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

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

@Component({
  selector: 'todos',
  standalone: true,
  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,
  }))
}

If booleans aren't your thing, you can always use the status state as well:

@Component({
  selector: 'todos',
  standalone: true,
  template: `
    @switch (todos.status()) {
      @case ('pending') {
        <span>Loading...</span>
      }
      @case ('error') {
        <span>Error: {{ todos.error()?.message }}</span>
      }
      <!-- also status === 'success', but "else" logic works, too -->
      @default {
        <ul>
          @for (todo of todos.data(); track todo.id) {
            <li>{{ todo.title }}</li>
          } @empty {
            <li>No todos found</li>
          }
        </ul>
      }
    }
  `,
})
class TodosComponent {}