Cách cancel queries trong React Query khi component unmount?

queryFn nhận signal (AbortSignal) trong context — truyền signal xuống fetch là bật được huỷ request.

useQuery({
  queryKey: ['user', id],
  queryFn: ({ signal }) => fetch(`/api/users/${id}`, { signal }),
})

// axios từ v0.22 nhận AbortSignal trực tiếp
useQuery({
  queryKey: ['user', id],
  queryFn: ({ signal }) => axios.get(`/api/users/${id}`, { signal }),
})

Khi component unmount hoặc queryKey đổi, React Query abort signal và trình duyệt huỷ request đang chờ. Huỷ xảy ra trong ba tình huống:

• Component unmount trước lúc fetch xong (user chuyển trang).
• queryKey đổi liên tục (ô tìm kiếm) — request cũ bị huỷ khi có key mới.
• Gọi tay queryClient.cancelQueries(), thường nằm trong onMutate của optimistic update.

Lưu ý: không dùng signal thì query vẫn chạy đến hết dù component đã unmount — React Query tự bỏ kết quả, nên đây là lãng phí băng thông chứ không phải bug.