Query Keys

Im Grunde verwaltet TanStack Query das Query-Caching für Sie basierend auf Query Keys. Query Keys müssen auf der obersten Ebene ein Array sein und können so einfach wie ein Array mit einem einzelnen String oder so komplex wie ein Array aus vielen Strings und verschachtelten Objekten sein. Solange der Query Key mit JSON.stringify serialisierbar und eindeutig für die Daten der Query ist, können Sie ihn verwenden!

Die einfachste Form eines Keys ist ein Array mit konstanten Werten. Dieses Format ist nützlich für

• Generische Listen-/Indexressourcen
• Nicht-hierarchische Ressourcen

// A list of todos
useQuery({ queryKey: ['todos'], ... })

// Something else, whatever!
useQuery({ queryKey: ['something', 'special'], ... })

// A list of todos
useQuery({ queryKey: ['todos'], ... })

// Something else, whatever!
useQuery({ queryKey: ['something', 'special'], ... })

Wenn eine Query mehr Informationen benötigt, um ihre Daten eindeutig zu beschreiben, können Sie ein Array mit einem String und beliebig vielen serialisierbaren Objekten verwenden, um diese zu beschreiben. Dies ist nützlich für

• Hierarchische oder verschachtelte Ressourcen
  • Es ist üblich, eine ID, einen Index oder ein anderes primitives Element zu übergeben, um das Element eindeutig zu identifizieren
• Queries mit zusätzlichen Parametern
  • Es ist üblich, ein Objekt mit zusätzlichen Optionen zu übergeben

// An individual todo
useQuery({ queryKey: ['todo', 5], ... })

// An individual todo in a "preview" format
useQuery({ queryKey: ['todo', 5, { preview: true }], ...})

// A list of todos that are "done"
useQuery({ queryKey: ['todos', { type: 'done' }], ... })

// An individual todo
useQuery({ queryKey: ['todo', 5], ... })

// An individual todo in a "preview" format
useQuery({ queryKey: ['todo', 5, { preview: true }], ...})

// A list of todos that are "done"
useQuery({ queryKey: ['todos', { type: 'done' }], ... })

Das bedeutet, dass, unabhängig von der Reihenfolge der Schlüssel in Objekten, alle folgenden Queries als gleich betrachtet werden

useQuery({ queryKey: ['todos', { status, page }], ... })
useQuery({ queryKey: ['todos', { page, status }], ...})
useQuery({ queryKey: ['todos', { page, status, other: undefined }], ... })

useQuery({ queryKey: ['todos', { status, page }], ... })
useQuery({ queryKey: ['todos', { page, status }], ...})
useQuery({ queryKey: ['todos', { page, status, other: undefined }], ... })

Die folgenden Query Keys sind jedoch nicht gleich. Die Reihenfolge der Array-Elemente ist wichtig!

useQuery({ queryKey: ['todos', status, page], ... })
useQuery({ queryKey: ['todos', page, status], ...})
useQuery({ queryKey: ['todos', undefined, page, status], ...})

useQuery({ queryKey: ['todos', status, page], ... })
useQuery({ queryKey: ['todos', page, status], ...})
useQuery({ queryKey: ['todos', undefined, page, status], ...})

Da Query Keys die Daten, die sie abrufen, eindeutig beschreiben, sollten sie alle Variablen enthalten, die Sie in Ihrer Query-Funktion verwenden und die sich ändern. Zum Beispiel

function useTodos(todoId) {
  const queryKey = ['todos', todoId]
  return useQuery({
    queryKey,
    queryFn: () => fetchTodoById(todoId.value),
  })
}

function useTodos(todoId) {
  const queryKey = ['todos', todoId]
  return useQuery({
    queryKey,
    queryFn: () => fetchTodoById(todoId.value),
  })
}

Beachten Sie, dass Query Keys als Abhängigkeiten für Ihre Query-Funktionen fungieren. Das Hinzufügen abhängiger Variablen zu Ihrem Query Key stellt sicher, dass Queries unabhängig voneinander gecacht werden und dass bei jeder Änderung einer Variablen Queries automatisch neu abgerufen werden (abhängig von Ihren staleTime Einstellungen). Weitere Informationen und Beispiele finden Sie im Abschnitt exhaustive-deps.

Für Tipps zur Organisation von Query Keys in größeren Anwendungen werfen Sie einen Blick auf Effective React Query Keys und prüfen Sie das Query Key Factory Package aus den Community-Ressourcen.