add-api-endpoint
Centralized API client for the web frontend with React Query integration. Trigger: when fetching or mutating data from the backend API.
SKILL.md.claude/skills/frontend/api/SKILL.md
GitHub<!-- L1:START -->
<!-- L2:END -->
<!-- L3:START -->
add-api-endpoint
One sentence: Centralized API client for the web frontend with React Query integration.
Trigger: when fetching or mutating data from the backend API.
<!-- L1:END --> <!-- L2:START -->Quick Reference
| Task | Pattern |
|---|---|
| Fetch generations | useGenerations() |
| Start generation | useStartGeneration() |
Critical Patterns (Summary)
Error Handling with ApiError
Handle structured API errors using the ApiError class which provides status and code fields for precise error categorization.
import { ApiError } from '@/lib/api';
try {
const data = await fetchApi<User>('/api/user');
} catch (error) {
if (error instanceof ApiError) {
// Handle specific status codes
if (error.status === 401) {
// Redirect to login
}
}
}
useStartGeneration Mutation
Use the useStartGeneration mutation to trigger generation workflows with automatic query invalidation.
import { useStartGeneration } from '@/lib/api';
const { mutate, isLoading } = useStartGeneration();
mutate({ mode: 'docs' });
When to Use
- Fetching generation data or provider lists from the backend
- Starting new generation workflows with proper mutation handling
- Canceling in-progress generation tasks
- Querying analytics and provider information
Commands
docker compose -f docker-compose.dev.yml up -d
python repoforge/cli.py dev
Anti-Patterns
Don't: Ignore ApiError status codes
Accessing error.message without checking error.status or error.code leads to brittle error handling that breaks on different error types.
// BAD - assumes all errors are generic
catch (error) {
console.error(error.message); // Misses status/code context
}
<!-- L3:END -->