Query Optionen
Eine der besten Möglichkeiten, queryKey und queryFn zwischen mehreren Stellen zu teilen und sie dennoch nah beieinander zu halten, ist die Verwendung des queryOptions-Helfer. Zur Laufzeit gibt dieser Helfer einfach das zurück, was Sie ihm übergeben, aber er bietet viele Vorteile, wenn Sie ihn mit TypeScript verwenden. Sie können alle möglichen Optionen für eine Query an einem Ort definieren und erhalten außerdem Typinferenz und Typsicherheit für alle davon.
ts
import { queryOptions } from '@tanstack/vue-query'
function groupOptions(id: number) {
return queryOptions({
queryKey: ['groups', id],
queryFn: () => fetchGroups(id),
staleTime: 5 * 1000,
})
}
// usage:
useQuery(groupOptions(1))
useSuspenseQuery(groupOptions(5))
useQueries({
queries: [groupOptions(1), groupOptions(2)],
})
queryClient.prefetchQuery(groupOptions(23))
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
import { queryOptions } from '@tanstack/vue-query'
function groupOptions(id: number) {
return queryOptions({
queryKey: ['groups', id],
queryFn: () => fetchGroups(id),
staleTime: 5 * 1000,
})
}
// usage:
useQuery(groupOptions(1))
useSuspenseQuery(groupOptions(5))
useQueries({
queries: [groupOptions(1), groupOptions(2)],
})
queryClient.prefetchQuery(groupOptions(23))
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
Für Infinite Queries ist ein separater infiniteQueryOptions-Helfer verfügbar.
Sie können einige Optionen immer noch auf Komponentenebene überschreiben. Ein sehr gängiges und nützliches Muster ist die Erstellung von pro-Komponenten select-Funktionen.
ts
// Type inference still works, so query.data will be the return type of select instead of queryFn
const query = useQuery({
...groupOptions(1),
select: (data) => data.groupName,
})
// Type inference still works, so query.data will be the return type of select instead of queryFn
const query = useQuery({
...groupOptions(1),
select: (data) => data.groupName,
})
