Parallel queries và useQueries trong React Query là gì?

Parallel queries là kỹ thuật fetch nhiều API endpoints cùng lúc thay vì tuần tự (waterfall).

Cách 1: gọi nhiều useQuery hooks trong cùng component — React Query tự động chạy chúng parallel.
Cách 2: useQueries hook nhận mảng query configs, hữu ích khi số lượng queries dynamic (ví dụ fetch details cho danh sách product IDs).
Kết quả trả về mảng objects, mỗi object giống useQuery result.

Ví dụ: dashboard cần user info + notifications + stats → 3 useQuery hooks chạy song song, tổng thời gian = query chậm nhất (thay vì cộng dồn).

Multiple useQuery calls in the same component run in parallel automatically — React Query fires all queries simultaneously without waiting for each to complete.

For a static number of parallel queries: simply call multiple useQuery hooks; they run concurrently.
For a dynamic number of parallel queries (array of unknown length): use useQueries — accepts an array of query options and returns an array of query results.
Example: const results = useQueries({ queries: ids.map(id => ({ queryKey: ['user', id], queryFn: () => fetchUser(id) })) }). useQueries is more flexible than a .map() with useQuery because React hooks cannot be called inside loops.
For dependent parallel queries (some queries depend on others): use the enabled option to control when a query starts — enabled: !!userId fires only after userId is available.

Xem toàn bộ State Management cùng filter theo level & chủ đề con.

Mở danh sách State Management

Parallel queries là kỹ thuật fetch nhiều API endpoints cùng lúc thay vì tuần tự (waterfall).

Cách 1: gọi nhiều useQuery hooks trong cùng component — React Query tự động chạy chúng parallel.
Cách 2: useQueries hook nhận mảng query configs, hữu ích khi số lượng queries dynamic (ví dụ fetch details cho danh sách product IDs).
Kết quả trả về mảng objects, mỗi object giống useQuery result.

Ví dụ: dashboard cần user info + notifications + stats → 3 useQuery hooks chạy song song, tổng thời gian = query chậm nhất (thay vì cộng dồn).

Multiple useQuery calls in the same component run in parallel automatically — React Query fires all queries simultaneously without waiting for each to complete.

For a static number of parallel queries: simply call multiple useQuery hooks; they run concurrently.
For a dynamic number of parallel queries (array of unknown length): use useQueries — accepts an array of query options and returns an array of query results.
Example: const results = useQueries({ queries: ids.map(id => ({ queryKey: ['user', id], queryFn: () => fetchUser(id) })) }). useQueries is more flexible than a .map() with useQuery because React hooks cannot be called inside loops.
For dependent parallel queries (some queries depend on others): use the enabled option to control when a query starts — enabled: !!userId fires only after userId is available.