# Frontend API Integration

> Consume APIs from the frontend with TanStack Query, fetch, or SWR, including caching, refetching, optimistic updates, and error handling.

- Skill: `leandrobenjaminl/frontend-api-integration` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandrobenjaminl/frontend-api-integration`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandrobenjaminl/frontend-api-integration/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools, Frontend Frameworks
- Tags: Axios, Caching, Error Handling, Fetch, Optimistic Updates, Swr, Tanstack Query
- License: MIT
- Author: LeandroBenjaminL (https://skillmd.com/u/leandrobenjaminl)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/leandrobenjaminl/frontend-api-integration

---


# 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

1. 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?

2. 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

3. ELEGIR → confirmación

4. 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<Datos>)

5. VERIFICAR
   ├── Las llamadas se cachean correctamente (Network tab)
   ├── Los errores se muestran al usuario
   └── El refetch funciona después de una mutación (invalidateQueries)