LeandroBenjaminL Skill: frontend-api-integration
APIs en el frontend. Que los datos lleguen sin romper la UI.
Trigger
- Un componente necesita traer datos de una API
- Las llamadas se repiten sin cachear
- Querés hacer optimistic update (cambiar la UI antes de la respuesta)
- Hay que manejar loading, error y retry
Workflow LEND
ANALIZAR ├── Stack: ¿TanStack Query ya está en el proyecto? ├── Tipo: ¿GETs, POSTs, suscripciones? ¿REST o GraphQL? ├── Caché: ¿los datos cambian seguido? ¿pueden ser stale? └── Errores: ¿cómo se muestran? ¿toast, inline, página de error?
OFRECER (Menú del Senior) ├── A) TanStack Query — caché, refetch, paginación, mutations ├── B) fetch nativo — sin dependencias, para apps chicas └── C) SWR — liviano, stale-while-revalidate, si no necesitás mutations complejas
ELEGIR → confirmación
HACER ├── TanStack Query: useQuery + useMutation con queryClient central ├── Caché: staleTime configurado (no dejar defaults de 0) ├── Errores: onError global + retry con backoff ├── Optimistic updates: onMutate actualiza caché, onError rollback ├── Loading: useQuery isLoading vs isFetching (la primera carga vs refetch) └── Tipado: respuesta tipada con genéricos (useQuery)
VERIFICAR ├── Las llamadas se cachean correctamente (Network tab) ├── Los errores se muestran al usuario └── El refetch funciona después de una mutación (invalidateQueries)