React Query DevTools là gì? Cách sử dụng?

React Query DevTools (@tanstack/react-query-devtools) là panel nổi hiển thị tình trạng cache theo thời gian thực.

Xem được gì:
- Danh sách mọi query kèm trạng thái (fresh / stale / inactive / fetching).
- Data đã cache dưới dạng cây JSON.
- Thời điểm fetch và thời gian fetch của từng query.
- Số subscriber đang giữ query đó.

Làm được gì: trigger tay refetch, invalidate, remove hay reset cho từng query.

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

DevTools tự bị loại khỏi production build (tree-shaken theo NODE_ENV).

Đây là thứ giúp ích nhất khi debug cache: vì sao data bị stale, query nào đang fetch, lần này cache hit hay miss — nhìn sâu vào cache layer, thứ Redux DevTools không làm được.