Implements data fetching following a three-layer pattern (api → repository → hook) with TanStack Query. Use this skill when writing any data fetching code, creating API calls, defining query hooks, or implementing mutations with optimistic updates.
→ THEN activate api-fetching skill
| User Context | Load Rule |
|---|---|
| Query keys | rules/query-keys.ts |
| Optimistic updates | rules/optimistic.ts |
| Cache invalidation | rules/invalidation.ts |
| Error handling | rules/errors.ts |
| Next.js SSR | rules/nextjs.ts |
| Type sharing | rules/shared-types.ts |
User Request
│
├─► New API endpoint? → three-layer.ts → api → repository → hook
│
├─► Query keys? → LOAD: query-keys.ts → QUERY_KEYS constants
│
├─► Mutation with update? → LOAD: optimistic.ts → onMutate/onError
│
├─► After mutation? → LOAD: invalidation.ts → invalidateQueries
│
├─► Error handling? → LOAD: errors.ts → three-level handling
│
└─► Next.js SSR? → LOAD: nextjs.ts → HydrationBoundary
| Pattern | Location |
|---|---|
| Three-layer | rules/three-layer.ts |
| Query keys | rules/query-keys.ts |
| Optimistic | rules/optimistic.ts |
| Invalidation | rules/invalidation.ts |
| Next.js SSR | rules/nextjs.ts |
npx api:add [entity] → Generate api + repository + hooks
npx api:mutation [type] → Add CRUD mutation