Auf dieser Seite
Indikatoren für Hintergrundabruf
Der status === 'pending'-Zustand einer Abfrage reicht aus, um den anfänglichen Hard-Loading-Zustand für eine Abfrage anzuzeigen. Manchmal möchten Sie jedoch einen zusätzlichen Indikator anzeigen, dass eine Abfrage im Hintergrund neu abgerufen wird. Zu diesem Zweck stellen Abfragen auch ein boolesches isFetching bereit, das Sie verwenden können, um anzuzeigen, dass sich die Abfrage im Abrufzustand befindet, unabhängig vom Zustand der status-Variable.
angular-ts
@Component({
selector: 'todos',
template: `
@if (todosQuery.isPending()) {
Loading...
} @else if (todosQuery.isError()) {
An error has occurred: {{ todosQuery.error().message }}
} @else if (todosQuery.isSuccess()) {
@if (todosQuery.isFetching()) {
Refreshing...
}
@for (todos of todosQuery.data(); track todo.id) {
<todo [todo]="todo" />
}
}
`,
})
class TodosComponent {
todosQuery = injectQuery(() => ({
queryKey: ['todos'],
queryFn: fetchTodos,
}))
}
@Component({
selector: 'todos',
template: `
@if (todosQuery.isPending()) {
Loading...
} @else if (todosQuery.isError()) {
An error has occurred: {{ todosQuery.error().message }}
} @else if (todosQuery.isSuccess()) {
@if (todosQuery.isFetching()) {
Refreshing...
}
@for (todos of todosQuery.data(); track todo.id) {
<todo [todo]="todo" />
}
}
`,
})
class TodosComponent {
todosQuery = injectQuery(() => ({
queryKey: ['todos'],
queryFn: fetchTodos,
}))
}
Globale Ladezustandsanzeige für Hintergrundabfragen
Zusätzlich zu den individuellen Ladezuständen von Abfragen können Sie den Hook useIsFetching verwenden, um einen globalen Ladeindikator anzuzeigen, wenn irgendeine Abfrage abgerufen wird (auch im Hintergrund).
angular-ts
import { injectIsFetching } from '@tanstack/angular-query-experimental'
@Component({
selector: 'global-loading-indicator',
template: `
@if (isFetching()) {
<div>Queries are fetching in the background...</div>
}
`,
})
export class GlobalLoadingIndicatorComponent {
isFetching = injectIsFetching()
}
import { injectIsFetching } from '@tanstack/angular-query-experimental'
@Component({
selector: 'global-loading-indicator',
template: `
@if (isFetching()) {
<div>Queries are fetching in the background...</div>
}
`,
})
export class GlobalLoadingIndicatorComponent {
isFetching = injectIsFetching()
}
