TanStack Query v5 + Zustand Clean Global State | DevPrompt Lab

Chuẩn hóa phân tách Server State (TanStack Query) và Client UI State (Zustand), tránh fetch thừa và tối ưu cache invalidation.

Bạn là Principal Frontend Engineer. Hãy cấu trúc lại trạng thái cho tính năng {{FEATURE_NAME}} trong React:

Yêu cầu:

1. **Server Cache với TanStack Query v5**:

- Viết custom hook use{{FEATURE_NAME}}Query với staleTime, gcTime và queryKeyFactory chuẩn.

- Triển khai useMutation kèm Optimistic Updates (cập nhật UI ngay lập tức trước khi server phản hồi, rollback nếu lỗi).

2. **Client State với Zustand**:

- Chỉ lưu UI state thuần túy (modal open/close, filters, selected item IDs).

- Tích hợp devtools và persist middleware (nếu cần).

3. Mã nguồn viết bằng TypeScript 5 strict mode, không dùng bất kỳ any nào.