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.
vue
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isPending, isFetching, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: getTodos,
})
</script>
<template>
<div v-if="isFetching">Refreshing...</div>
<span v-if="isPending">Loading...</span>
<span v-else-if="isError">Error: {{ error.message }}</span>
<!-- We can assume by this point that `isSuccess === true` -->
<ul v-else-if="data">
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
</template>
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isPending, isFetching, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: getTodos,
})
</script>
<template>
<div v-if="isFetching">Refreshing...</div>
<span v-if="isPending">Loading...</span>
<span v-else-if="isError">Error: {{ error.message }}</span>
<!-- We can assume by this point that `isSuccess === true` -->
<ul v-else-if="data">
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
</template>
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).
vue
<script setup>
import { useIsFetching } from '@tanstack/vue-query'
const isFetching = useIsFetching()
</script>
<template>
<div v-if="isFetching">Queries are fetching in the background...</div>
</template>
<script setup>
import { useIsFetching } from '@tanstack/vue-query'
const isFetching = useIsFetching()
</script>
<template>
<div v-if="isFetching">Queries are fetching in the background...</div>
</template>
