QueryClientProvider là gì? Tại sao cần wrap app bằng nó?

QueryClientProvider là React Context Provider mang instance QueryClient xuống toàn bộ cây component. QueryClient chính là bộ não giữ cache, trạng thái query và config — mọi useQuery/useMutation bên dưới đều cần truy cập nó.

tsx

// tạo BÊN NGOÀI component để không dựng lại mỗi lần render
const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 60_000, retry: 2 } },
})

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Routes />
    </QueryClientProvider>
  )
}

Trong Next.js App Router: đặt provider ở root layout nhưng phải bọc trong một Client Component ('use client'), và tạo QueryClient bằng useState/useRef để mỗi phiên người dùng có instance riêng.

Lưu ý: khai báo QueryClient ở cấp module trong môi trường server là sai — instance đó bị dùng chung giữa các request, dẫn tới rò rỉ data giữa các user.

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

Mở danh sách State Management

tsx

// tạo BÊN NGOÀI component để không dựng lại mỗi lần render
const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 60_000, retry: 2 } },
})

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Routes />
    </QueryClientProvider>
  )
}

Lưu ý: khai báo QueryClient ở cấp module trong môi trường server là sai — instance đó bị dùng chung giữa các request, dẫn tới rò rỉ data giữa các user.