Trung BìnhState Management iconState Management

enabled option trong useQuery dùng để làm gì?

enabled: !!dependency là pattern chuẩn cho dependent queries — query không fetch cho đến khi dependency có giá trị; enabled: false + refetch() cho lazy queries triggered by user action. enabled option kiểm soát khi nào query được phép chạy — là boolean hoặc function trả về boolean.

Khi enabled: false, query ở trạng thái 'disabled': không auto-fetch, status là 'pending' với fetchStatus: 'idle' (không phải loading).

Khi enabled chuyển từ false sang true, query tự động fetch ngay.

Use cases:

  1. Dependent queries — chỉ fetch khi dependency sẵn sàng: enabled: !!userId && !!orgId.
  2. Lazy queries — chỉ fetch khi user trigger: const [enabled, setEnabled] = useState(false) → button onClick: setEnabled(true).
  3. Conditional skip — skip query dựa trên route hay feature flag.
  4. Pause queries khi offline: enabled: isOnline

Pattern với TypeScript: khi enabled: !!userId, TypeScript vẫn thấy userId có thể undefined trong queryFn — workaround: queryFn: () => fetchUser(userId!) hoặc queryFn: () => fetchUser(userId as string).

Pitfall: enabled: someExpensiveCheck() gọi mỗi render — wrap trong useMemo nếu check tốn kém. isLoading với disabled query: isLoading = true nếu enabled=false và chưa có data (status=pending) — check fetchStatus === 'idle' để phân biệt disabled vs loading.

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

Mở danh sách State Management