Queries deaktivieren/pausieren
Wenn Sie eine Abfrage jemals daran hindern möchten, automatisch ausgeführt zu werden, können Sie die Option enabled = false verwenden. Die Option enabled akzeptiert auch eine Callback-Funktion, die einen Booleschen Wert zurückgibt.
Wenn enabled false ist
- Wenn die Abfrage gecachte Daten hat, wird die Abfrage im Zustand status === 'success' oder isSuccess initialisiert.
- Wenn die Abfrage keine gecachten Daten hat, startet die Abfrage im Zustand status === 'pending' und fetchStatus === 'idle'.
- Die Abfrage wird beim Mounten nicht automatisch abgerufen.
- Die Abfrage wird nicht automatisch im Hintergrund erneut abgerufen.
- Die Abfrage ignoriert Aufrufe von invalidateQueries und refetchQueries des Query Clients, die normalerweise dazu führen würden, dass die Abfrage erneut abgerufen wird.
- refetch, zurückgegeben von useQuery, kann verwendet werden, um manuell einen Abruf der Abfrage auszulösen. Es funktioniert jedoch nicht mit skipToken.
TypeScript-Benutzer bevorzugen möglicherweise skipToken als Alternative zu enabled = false.
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isLoading, isError, data, error, refetch, isFetching } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
enabled: false,
})
</script>
<template>
<button @click="refetch()">Fetch Todos</button>
<span v-if="isLoading">Loading...</span>
<span v-else-if="isError">Error: {{ error?.message }}</span>
<div v-else-if="data">
<span v-if="isFetching">Fetching...</span>
<ul>
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
</div>
<span v-else>Not ready...</span>
</template>
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isLoading, isError, data, error, refetch, isFetching } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
enabled: false,
})
</script>
<template>
<button @click="refetch()">Fetch Todos</button>
<span v-if="isLoading">Loading...</span>
<span v-else-if="isError">Error: {{ error?.message }}</span>
<div v-else-if="data">
<span v-if="isFetching">Fetching...</span>
<ul>
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
</div>
<span v-else>Not ready...</span>
</template>
Das dauerhafte Deaktivieren einer Abfrage verzichtet auf viele großartige Funktionen, die TanStack Query zu bieten hat (wie z. B. Hintergrund-Refetches), und ist auch nicht der idiomatische Weg. Es bringt Sie vom deklarativen Ansatz (Definition von Abhängigkeiten, wann Ihre Abfrage ausgeführt werden soll) in einen imperativen Modus (rufen Sie ab, wenn ich hier klicke). Es ist auch nicht möglich, Parameter an refetch zu übergeben. Oftmals möchten Sie nur eine Lazy Query, die den anfänglichen Abruf verzögert
Lazy Queries
Die enabled-Option kann nicht nur zum dauerhaften Deaktivieren einer Abfrage verwendet werden, sondern auch, um sie zu einem späteren Zeitpunkt zu aktivieren/deaktivieren. Ein gutes Beispiel wäre ein Filterformular, bei dem Sie die erste Anfrage erst auslösen möchten, sobald der Benutzer einen Filterwert eingegeben hat
<script setup>
import { useQuery } from '@tanstack/vue-query'
const filter = ref('')
const isEnabled = computed(() => !!filter.value)
const { data } = useQuery({
queryKey: ['todos', filter],
queryFn: () => fetchTodos(filter),
// ⬇️ disabled as long as the filter is empty
enabled: isEnabled,
})
</script>
<template>
<span v-if="data">Filter was set and data is here!</span>
</template>
<script setup>
import { useQuery } from '@tanstack/vue-query'
const filter = ref('')
const isEnabled = computed(() => !!filter.value)
const { data } = useQuery({
queryKey: ['todos', filter],
queryFn: () => fetchTodos(filter),
// ⬇️ disabled as long as the filter is empty
enabled: isEnabled,
})
</script>
<template>
<span v-if="data">Filter was set and data is here!</span>
</template>
isLoading (Früher: isInitialLoading)
Lazy Queries sind von Anfang an im Zustand status: 'pending', da pending bedeutet, dass noch keine Daten vorhanden sind. Dies ist technisch gesehen korrekt, aber da wir derzeit keine Daten abrufen (da die Abfrage nicht *enabled* ist), bedeutet dies auch, dass Sie dieses Flag wahrscheinlich nicht zum Anzeigen eines Lade-Spinners verwenden können.
Wenn Sie deaktivierte oder Lazy Queries verwenden, können Sie stattdessen das Flag isLoading verwenden. Es ist ein abgeleitetes Flag, das berechnet wird aus
isPending && isFetching
sodass es nur dann true ist, wenn die Abfrage gerade zum ersten Mal abgerufen wird.
Typsicheres Deaktivieren von Abfragen mit skipToken
Wenn Sie TypeScript verwenden, können Sie skipToken verwenden, um eine Abfrage zu deaktivieren. Dies ist nützlich, wenn Sie eine Abfrage basierend auf einer Bedingung deaktivieren möchten, aber die Abfrage trotzdem typsicher halten möchten.
WICHTIG: refetch von useQuery funktioniert nicht mit skipToken. Ansonsten funktioniert skipToken genauso wie enabled: false.
<script setup>
import { useQuery, skipToken } from '@tanstack/vue-query'
const filter = ref('')
const queryFn = computed(() =>
!!filter.value ? () => fetchTodos(filter) : skipToken,
)
const { data } = useQuery({
queryKey: ['todos', filter],
// ⬇️ disabled as long as the filter is undefined or empty
queryFn: queryFn,
})
</script>
<template>
<span v-if="data">Filter was set and data is here!</span>
</template>
<script setup>
import { useQuery, skipToken } from '@tanstack/vue-query'
const filter = ref('')
const queryFn = computed(() =>
!!filter.value ? () => fetchTodos(filter) : skipToken,
)
const { data } = useQuery({
queryKey: ['todos', filter],
// ⬇️ disabled as long as the filter is undefined or empty
queryFn: queryFn,
})
</script>
<template>
<span v-if="data">Filter was set and data is here!</span>
</template>
