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

Tạo QueryClient BÊN NGOÀI component; dùng cache() factory trong Next.js App Router để mỗi request server có instance riêng — tránh data leak giữa users.

• QueryClient là singleton quản lý toàn bộ cache và config.
• Tạo BÊN NGOÀI component để tránh re-create mỗi render. defaultOptions áp dụng cho tất cả queries/mutations trừ khi override per-query: new QueryClient({ defaultOptions: { queries: { staleTime: 60_000, gcTime: 5 60_000, retry: 2, retryDelay: (attempt) => Math.min(1000 2 ** attempt, 30_000), refetchOnWindowFocus: false } } }).
• Retry strategy: mặc định retry 3 lần với exponential backoff, có thể set retry: (count, error) => error.status !== 404 && count < 3 để không retry 404.
• Error handling defaults: từ v5 không còn onError global — dùng QueryCache listener: new QueryClient({ queryCache: new QueryCache({ onError: (error) => toast.error(error.message) }) }). staleTime strategy theo loại data: static data (currencies, countries) → Infinity, user data → 5 phút, real-time data → 0.
• Trong Next.js App Router, tạo QueryClient trong server component và dùng makeQueryClient() factory pattern để mỗi request có instance riêng tránh data leaking giữa users.