TanStack Query: Cache-Invalidierungsstrategien

TL;DR: Cache-Invalidierung ist das schwierigste Problem beim Caching. TanStack Query bietet eine umfangreiche Invalidierungs-API: invalidateQueries mit Query-Filter-Matching, refetchQueries für sofortige Aktualisierung, removeQueries für Garbage Collection und setQueryData für gezielte Updates. Dieser Leitfaden behandelt sechs Invalidierungsstrategien für gängige SaaS-Szenarien.

Einführung

Der Cache von TanStack Query ist ein Key-Value-Store, wobei der Key die Struktur des Query-Keys ist. Invalidierung ist der Prozess, bei dem gecachte Daten als veraltet markiert und optional neu abgerufen werden. Die Kunst liegt darin, genau zu wissen, welche Queries bei einer Datenänderung invalidiert werden müssen.

Gezielte Invalidierung

const queryClient = useQueryClient()

// Alle Product-Queries invalidieren
queryClient.invalidateQueries({ queryKey: ['products'] })

// Ein einzelnes Produkt invalidieren
queryClient.invalidateQueries({ queryKey: ['product', productId] })

// Mit Filter invalidieren
queryClient.invalidateQueries({
  queryKey: ['products'],
  predicate: (query) => query.queryKey.includes('active'),
})

Invalidierung nach Mutations-Response

export function useCreateProduct() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: createProductFn,
    onSuccess: (newProduct) => {
      // Den einzelnen Produkt-Cache aktualisieren
      queryClient.setQueryData(['product', newProduct.id], newProduct)
      // Die Liste invalidieren
      queryClient.invalidateQueries({ queryKey: ['products'] })
      // Zugehörige Zähler invalidieren
      queryClient.invalidateQueries({ queryKey: ['dashboard', 'stats'] })
    },
  })
}

Invalidierungsstrategie-Matrix

Fazit

Effektives Cache-Management in TanStack Query bedeutet, die richtige Invalidierungsstrategie für jeden Mutationstyp zu wählen. Bei Listen-Mutationen: invalidieren. Bei Einzel-Item-Mutationen: setQueryData verwenden. Für eine sofortige UI: Optimistic Updates mit Rollback einsetzen.

Eine praktische Anleitung für sofortiges UI-Feedback finden Sie unter TanStack Query: Optimistic Updates. Wenn Ihre App auch ohne Netzwerkverbindung funktionieren muss, deckt Offline Support Persistenzmuster ab. Für die Synchronisierung von Echtzeit-Daten integriert WebSocket Real-Time Data mit Server-Sent Events, und der Edge Caching Strategies Guide behandelt CDN-Level-Caching, das den Client-Cache von TanStack Query ergänzt.