Dependent queries trong React Query là gì?

Dependent query (hay serial query) là query chỉ chạy được khi đã có kết quả của query khác.

Điều khiển bằng option enabled:

const { data: user } = useQuery({ queryKey: ['user'], queryFn: fetchUser })

const { data: posts } = useQuery({
  queryKey: ['posts', user?.id],
  queryFn: () => fetchPosts(user!.id),
  enabled: !!user?.id,
})

Khi user.id chưa có, enabled là false nên query posts đứng yên; đến lúc có giá trị thì enabled thành true và React Query tự fetch.

React Query xử lý loading state đúng cho cả chuỗi: component vẫn thấy isLoading cho tới khi query cuối cùng xong.

Lưu ý: đừng lạm dụng dependent query vì mỗi mắt xích là một vòng chờ nối tiếp (waterfall). Query nào độc lập được thì để chạy song song sẽ nhanh hơn nhiều.