QueryCache

Die QueryCache ist der Speicher für TanStack Query. Sie speichert alle Daten, Metainformationen und den Zustand von Queries, die sie enthält.

Normalerweise interagieren Sie nicht direkt mit der QueryCache, sondern verwenden stattdessen den QueryClient für einen bestimmten Cache.

import { QueryCache } from '@tanstack/react-query'

const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error)
  },
  onSuccess: (data) => {
    console.log(data)
  },
  onSettled: (data, error) => {
    console.log(data, error)
  },
})

const query = queryCache.find(['posts'])

import { QueryCache } from '@tanstack/react-query'

const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error)
  },
  onSuccess: (data) => {
    console.log(data)
  },
  onSettled: (data, error) => {
    console.log(data, error)
  },
})

const query = queryCache.find(['posts'])

Ihre verfügbaren Methoden sind

• find
• findAll
• subscribe
• clear

Optionen

• onError?: (error: unknown, query: Query) => void
  • Optional
  • Diese Funktion wird aufgerufen, wenn bei einer Abfrage ein Fehler auftritt.
• onSuccess?: (data: unknown, query: Query) => void
  • Optional
  • Diese Funktion wird aufgerufen, wenn eine Abfrage erfolgreich ist.
• onSettled?: (data: unknown | undefined, error: unknown | null, query: Query) => void
  • Optional
  • Diese Funktion wird aufgerufen, wenn eine Abfrage abgeschlossen ist (entweder erfolgreich oder mit einem Fehler).

find ist eine etwas fortgeschrittenere synchrone Methode, die verwendet werden kann, um eine vorhandene Query-Instanz aus dem Cache zu erhalten. Diese Instanz enthält nicht nur alle Zustände der Abfrage, sondern auch alle Instanzen und die zugrunde liegenden Mechanismen der Abfrage. Wenn die Abfrage nicht existiert, wird undefined zurückgegeben.

Hinweis: Dies ist normalerweise nicht für die meisten Anwendungen erforderlich, kann aber in seltenen Fällen nützlich sein, wenn mehr Informationen über eine Abfrage benötigt werden (z. B. das Überprüfen des Timestamps query.state.dataUpdatedAt, um zu entscheiden, ob eine Abfrage frisch genug ist, um als Anfangswert verwendet zu werden).

const query = queryCache.find(queryKey)

const query = queryCache.find(queryKey)

Optionen

• filters?: QueryFilters: Query Filters

Gibt zurück

• Query
  • Die Query-Instanz aus dem Cache

findAll ist eine noch fortgeschrittenere synchrone Methode, die verwendet werden kann, um vorhandene Query-Instanzen aus dem Cache zu erhalten, die teilweise mit dem Query-Schlüssel übereinstimmen. Wenn keine Abfragen existieren, wird ein leeres Array zurückgegeben.

Hinweis: Dies ist normalerweise nicht für die meisten Anwendungen erforderlich, kann aber in seltenen Fällen nützlich sein, wenn mehr Informationen über eine Abfrage benötigt werden

const queries = queryCache.findAll(queryKey)

const queries = queryCache.findAll(queryKey)

Optionen

• queryKey?: QueryKey: Query Keys
• filters?: QueryFilters: Query Filters

Gibt zurück

• Query[]
  • Query-Instanzen aus dem Cache

Die Methode subscribe kann verwendet werden, um sich für die gesamte QueryCache zu registrieren und über sichere/bekannte Updates der Cache wie sich ändernde Query-Zustände oder hinzugefügte/entfernte Queries informiert zu werden.

const callback = (event) => {
  console.log(event.type, event.query)
}

const unsubscribe = queryCache.subscribe(callback)

const callback = (event) => {
  console.log(event.type, event.query)
}

const unsubscribe = queryCache.subscribe(callback)

Optionen

• callback: (event: QueryCacheNotifyEvent) => void
  • Diese Funktion wird mit der QueryCache jedes Mal aufgerufen, wenn sie über ihre verfolgten Update-Mechanismen aktualisiert wird (z. B. query.setState, queryClient.removeQueries usw.). Außerhalb des Gültigkeitsbereichs liegende Mutationen des Caches werden nicht empfohlen und lösen keine Abonnement-Callbacks aus.

Gibt zurück

• unsubscribe: Function => void
  • Diese Funktion hebt die Registrierung des Callbacks von der QueryCache auf.

Die Methode clear kann verwendet werden, um den Cache vollständig zu leeren und neu zu beginnen.

queryCache.clear()

queryCache.clear()

Um ein besseres Verständnis dafür zu bekommen, wie die QueryCache intern funktioniert, werfen Sie einen Blick auf #18: Inside React Query aus den Community-Ressourcen.