Generate React Query Hook

Create a custom hook using TanStack Query for data fetching.

Important: Follow the Learning Mode guidelines in _templates/learning-mode.md

Arguments

• $ARGUMENTS - Hook name or API endpoint (e.g., "useTasks", "GET /projects/:id")

Pre-flight (BAT BUOC)

Truoc khi tao hook, DOC:

1. apps/web/src/services/api.ts — confirm Axios instance config
2. Backend controller tuong ung — confirm endpoint URL + response type
3. .context/research/PITFALLS.md > React section — TanStack Query cache stale
4. .context/research/CONVENTIONS.md > API Response Format

Instructions

Step 1: Clarify (Query vs Mutation, parameters)

Step 2: Read backend code (KHONG SKIP) — confirm endpoint URL + data shape

Step 3: Create the hook

Query (GET):

typescript
1import { useQuery } from '@tanstack/react-query';
2import { api } from '@/services/api';
3
4export const use[Name] = (id: string) => {
5  return useQuery({
6    queryKey: ['[name]', id],
7    queryFn: async () => {
8      const { data } = await api.get<[Type]>(`/[endpoint]/${id}`);
9      return data;
10    },
11    enabled: !!id,
12  });
13};

Mutation (POST/PATCH/DELETE):

typescript
1import { useMutation, useQueryClient } from '@tanstack/react-query';
2import { api } from '@/services/api';
3
4export const use[Name] = () => {
5  const queryClient = useQueryClient();
6  return useMutation({
7    mutationFn: async (input: [Type]) => {
8      const { data } = await api.post('/[endpoint]', input);
9      return data;
10    },
11    onSuccess: () => {
12      queryClient.invalidateQueries({ queryKey: ['[related]'] });
13    },
14  });
15};

Code Standards

1. Naming: use[Action][Resource] — useGetTasks, useCreateProject
2. Query Keys: Array ['resource', id, params]
3. API client: LUON dung @/services/api — KHONG tao Axios instance moi
4. Types: Match backend DTOs — KHONG tu bia type
5. Response: Object truc tiep (khong wrapper), list { data, total, page, limit }

Pitfalls

• enabled: !!dependency cho dependent queries
• invalidateQueries() sau mutation — tranh stale cache
• Destructure dung: const { data } = await api.get(...) — data la response body

After Completion

Remind user: "Test hook trong component" + "Update PROGRESS.md!"