Parallele Queries
"Parallele" Abfragen sind Abfragen, die parallel, d.h. gleichzeitig ausgeführt werden, um die Abrufkongruenz zu maximieren.
Manuelle parallele Abfragen
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!
<script setup lang="ts">
// 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,
})
</script>
<script setup lang="ts">
// 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,
})
</script>
Dynamische parallele Abfragen mit useQueries
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
const users = computed(...)
const queries = computed(() => users.value.map(user => {
return {
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
}
})
);
const userQueries = useQueries({queries: queries})
const users = computed(...)
const queries = computed(() => users.value.map(user => {
return {
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
}
})
);
const userQueries = useQueries({queries: queries})
