Framework
Version

QueryClient

QueryClient

Die QueryClient kann verwendet werden, um mit einem Cache zu interagieren.

tsx
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

  • queryCache?: QueryCache
    • Optional
    • Der Abfrage-Cache, mit dem dieser Client verbunden ist.
  • mutationCache?: MutationCache
    • Optional
    • Der Mutations-Cache, mit dem dieser Client verbunden ist.
  • defaultOptions?: DefaultOptions
    • Optional
    • Definiert Standardwerte für alle Abfragen und Mutationen, die diese QueryClient verwenden.
    • Sie können auch Standardwerte definieren, die für Hydration verwendet werden.

queryClient.fetchQuery

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.

tsx
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.

tsx
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

  • Promise<TData>

queryClient.fetchInfiniteQuery

fetchInfiniteQuery ist ähnlich wie fetchQuery, kann aber verwendet werden, um eine unendliche Abfrage abzurufen und im Cache zu speichern.

tsx
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

  • Promise<InfiniteData<TData, TPageParam>>

queryClient.prefetchQuery

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.

tsx
await queryClient.prefetchQuery({ queryKey, queryFn })
await queryClient.prefetchQuery({ queryKey, queryFn })

Sie können sie sogar mit einer Standard-QueryFn in Ihrer Konfiguration verwenden!

tsx
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

  • Promise<void>
    • Ein Promise wird zurückgegeben, das entweder sofort aufgelöst wird, wenn kein Abruf erforderlich ist, oder nachdem die Abfrage ausgeführt wurde. Es werden keine Daten zurückgegeben oder Fehler ausgelöst.

queryClient.prefetchInfiniteQuery

prefetchInfiniteQuery ist ähnlich wie prefetchQuery, kann aber verwendet werden, um eine unendliche Abfrage vorab abzurufen und im Cache zu speichern.

tsx
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

  • Promise<void>
    • Ein Promise wird zurückgegeben, das entweder sofort aufgelöst wird, wenn kein Abruf erforderlich ist, oder nachdem die Abfrage ausgeführt wurde. Es werden keine Daten zurückgegeben oder Fehler ausgelöst.

queryClient.getQueryData

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.

tsx
const data = queryClient.getQueryData(queryKey)
const data = queryClient.getQueryData(queryKey)

Optionen

Gibt zurück

  • data: TQueryFnData | undefined
    • Die Daten für die zwischengespeicherte Abfrage, oder undefined, wenn die Abfrage nicht existiert.

queryClient.ensureQueryData

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.

tsx
const data = await queryClient.ensureQueryData({ queryKey, queryFn })
const data = await queryClient.ensureQueryData({ queryKey, queryFn })

Optionen

  • die gleichen Optionen wie fetchQuery
  • revalidateIfStale: boolean
    • Optional
    • Standardmäßig false
    • Wenn auf true gesetzt, werden veraltete Daten im Hintergrund neu abgerufen, aber zwischengespeicherte Daten werden sofort zurückgegeben.

Gibt zurück

  • Promise<TData>

queryClient.ensureInfiniteQueryData

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.

tsx
const data = await queryClient.ensureInfiniteQueryData({
  queryKey,
  queryFn,
  initialPageParam,
  getNextPageParam,
})
const data = await queryClient.ensureInfiniteQueryData({
  queryKey,
  queryFn,
  initialPageParam,
  getNextPageParam,
})

Optionen

  • die gleichen Optionen wie fetchInfiniteQuery
  • revalidateIfStale: boolean
    • Optional
    • Standardmäßig false
    • Wenn auf true gesetzt, werden veraltete Daten im Hintergrund neu abgerufen, aber zwischengespeicherte Daten werden sofort zurückgegeben.

Gibt zurück

  • Promise<InfiniteData<TData, TPageParam>>

queryClient.getQueriesData

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.

tsx
const data = queryClient.getQueriesData(filters)
const data = queryClient.getQueriesData(filters)

Optionen

  • filters: QueryFilters: Query Filters
    • Wenn ein Filter übergeben wird, werden die Daten mit übereinstimmenden QueryKeys zurückgegeben.

Gibt zurück

  • [queryKey: QueryKey, data: TQueryFnData | undefined][]
    • Ein Array von Tupeln für die übereinstimmenden Abfrageschlüssel oder [], wenn keine Übereinstimmungen vorhanden sind. Die Tupel sind der Abfrageschlüssel und seine zugehörigen Daten.

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.

queryClient.setQueryData

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.

tsx
queryClient.setQueryData(queryKey, updater)
queryClient.setQueryData(queryKey, updater)

Optionen

  • queryKey: QueryKey: Query Keys
  • updater: TQueryFnData | undefined | ((oldData: TQueryFnData | undefined) => TQueryFnData | undefined)
    • Wenn kein Funktion übergeben wird, werden die Daten auf diesen Wert aktualisiert.
    • Wenn eine Funktion übergeben wird, erhält sie die alten Daten und muss neue zurückgeben.

Verwendung eines Updater-Werts

tsx
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.

tsx
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.

queryClient.getQueryState

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.

tsx
const state = queryClient.getQueryState(queryKey)
console.log(state.dataUpdatedAt)
const state = queryClient.getQueryState(queryKey)
console.log(state.dataUpdatedAt)

Optionen

queryClient.setQueriesData

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.

tsx
queryClient.setQueriesData(filters, updater)
queryClient.setQueriesData(filters, updater)

Optionen

  • filters: QueryFilters: Query Filters
    • Wenn ein Filter übergeben wird, werden übereinstimmende QueryKeys aktualisiert.
  • updater: TQueryFnData | (oldData: TQueryFnData | undefined) => TQueryFnData
    • Die setQueryData Updater-Funktion oder die neuen Daten werden für jeden übereinstimmenden QueryKey aufgerufen.

queryClient.invalidateQueries

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.

  • Wenn Sie **nicht möchten, dass aktive Abfragen neu abgerufen werden**, und sie nur als ungültig markiert werden sollen, können Sie die Option refetchType: 'none' verwenden.
  • Wenn Sie möchten, dass auch **inaktive Abfragen neu abgerufen werden**, verwenden Sie die Option refetchType: 'all'.
  • Für das Neuanfordern wird queryClient.refetchQueries aufgerufen.
tsx
await queryClient.invalidateQueries(
  {
    queryKey: ['posts'],
    exact,
    refetchType: 'active',
  },
  { throwOnError, cancelRefetch },
)
await queryClient.invalidateQueries(
  {
    queryKey: ['posts'],
    exact,
    refetchType: 'active',
  },
  { throwOnError, cancelRefetch },
)

Optionen

  • filters?: QueryFilters: Query Filters
    • queryKey?: QueryKey: Query Keys
    • refetchType?: 'active' | 'inactive' | 'all' | 'none'
      • Standardmäßig 'active'
      • Wenn auf active gesetzt, werden nur Abfragen, die dem refetch-Prädikat entsprechen und aktiv über useQuery und ähnliche Funktionen gerendert werden, im Hintergrund neu abgerufen.
      • Wenn auf inactive gesetzt, werden nur Abfragen, die dem refetch-Prädikat entsprechen und NICHT aktiv über useQuery und ähnliche Funktionen gerendert werden, im Hintergrund neu abgerufen.
      • Wenn auf all gesetzt, werden alle Abfragen, die dem refetch-Prädikat entsprechen, im Hintergrund neu abgerufen.
      • Wenn auf none gesetzt, werden keine Abfragen neu abgerufen, und diejenigen, die dem refetch-Prädikat entsprechen, werden nur als ungültig markiert.
  • options?: InvalidateOptions:
    • throwOnError?: boolean
      • Wenn auf true gesetzt, wird diese Methode ausgelöst, wenn eine der Abfrage-Neuanforderungsaufgaben fehlschlägt.
    • cancelRefetch?: boolean
      • Standardmäßig true
        • Standardmäßig wird eine aktuell laufende Anfrage abgebrochen, bevor eine neue Anfrage gestellt wird.
      • Wenn auf false gesetzt, erfolgt kein erneuter Abruf, wenn bereits eine Anfrage läuft.

queryClient.refetchQueries

Die Methode refetchQueries kann verwendet werden, um Abfragen basierend auf bestimmten Bedingungen neu abzurufen.

Beispiele

tsx
// 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

  • filters?: QueryFilters: Query Filters
  • options?: RefetchOptions:
    • throwOnError?: boolean
      • Wenn auf true gesetzt, wird diese Methode ausgelöst, wenn eine der Abfrage-Neuanforderungsaufgaben fehlschlägt.
    • cancelRefetch?: boolean
      • Standardmäßig true
        • Standardmäßig wird eine aktuell laufende Anfrage abgebrochen, bevor eine neue Anfrage gestellt wird.
      • Wenn auf false gesetzt, erfolgt kein erneuter Abruf, wenn bereits eine Anfrage läuft.

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

  • Abfragen, die "deaktiviert" sind, weil sie nur deaktivierte Beobachter haben, werden nie neu abgerufen.
  • Abfragen, die "statisch" sind, weil sie nur Beobachter mit einer statischen StaleTime haben, werden nie neu abgerufen.

queryClient.cancelQueries

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.

tsx
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.

queryClient.removeQueries

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.

tsx
queryClient.removeQueries({ queryKey, exact: true })
queryClient.removeQueries({ queryKey, exact: true })

Optionen

Gibt zurück

Diese Methode gibt nichts zurück.

queryClient.resetQueries

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.

tsx
queryClient.resetQueries({ queryKey, exact: true })
queryClient.resetQueries({ queryKey, exact: true })

Optionen

  • filters?: QueryFilters: Query Filters
  • options?: ResetOptions:
    • throwOnError?: boolean
      • Wenn auf true gesetzt, wird diese Methode ausgelöst, wenn eine der Abfrage-Neuanforderungsaufgaben fehlschlägt.
    • cancelRefetch?: boolean
      • Standardmäßig true
        • Standardmäßig wird eine aktuell laufende Anfrage abgebrochen, bevor eine neue Anfrage gestellt wird.
      • Wenn auf false gesetzt, erfolgt kein erneuter Abruf, wenn bereits eine Anfrage läuft.

Gibt zurück

Diese Methode gibt ein Promise zurück, das aufgelöst wird, wenn alle aktiven Abfragen neu abgerufen wurden.

queryClient.isFetching

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).

tsx
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.

queryClient.isMutating

Diese Methode isMutating gibt eine Ganzzahl zurück, die angibt, wie viele Mutationen im Cache gerade abgerufen werden.

tsx
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.

queryClient.getDefaultOptions

Die Methode getDefaultOptions gibt die Standardoptionen zurück, die beim Erstellen des Clients oder mit setDefaultOptions gesetzt wurden.

tsx
const defaultOptions = queryClient.getDefaultOptions()
const defaultOptions = queryClient.getDefaultOptions()

queryClient.setDefaultOptions

Die Methode setDefaultOptions kann verwendet werden, um die Standardoptionen für diesen QueryClient dynamisch festzulegen. Zuvor definierte Standardoptionen werden überschrieben.

tsx
queryClient.setDefaultOptions({
  queries: {
    staleTime: Infinity,
  },
})
queryClient.setDefaultOptions({
  queries: {
    staleTime: Infinity,
  },
})

queryClient.getQueryDefaults

Die Methode getQueryDefaults gibt die Standardoptionen zurück, die für bestimmte Abfragen festgelegt wurden.

tsx
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.

queryClient.setQueryDefaults

setQueryDefaults kann verwendet werden, um Standardoptionen für bestimmte Abfragen festzulegen.

tsx
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

  • queryKey: QueryKey: Query Keys
  • options: QueryOptions

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.

queryClient.getMutationDefaults

Die Methode getMutationDefaults gibt die Standardoptionen zurück, die für bestimmte Mutationen festgelegt wurden.

tsx
const defaultOptions = queryClient.getMutationDefaults(['addPost'])
const defaultOptions = queryClient.getMutationDefaults(['addPost'])

queryClient.setMutationDefaults

setMutationDefaults kann verwendet werden, um Standardoptionen für bestimmte Mutationen festzulegen.

tsx
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

  • mutationKey: unknown[]
  • options: MutationOptions

Ähnlich wie bei setQueryDefaults spielt die Reihenfolge der Registrierung hier eine Rolle.

queryClient.getQueryCache

Die Methode getQueryCache gibt den Abfrage-Cache zurück, mit dem dieser Client verbunden ist.

tsx
const queryCache = queryClient.getQueryCache()
const queryCache = queryClient.getQueryCache()

queryClient.getMutationCache

Die Methode getMutationCache gibt den Mutations-Cache zurück, mit dem dieser Client verbunden ist.

tsx
const mutationCache = queryClient.getMutationCache()
const mutationCache = queryClient.getMutationCache()

queryClient.clear

Die Methode clear löscht alle verbundenen Caches.

tsx
queryClient.clear()
queryClient.clear()

queryClient.resumePausedMutations

Kann verwendet werden, um Mutationen fortzusetzen, die pausiert wurden, da keine Netzwerkverbindung bestand.

tsx
queryClient.resumePausedMutations()
queryClient.resumePausedMutations()