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.
tsx
function Todos() {
const {
status,
data: todos,
error,
isFetching,
} = useQuery({
queryKey: ['todos'],
queryFn: fetchTodos,
})
return status === 'pending' ? (
<span>Loading...</span>
) : status === 'error' ? (
<span>Error: {error.message}</span>
) : (
<>
{isFetching ? <div>Refreshing...</div> : null}
<div>
{todos.map((todo) => (
<Todo todo={todo} />
))}
</div>
</>
)
}
function Todos() {
const {
status,
data: todos,
error,
isFetching,
} = useQuery({
queryKey: ['todos'],
queryFn: fetchTodos,
})
return status === 'pending' ? (
<span>Loading...</span>
) : status === 'error' ? (
<span>Error: {error.message}</span>
) : (
<>
{isFetching ? <div>Refreshing...</div> : null}
<div>
{todos.map((todo) => (
<Todo todo={todo} />
))}
</div>
</>
)
}
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).
tsx
import { useIsFetching } from '@tanstack/react-query'
function GlobalLoadingIndicator() {
const isFetching = useIsFetching()
return isFetching ? (
<div>Queries are fetching in the background...</div>
) : null
}
import { useIsFetching } from '@tanstack/react-query'
function GlobalLoadingIndicator() {
const isFetching = useIsFetching()
return isFetching ? (
<div>Queries are fetching in the background...</div>
) : null
}
