Cách cấu hình React Query với QueryClient và QueryClientProvider?

QueryClient là singleton quản lý toàn bộ cache và config.

Tạo BÊN NGOÀI component để không bị dựng lại sau mỗi render. defaultOptions áp cho mọi query/mutation trừ khi override ở từng query.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      gcTime: 5 * 60_000,
      retry: (count, error) => error.status !== 404 && count < 3,
      retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30_000),
      refetchOnWindowFocus: false,
    },
  },
  // v5 bỏ onError toàn cục — bắt lỗi qua QueryCache listener
  queryCache: new QueryCache({
    onError: (error) => toast.error(error.message),
  }),
})

• Mặc định retry 3 lần với exponential backoff; ví dụ trên bỏ retry cho lỗi 404.
• staleTime chọn theo loại data: data tĩnh (tiền tệ, quốc gia) → Infinity, data người dùng → 5 phút, data real-time → 0.

Trong Next.js App Router, tạo QueryClient bằng factory makeQueryClient() bọc trong cache() của React để mỗi request có instance riêng, tránh rò rỉ data giữa các user.