Parallele Queries

"Parallele" Abfragen sind Abfragen, die parallel, d.h. gleichzeitig ausgeführt werden, um die Abrufkongruenz zu maximieren.

Wenn die Anzahl der parallelen Abfragen unverändert bleibt, ist die Verwendung von parallelen Abfragen kein zusätzlicher Aufwand. Verwenden Sie einfach beliebig viele der TanStack Query Hooks useQuery und useInfiniteQuery nebeneinander!

function App () {
  // The following queries will execute in parallel
  const usersQuery = useQuery(() => { queryKey: ['users'], queryFn: fetchUsers })
  const teamsQuery = useQuery(() => { queryKey: ['teams'], queryFn: fetchTeams })
  const projectsQuery = useQuery(() => { queryKey: ['projects'], queryFn: fetchProjects })
  ...
}

function App () {
  // The following queries will execute in parallel
  const usersQuery = useQuery(() => { queryKey: ['users'], queryFn: fetchUsers })
  const teamsQuery = useQuery(() => { queryKey: ['teams'], queryFn: fetchTeams })
  const projectsQuery = useQuery(() => { queryKey: ['projects'], queryFn: fetchProjects })
  ...
}

Wenn Sie React Query im Suspense-Modus verwenden, funktioniert dieses Muster der Parallelität nicht, da die erste Abfrage intern ein Promise auslösen und die Komponente aussetzen würde, bevor die anderen Abfragen ausgeführt werden. Um dies zu umgehen, müssen Sie entweder den Hook useSuspenseQueries verwenden (was empfohlen wird) oder Ihre eigene Parallelität mit separaten Komponenten für jede useSuspenseQuery-Instanz orchestrieren.

Wenn sich die Anzahl der Abfragen, die Sie ausführen müssen, von Render zu Render ändert, können Sie keine manuelle Abfrage verwenden, da dies gegen die Regeln von Hooks verstoßen würde. Stattdessen bietet TanStack Query einen Hook namens useQueries, mit dem Sie dynamisch beliebig viele Abfragen parallel ausführen können.

useQueries akzeptiert ein Optionsobjekt mit einem queries Schlüssel, dessen Wert ein Array von Abfrageobjekten ist. Es gibt ein Array von Abfrageergebnissen zurück

function App({ users }) {
  const userQueries = useQueries(() => {
    queries: users.map((user) => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id),
      }
    }),
  })
}

function App({ users }) {
  const userQueries = useQueries(() => {
    queries: users.map((user) => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id),
      }
    }),
  })
}