QueryClientqueryClient.fetchQueryqueryClient.fetchInfiniteQueryqueryClient.prefetchQueryqueryClient.prefetchInfiniteQueryqueryClient.getQueryDataqueryClient.ensureQueryDataqueryClient.ensureInfiniteQueryDataqueryClient.getQueriesDataqueryClient.setQueryDataqueryClient.getQueryStatequeryClient.setQueriesDataqueryClient.invalidateQueriesqueryClient.refetchQueriesqueryClient.cancelQueriesqueryClient.removeQueriesqueryClient.resetQueriesqueryClient.isFetchingqueryClient.isMutatingqueryClient.getDefaultOptionsqueryClient.setDefaultOptionsqueryClient.getQueryDefaultsqueryClient.setQueryDefaultsqueryClient.getMutationDefaultsqueryClient.setMutationDefaultsqueryClient.getQueryCachequeryClient.getMutationCachequeryClient.clearqueryClient.resumePausedMutationsDie QueryClient kann verwendet werden, um mit einem Cache zu interagieren.
import { QueryClient } from '@tanstack/react-query'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: Infinity,
},
},
})
await queryClient.prefetchQuery({ queryKey: ['posts'], queryFn: fetchPosts })
import { QueryClient } from '@tanstack/react-query'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: Infinity,
},
},
})
await queryClient.prefetchQuery({ queryKey: ['posts'], queryFn: fetchPosts })
Ihre verfügbaren Methoden sind
Optionen
fetchQuery ist eine asynchrone Methode, die verwendet werden kann, um eine Abfrage abzurufen und im Cache zu speichern. Sie wird entweder mit den Daten aufgelöst oder mit dem Fehler ausgelöst. Verwenden Sie die Methode prefetchQuery, wenn Sie nur eine Abfrage abrufen möchten, ohne das Ergebnis zu benötigen.
Wenn die Abfrage existiert und die Daten nicht ungültig sind oder älter als die angegebene staleTime sind, werden die Daten aus dem Cache zurückgegeben. Andernfalls wird versucht, die neuesten Daten abzurufen.
try {
const data = await queryClient.fetchQuery({ queryKey, queryFn })
} catch (error) {
console.log(error)
}
try {
const data = await queryClient.fetchQuery({ queryKey, queryFn })
} catch (error) {
console.log(error)
}
Geben Sie eine staleTime an, um nur abzurufen, wenn die Daten älter als eine bestimmte Zeit sind.
try {
const data = await queryClient.fetchQuery({
queryKey,
queryFn,
staleTime: 10000,
})
} catch (error) {
console.log(error)
}
try {
const data = await queryClient.fetchQuery({
queryKey,
queryFn,
staleTime: 10000,
})
} catch (error) {
console.log(error)
}
Optionen
Die Optionen für fetchQuery sind genau die gleichen wie die von useQuery, außer den folgenden: enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, refetchOnMount, notifyOnChangeProps, throwOnError, select, suspense, placeholderData; Diese sind ausschließlich für useQuery und useInfiniteQuery bestimmt. Sie können den Quellcode für mehr Klarheit einsehen.
Gibt zurück
fetchInfiniteQuery ist ähnlich wie fetchQuery, kann aber verwendet werden, um eine unendliche Abfrage abzurufen und im Cache zu speichern.
try {
const data = await queryClient.fetchInfiniteQuery({ queryKey, queryFn })
console.log(data.pages)
} catch (error) {
console.log(error)
}
try {
const data = await queryClient.fetchInfiniteQuery({ queryKey, queryFn })
console.log(data.pages)
} catch (error) {
console.log(error)
}
Optionen
Die Optionen für fetchInfiniteQuery sind genau die gleichen wie die von fetchQuery.
Gibt zurück
prefetchQuery ist eine asynchrone Methode, die verwendet werden kann, um eine Abfrage vorab abzurufen, bevor sie benötigt oder mit useQuery und ähnlichen Funktionen gerendert wird. Die Methode funktioniert genauso wie fetchQuery, außer dass sie keine Daten auslöst oder zurückgibt.
await queryClient.prefetchQuery({ queryKey, queryFn })
await queryClient.prefetchQuery({ queryKey, queryFn })
Sie können sie sogar mit einer Standard-QueryFn in Ihrer Konfiguration verwenden!
await queryClient.prefetchQuery({ queryKey })
await queryClient.prefetchQuery({ queryKey })
Optionen
Die Optionen für prefetchQuery sind genau die gleichen wie die von fetchQuery.
Gibt zurück
prefetchInfiniteQuery ist ähnlich wie prefetchQuery, kann aber verwendet werden, um eine unendliche Abfrage vorab abzurufen und im Cache zu speichern.
await queryClient.prefetchInfiniteQuery({ queryKey, queryFn })
await queryClient.prefetchInfiniteQuery({ queryKey, queryFn })
Optionen
Die Optionen für prefetchInfiniteQuery sind genau die gleichen wie die von fetchQuery.
Gibt zurück
getQueryData ist eine synchrone Funktion, die verwendet werden kann, um die zwischengespeicherten Daten einer vorhandenen Abfrage abzurufen. Wenn die Abfrage nicht existiert, wird undefined zurückgegeben.
const data = queryClient.getQueryData(queryKey)
const data = queryClient.getQueryData(queryKey)
Optionen
Gibt zurück
ensureQueryData ist eine asynchrone Funktion, die verwendet werden kann, um die zwischengespeicherten Daten einer vorhandenen Abfrage abzurufen. Wenn die Abfrage nicht existiert, wird queryClient.fetchQuery aufgerufen und dessen Ergebnisse zurückgegeben.
const data = await queryClient.ensureQueryData({ queryKey, queryFn })
const data = await queryClient.ensureQueryData({ queryKey, queryFn })
Optionen
Gibt zurück
ensureInfiniteQueryData ist eine asynchrone Funktion, die verwendet werden kann, um die zwischengespeicherten Daten einer vorhandenen unendlichen Abfrage abzurufen. Wenn die Abfrage nicht existiert, wird queryClient.fetchInfiniteQuery aufgerufen und dessen Ergebnisse zurückgegeben.
const data = await queryClient.ensureInfiniteQueryData({
queryKey,
queryFn,
initialPageParam,
getNextPageParam,
})
const data = await queryClient.ensureInfiniteQueryData({
queryKey,
queryFn,
initialPageParam,
getNextPageParam,
})
Optionen
Gibt zurück
getQueriesData ist eine synchrone Funktion, die verwendet werden kann, um die zwischengespeicherten Daten mehrerer Abfragen abzurufen. Nur Abfragen, die dem übergebenen QueryKey oder QueryFilter entsprechen, werden zurückgegeben. Wenn keine übereinstimmenden Abfragen vorhanden sind, wird ein leeres Array zurückgegeben.
const data = queryClient.getQueriesData(filters)
const data = queryClient.getQueriesData(filters)
Optionen
Gibt zurück
Einschränkungen
Da die zurückgegebenen Daten in jedem Tupel unterschiedliche Strukturen haben können (z. B. die Verwendung eines Filters, um "aktive" Abfragen zurückzugeben, kann unterschiedliche Datentypen zurückgeben), ist der TData Generic standardmäßig auf unknown gesetzt. Wenn Sie einen spezifischeren Typ für TData angeben, wird davon ausgegangen, dass Sie sicher sind, dass die Dateneinträge jedes Tupels vom gleichen Typ sind.
Diese Unterscheidung ist eher eine "Bequemlichkeit" für TS-Entwickler, die wissen, welche Struktur zurückgegeben wird.
setQueryData ist eine synchrone Funktion, die verwendet werden kann, um die zwischengespeicherten Daten einer Abfrage sofort zu aktualisieren. Wenn die Abfrage nicht existiert, wird sie erstellt. **Wenn die Abfrage nicht von einem Query-Hook innerhalb der Standard-gcTime von 5 Minuten genutzt wird, wird die Abfrage aus dem Garbage Collector entfernt**. Um mehrere Abfragen gleichzeitig zu aktualisieren und Abfrageschlüssel teilweise abzugleichen, müssen Sie stattdessen queryClient.setQueriesData verwenden.
Der Unterschied zwischen der Verwendung von setQueryData und fetchQuery besteht darin, dass setQueryData synchron ist und davon ausgeht, dass Sie die Daten bereits synchron verfügbar haben. Wenn Sie die Daten asynchron abrufen müssen, wird empfohlen, entweder den QueryKey neu abzurufen oder fetchQuery zu verwenden, um den asynchronen Abruf zu handhaben.
queryClient.setQueryData(queryKey, updater)
queryClient.setQueryData(queryKey, updater)
Optionen
Verwendung eines Updater-Werts
setQueryData(queryKey, newData)
setQueryData(queryKey, newData)
Wenn der Wert undefined ist, werden die Abfragedaten nicht aktualisiert.
Verwendung einer Updater-Funktion
Zur Bequemlichkeit in der Syntax können Sie auch eine Updater-Funktion übergeben, die den aktuellen Datenwert erhält und den neuen zurückgibt.
setQueryData(queryKey, (oldData) => newData)
setQueryData(queryKey, (oldData) => newData)
Wenn die Updater-Funktion undefined zurückgibt, werden die Abfragedaten nicht aktualisiert. Wenn die Updater-Funktion undefined als Eingabe erhält, können Sie undefined zurückgeben, um das Update abzubrechen und somit *keinen* neuen Cache-Eintrag zu erstellen.
Unveränderlichkeit
Updates über setQueryData müssen auf *unveränderliche* Weise erfolgen. Versuchen Sie **NICHT**, direkt in den Cache zu schreiben, indem Sie oldData oder Daten, die Sie über getQueryData abgerufen haben, vor Ort ändern.
getQueryState ist eine synchrone Funktion, die verwendet werden kann, um den Status einer vorhandenen Abfrage abzurufen. Wenn die Abfrage nicht existiert, wird undefined zurückgegeben.
const state = queryClient.getQueryState(queryKey)
console.log(state.dataUpdatedAt)
const state = queryClient.getQueryState(queryKey)
console.log(state.dataUpdatedAt)
Optionen
setQueriesData ist eine synchrone Funktion, die verwendet werden kann, um die zwischengespeicherten Daten mehrerer Abfragen sofort zu aktualisieren, indem eine Filterfunktion verwendet oder der Abfrageschlüssel teilweise abgeglichen wird. Nur Abfragen, die dem übergebenen QueryKey oder QueryFilter entsprechen, werden aktualisiert - es werden keine neuen Cache-Einträge erstellt. Intern wird setQueryData für jede vorhandene Abfrage aufgerufen.
queryClient.setQueriesData(filters, updater)
queryClient.setQueriesData(filters, updater)
Optionen
Die Methode invalidateQueries kann verwendet werden, um einzelne oder mehrere Abfragen im Cache basierend auf ihren Abfrageschlüsseln oder anderen funktional zugänglichen Eigenschaften/Zuständen der Abfrage ungültig zu machen und neu abzurufen. Standardmäßig werden alle übereinstimmenden Abfragen sofort als ungültig markiert und aktive Abfragen im Hintergrund neu abgerufen.
await queryClient.invalidateQueries(
{
queryKey: ['posts'],
exact,
refetchType: 'active',
},
{ throwOnError, cancelRefetch },
)
await queryClient.invalidateQueries(
{
queryKey: ['posts'],
exact,
refetchType: 'active',
},
{ throwOnError, cancelRefetch },
)
Optionen
Die Methode refetchQueries kann verwendet werden, um Abfragen basierend auf bestimmten Bedingungen neu abzurufen.
Beispiele
// refetch all queries:
await queryClient.refetchQueries()
// refetch all stale queries:
await queryClient.refetchQueries({ stale: true })
// refetch all active queries partially matching a query key:
await queryClient.refetchQueries({ queryKey: ['posts'], type: 'active' })
// refetch all active queries exactly matching a query key:
await queryClient.refetchQueries({
queryKey: ['posts', 1],
type: 'active',
exact: true,
})
// refetch all queries:
await queryClient.refetchQueries()
// refetch all stale queries:
await queryClient.refetchQueries({ stale: true })
// refetch all active queries partially matching a query key:
await queryClient.refetchQueries({ queryKey: ['posts'], type: 'active' })
// refetch all active queries exactly matching a query key:
await queryClient.refetchQueries({
queryKey: ['posts', 1],
type: 'active',
exact: true,
})
Optionen
Gibt zurück
Diese Funktion gibt ein Promise zurück, das aufgelöst wird, wenn alle Abfragen neu abgerufen wurden. Standardmäßig wird **kein** Fehler ausgelöst, wenn eine dieser Abfragen fehlschlägt, dies kann jedoch durch Setzen der Option throwOnError auf true konfiguriert werden.
Hinweise
Die Methode cancelQueries kann verwendet werden, um ausgehende Abfragen basierend auf ihren Abfrageschlüsseln oder anderen funktional zugänglichen Eigenschaften/Zuständen der Abfrage abzubrechen.
Dies ist am nützlichsten bei der Durchführung optimistischer Updates, da Sie wahrscheinlich ausgehende Abfrage-Neuanforderungen abbrechen müssen, damit sie Ihr optimistisches Update nicht überschreiben, wenn sie aufgelöst werden.
await queryClient.cancelQueries(
{ queryKey: ['posts'], exact: true },
{ silent: true },
)
await queryClient.cancelQueries(
{ queryKey: ['posts'], exact: true },
{ silent: true },
)
Optionen
Gibt zurück
Diese Methode gibt nichts zurück.
Die Methode removeQueries kann verwendet werden, um Abfragen aus dem Cache basierend auf ihren Abfrageschlüsseln oder anderen funktional zugänglichen Eigenschaften/Zuständen der Abfrage zu entfernen.
queryClient.removeQueries({ queryKey, exact: true })
queryClient.removeQueries({ queryKey, exact: true })
Optionen
Gibt zurück
Diese Methode gibt nichts zurück.
Die Methode resetQueries kann verwendet werden, um Abfragen im Cache basierend auf ihren Abfrageschlüsseln oder anderen funktional zugänglichen Eigenschaften/Zuständen der Abfrage in ihren ursprünglichen Zustand zurückzusetzen.
Dies benachrichtigt Abonnenten – im Gegensatz zu clear, das alle Abonnenten entfernt – und setzt die Abfrage auf ihren vorab geladenen Zustand zurück – im Gegensatz zu invalidateQueries. Wenn eine Abfrage initialData hat, werden die Daten der Abfrage darauf zurückgesetzt. Wenn eine Abfrage aktiv ist, wird sie neu abgerufen.
queryClient.resetQueries({ queryKey, exact: true })
queryClient.resetQueries({ queryKey, exact: true })
Optionen
Gibt zurück
Diese Methode gibt ein Promise zurück, das aufgelöst wird, wenn alle aktiven Abfragen neu abgerufen wurden.
Diese Methode isFetching gibt eine Ganzzahl zurück, die angibt, wie viele Abfragen im Cache gerade abgerufen werden (einschließlich Hintergrundabrufe, Laden neuer Seiten oder Laden weiterer unendlicher Abfrageergebnisse).
if (queryClient.isFetching()) {
console.log('At least one query is fetching!')
}
if (queryClient.isFetching()) {
console.log('At least one query is fetching!')
}
TanStack Query exportiert auch einen praktischen Hook useIsFetching, mit dem Sie sich ohne manuelle Abonnierung des Query-Caches mit diesem Zustand in Ihren Komponenten verbinden können.
Optionen
Gibt zurück
Diese Methode gibt die Anzahl der abgerufenen Abfragen zurück.
Diese Methode isMutating gibt eine Ganzzahl zurück, die angibt, wie viele Mutationen im Cache gerade abgerufen werden.
if (queryClient.isMutating()) {
console.log('At least one mutation is fetching!')
}
if (queryClient.isMutating()) {
console.log('At least one mutation is fetching!')
}
TanStack Query exportiert auch einen praktischen Hook useIsMutating, mit dem Sie sich ohne manuelle Abonnierung des Mutations-Caches mit diesem Zustand in Ihren Komponenten verbinden können.
Optionen
Gibt zurück
Diese Methode gibt die Anzahl der abgerufenen Mutationen zurück.
Die Methode getDefaultOptions gibt die Standardoptionen zurück, die beim Erstellen des Clients oder mit setDefaultOptions gesetzt wurden.
const defaultOptions = queryClient.getDefaultOptions()
const defaultOptions = queryClient.getDefaultOptions()
Die Methode setDefaultOptions kann verwendet werden, um die Standardoptionen für diesen QueryClient dynamisch festzulegen. Zuvor definierte Standardoptionen werden überschrieben.
queryClient.setDefaultOptions({
queries: {
staleTime: Infinity,
},
})
queryClient.setDefaultOptions({
queries: {
staleTime: Infinity,
},
})
Die Methode getQueryDefaults gibt die Standardoptionen zurück, die für bestimmte Abfragen festgelegt wurden.
const defaultOptions = queryClient.getQueryDefaults(['posts'])
const defaultOptions = queryClient.getQueryDefaults(['posts'])
Beachten Sie, dass, wenn mehrere Abfragestandardwerte mit dem angegebenen Abfrageschlüssel übereinstimmen, sie basierend auf der Reihenfolge der Registrierung zusammengeführt werden. Siehe setQueryDefaults.
setQueryDefaults kann verwendet werden, um Standardoptionen für bestimmte Abfragen festzulegen.
queryClient.setQueryDefaults(['posts'], { queryFn: fetchPosts })
function Component() {
const { data } = useQuery({ queryKey: ['posts'] })
}
queryClient.setQueryDefaults(['posts'], { queryFn: fetchPosts })
function Component() {
const { data } = useQuery({ queryKey: ['posts'] })
}
Optionen
Wie in getQueryDefaults angegeben, spielt die Registrierungsreihenfolge der Abfragestandardwerte eine Rolle. Da die übereinstimmenden Standardwerte von getQueryDefaults zusammengeführt werden, sollte die Registrierung in der folgenden Reihenfolge erfolgen: vom **allgemeinsten Schlüssel** zum **am wenigsten allgemeinen**. Auf diese Weise überschreiben spezifischere Standardwerte allgemeinere.
Die Methode getMutationDefaults gibt die Standardoptionen zurück, die für bestimmte Mutationen festgelegt wurden.
const defaultOptions = queryClient.getMutationDefaults(['addPost'])
const defaultOptions = queryClient.getMutationDefaults(['addPost'])
setMutationDefaults kann verwendet werden, um Standardoptionen für bestimmte Mutationen festzulegen.
queryClient.setMutationDefaults(['addPost'], { mutationFn: addPost })
function Component() {
const { data } = useMutation({ mutationKey: ['addPost'] })
}
queryClient.setMutationDefaults(['addPost'], { mutationFn: addPost })
function Component() {
const { data } = useMutation({ mutationKey: ['addPost'] })
}
Optionen
Ähnlich wie bei setQueryDefaults spielt die Reihenfolge der Registrierung hier eine Rolle.
Die Methode getQueryCache gibt den Abfrage-Cache zurück, mit dem dieser Client verbunden ist.
const queryCache = queryClient.getQueryCache()
const queryCache = queryClient.getQueryCache()
Die Methode getMutationCache gibt den Mutations-Cache zurück, mit dem dieser Client verbunden ist.
const mutationCache = queryClient.getMutationCache()
const mutationCache = queryClient.getMutationCache()
Die Methode clear löscht alle verbundenen Caches.
queryClient.clear()
queryClient.clear()
Kann verwendet werden, um Mutationen fortzusetzen, die pausiert wurden, da keine Netzwerkverbindung bestand.
queryClient.resumePausedMutations()
queryClient.resumePausedMutations()