Integración con backend: conectando con el mundo real

📋 Tabla de contenidos

• 🎯 Objetivo del sprint
• 📍 Posición en el viaje
• 🧭 Objetivos de aprendizaje
• 🏗️ Qué construiremos este sprint
  • Arquitectura de capa API
• 🔧 Opciones de integración
  • Opción A: Laravel REST API
  • Opción B: Hygraph GraphQL
  • Opción C: JSON local / Mock API
• 🎓 Metodología: práctica atelier
  • Ritmo del sprint
  • Protocolo de desarrollo asistido por IA
• 📝 Entregables del sprint
• 🔗 Navegación de la lección
• 📚 Vista previa: conceptos clave

“Un frontend sin backend es una pintura sin galería: hermosa, pero invisible.”

🎯 Objetivo del sprint

Al finalizar este sprint: tu app habla con fuentes de datos reales—obtiene, cachea y muta datos desde APIs de Laravel, Hygraph CMS u otros backends con patrones de nivel profesional.

📍 Posición en el viaje

🧭 Objetivos de aprendizaje

Al final de esta lección:

• Harás fetch de datos con Fetch API y async/await
• Gestionarás estados loading, error y empty de forma elegante
• Implementarás React Query para caché y sincronización
• Harás mutaciones (POST, PUT, DELETE) y optimistic updates
• Integrarás endpoints REST de Laravel
• (Opcional) Consultarás Hygraph GraphQL

🏗️ Qué construiremos este sprint

Arquitectura de capa API

// Separación limpia de responsabilidades:

src/
├── api/
│   ├── client.js         // Wrapper de Axios o fetch
│   ├── endpoints.js      // Constantes de URL
├── hooks/
│   ├── useProducts.js    // React Query para productos
│   ├── useUser.js       // React Query para usuario
│   └── useMutations.js  // Create, update, delete
└── components/
    └── ProductList.jsx  // Usa useProducts

🔧 Opciones de integración

Elige una o más según tu proyecto:

Opción A: Laravel REST API

// Endpoints típicos en Laravel
const API = {
  products: '/api/products',
  product: (id) => `/api/products/${id}`,
  auth: '/api/auth/login',
  user: '/api/user',
};

// Uso con React Query
const { data: products } = useQuery({
  queryKey: ['products'],
  queryFn: () => fetch(API.products).then(r => r.json())
});

Opción B: Hygraph GraphQL

// Query GraphQL
const PRODUCTS_QUERY = `
  query Products {
    products {
      id
      name
      price
      image { url }
    }
  }
`;

// Fetch desde Hygraph
const { data } = useQuery({
  queryKey: ['products'],
  queryFn: () => hygraphClient.request(PRODUCTS_QUERY)
});

Opción C: JSON local / Mock API

// Para desarrollo sin backend
const { data } = useQuery({
  queryKey: ['products'],
  queryFn: () => import('./data/products.json')
});

🎓 Metodología: práctica atelier

Ritmo del sprint

┌─────────────────────────────────────────────────────────┐
│ DÍA 1: Fundamentos de fetching                           │
│   • Configurar cliente API (Axios o wrapper fetch)       │
│   • Patrón básico useQuery con React Query               │
│   • Estados loading/error en UI                          │
├─────────────────────────────────────────────────────────┤
│ DÍA 2: Mutations y datos reales                          │
│   • Conectar con Laravel (coordinar con backend)         │
│   • useMutation para create/update/delete                │
│   • Optimistic updates para UX ágil                      │
├─────────────────────────────────────────────────────────┤
│ DÍA 3: Caché y edge cases                                │
│   • Configurar cacheTime y stale-while-revalidate        │
│   • Gestionar offline (opcional)                         │
│   • Error boundaries para requests fallidos              │
└─────────────────────────────────────────────────────────┘

Protocolo de desarrollo asistido por IA

📝 Entregables del sprint

• Cliente API con base URL y headers de auth
• 3+ hooks de fetching con React Query
• Loading states (skeletons o spinners)
• Manejo de errores con mensajes orientados a usuario
• 1 mutation (create/update/delete)
• Invalidación de caché tras mutaciones
• Reflexión: ¿cómo cambia tu app trabajar con datos async?

🔗 Navegación de la lección

📚 Vista previa: conceptos clave

Contenido completo pendiente. Temas incluidos:

1. Repaso Async/Await y Promises
2. Fetch API vs Axios
3. React Query: patrones esenciales
4. Estrategias de caché
5. Mutations y optimistic updates
6. Error boundaries para async
7. GraphQL con Apollo o urql (opcional)
8. Type safety con respuestas API

“Los datos reales son desordenados. Tu trabajo es hacer que se sientan limpios.”