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

React Query cung cấp signal (AbortSignal) qua queryFn context — pass signal vào fetch để enable cancellation: queryFn: ({ signal }) => fetch(/api/users/${id}, { signal }).

Khi component unmount hoặc queryKey thay đổi, React Query tự động abort signal → browser hủy pending request.

Với axios: queryFn: ({ signal }) => axios.get(/api/users/${id}, { signal }) — axios v0.22+ support AbortSignal trực tiếp.

Custom fetch wrapper: async function fetchWithCancel(url, { signal }) { const res = await fetch(url, { signal }); if (!res.ok) throw new Error(res.statusText); return res.json() }.

Cancellation xảy ra khi:

1. component unmount trước khi fetch xong (user navigate đi),
2. queryKey thay đổi nhanh (search input) — request cũ bị cancel khi key mới,
3. queryClient.cancelQueries() được gọi manual (thường trong optimistic update onMutate)

Pitfall: nếu queryFn không dùng signal, query vẫn complete dù component unmount — data được cache nhưng component đã gone, React Query tự discard result.

Không dùng signal gây lãng phí bandwidth nhưng không gây bug.