Query Optionen
Eine der besten Möglichkeiten, queryKey und queryFn an mehreren Stellen zu teilen und sie dennoch nebeneinander zu halten, ist die Verwendung des queryOptions-Helpers. Zur Laufzeit gibt dieser Helfer einfach zurück, was 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/solid-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/solid-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 auf Komponentenebene immer noch überschreiben. Ein sehr verbreitetes 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,
})
