Query Optionen
Einer der besten Wege, 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 zurück, was immer Sie ihm übergeben, aber er hat viele Vorteile, wenn Sie ihn mit TypeScript verwenden. Sie können alle möglichen Optionen für eine Abfrage an einem Ort definieren und erhalten außerdem Typinferenz und Typsicherheit für alle davon.
ts
import { queryOptions } from '@tanstack/react-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/react-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 unendliche Abfragen steht ein separater Helfer infiniteQueryOptions zur Verfügung.
Sie können einige Optionen immer noch auf Komponentenebene überschreiben. Ein sehr gängiges und nützliches Muster ist die Erstellung von select-Funktionen pro Komponente
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,
})
