useQueries

Der useQueries Hook kann verwendet werden, um eine variable Anzahl von Abfragen abzurufen.

const ids = [1, 2, 3]
const results = useQueries({
  queries: ids.map((id) => ({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
    staleTime: Infinity,
  })),
})

const ids = [1, 2, 3]
const results = useQueries({
  queries: ids.map((id) => ({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
    staleTime: Infinity,
  })),
})

Optionen

Der useQueries Hook akzeptiert ein Options-Objekt mit einem queries Schlüssel, dessen Wert ein Array mit Query-Options-Objekten ist, die identisch mit denen des useQuery Hooks sind (ausgenommen der queryClient Option – da der QueryClient auf der obersten Ebene übergeben werden kann).

• queryClient?: QueryClient
  • Verwenden Sie dies, um einen benutzerdefinierten QueryClient bereitzustellen. Andernfalls wird derjenige aus dem nächstgelegenen Kontext verwendet.
• combine?: (result: UseQueriesResults) => TCombinedResult
  • Verwenden Sie dies, um die Ergebnisse der Abfragen zu einem einzigen Wert zu kombinieren.

Das Vorhandensein desselben Query-Schlüssels mehr als einmal im Array von Query-Objekten kann dazu führen, dass einige Daten zwischen den Abfragen geteilt werden. Um dies zu vermeiden, sollten Sie die Abfragen de-duplizieren und die Ergebnisse wieder in die gewünschte Struktur abbilden.

placeholderData

Die placeholderData Option existiert auch für useQueries, erhält aber keine Informationen von zuvor gerenderten Abfragen wie useQuery, da die Eingabe für useQueries bei jedem Rendern eine andere Anzahl von Abfragen sein kann.

Gibt zurück

Der useQueries Hook gibt ein Array mit allen Abfrageergebnissen zurück. Die Reihenfolge der Rückgabe entspricht der Eingabereihenfolge.

Wenn Sie Daten (oder andere Query-Informationen) aus den Ergebnissen zu einem einzigen Wert kombinieren möchten, können Sie die combine Option verwenden. Das Ergebnis wird strukturell geteilt, um so referenziell stabil wie möglich zu sein.

const ids = [1, 2, 3]
const combinedQueries = useQueries({
  queries: ids.map((id) => ({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
  })),
  combine: (results) => {
    return {
      data: results.map((result) => result.data),
      pending: results.some((result) => result.isPending),
    }
  },
})

const ids = [1, 2, 3]
const combinedQueries = useQueries({
  queries: ids.map((id) => ({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
  })),
  combine: (results) => {
    return {
      data: results.map((result) => result.data),
      pending: results.some((result) => result.isPending),
    }
  },
})

Im obigen Beispiel wird combinedQueries ein Objekt mit einer data und einer pending Eigenschaft sein. Beachten Sie, dass alle anderen Eigenschaften der Query-Ergebnisse verloren gehen.

Die combine Funktion wird nur dann erneut ausgeführt, wenn

• die combine Funktion selbst referenziell geändert wurde
• sich eines der Abfrageergebnisse geändert hat

Das bedeutet, dass eine inline combine Funktion, wie oben gezeigt, bei jedem Rendern ausgeführt wird. Um dies zu vermeiden, können Sie die combine Funktion in useCallback einschließen oder sie in eine stabile Funktionsreferenz extrahieren, wenn sie keine Abhängigkeiten hat.