| name | react-query-query-pattern |
| description | null |
Query Pattern
Category: react-query · Status: 🟢 Active
When to use
Khi fetch data server-state bằng TanStack Query (useQuery).
Steps
- Đặt queryKey dạng mảng ổn định, gồm cả tham số (
['user', id]).
- Tách queryFn ra service layer, không gọi fetch inline.
- Cấu hình staleTime/enabled hợp lý;
enabled: !!id khi phụ thuộc.
- Xử lý isLoading/isError/data rõ ràng ở UI.
- Đặt logic vào custom hook
useXxxQuery để reuse.
Template
export function useUser(id: string) {
return useQuery({
queryKey: ['user', id],
queryFn: () => userApi.getById(id),
enabled: !!id,
staleTime: 60_000,
});
}
Example
Good: queryKey gồm id, queryFn ở service, enabled guard.
Avoid: queryKey string trùng nhau, fetch trong component, bỏ qua error.
Checklist