后台拉取指示器
查询的 status === 'pending' 状态足以显示查询的初始硬加载状态,但有时你可能希望额外显示一个指示器,表明某个查询正在后台重新拉取。为此,查询还提供了一个 isFetching 布尔值,你可以用它来表明查询正处于拉取状态,而无需关心 status 变量的实际状态:
angular-ts
1@Component({2 selector: 'todos',3 template: `4 @if (todosQuery.isPending()) {5 Loading...6 } @else if (todosQuery.isError()) {7 An error has occurred: {{ todosQuery.error().message }}8 } @else if (todosQuery.isSuccess()) {9 @if (todosQuery.isFetching()) {10 Refreshing...11 }12 @for (todos of todosQuery.data(); track todo.id) {13 <todo [todo]="todo" />14 }15 }16 `,17})18class TodosComponent {19 readonly todosQuery = injectQuery(() => ({20 queryKey: ['todos'],21 queryFn: fetchTodos,22 }))23}显示全局后台拉取加载状态
除了单个查询的加载状态外,如果你希望在任意查询(包括后台查询)处于拉取状态时显示一个全局加载指示器,则可以使用 injectIsFetching 函数:
angular-ts
1import { injectIsFetching } from '@tanstack/angular-query-experimental'2 3@Component({4 selector: 'global-loading-indicator',5 template: `6 @if (isFetching()) {7 <div>Queries are fetching in the background...</div>8 }9 `,10})11export class GlobalLoadingIndicatorComponent {12 readonly isFetching = injectIsFetching()13}