Lección 9 de 12 · Lectura y práctica
Apollo Client en React: queries y estados
Respuesta rapida: Apollo Client conecta React con una API GraphQL y administra resultados, loading, errores y cache. Para un frontend profesional, la experiencia de usuario importa tanto como la query correcta. Que vas a aprender.
Del concepto a la práctica
Taller de esta lección
Una query en React no termina cuando llegan datos. La pantalla debe comunicar qué ocurre durante la carga, cuando no hay resultados y cuando el servidor falla, sin confundir esos estados.
Ejemplo resuelto
Para courses(search: "sql"), una vista muestra “Cargando” inicialmente. Si la respuesta es [], muestra “No hay cursos”. Si falla la red, muestra “No se pudo cargar” y un botón de reintento. Con dos cursos, renderiza sus títulos y no el JSON completo.
Un componente con Apollo Client 4 importaría gql desde @apollo/client y useQuery desde @apollo/client/react, bajo un ApolloProvider configurado:
import { gql } from '@apollo/client';
import { useQuery } from '@apollo/client/react';
const LIST = gql`query ListCourses($search: String!) { courses(search: $search) { id title } }`;
export function Lista() {
const { loading, error, data, refetch } = useQuery(LIST, { variables: { search: 'sql' } });
if (loading) return <p role='status'>Cargando</p>;
if (error) return <div><p>No se pudo cargar</p><button onClick={() => refetch()}>Reintentar</button></div>;
const cursos = data?.courses ?? [];
if (!cursos.length) return <p>No hay cursos</p>;
return <ul>{cursos.map((curso: { id: string; title: string }) => <li key={curso.id}>{curso.title}</li>)}</ul>;
}Este caso prioriza el error y no muestra datos parciales. Para una vista que sí los admita, define errorPolicy y el mensaje correspondiente. El refetch conserva las variables actuales salvo que entregues otras.
Pruébalo
Nombra la operación
ListCourses.Define la selección mínima de campos.
Especifica los cuatro estados visibles.
Decide qué conserva un reintento.
Error frecuente: mostrar una lista vacía mientras la petición sigue pendiente. Corrige distinguiendo loading de datos vacíos.
Comprueba tu resultado
Entrega una matriz con carga, éxito vacío, éxito con datos y error. Cada fila debe tener texto o acción concreta; la fila de éxito con datos debe incluir exactamente los campos que la pantalla necesita.
Mapa de prácticaEl navegador envía una solicitud a la API. El servidor valida la operación y consulta los datos; después devuelve una respuesta que el navegador puede mostrar. La base de datos se comunica con el servidor y no directamente con el navegador.
Ver la infografía en tamaño completo ↗Fuentes para profundizar
Que vas a aprender
Apollo Client conecta React con una API GraphQL y administra resultados, loading, errores y cache. Para un frontend profesional, la experiencia de usuario importa tanto como la query correcta.
Paso 1: practica profesional
Una pantalla debe contemplar carga inicial, error, estado vacio, datos parciales y reintento. Muchos proyectos de portfolio fallan porque solo muestran el caso en que todo responde perfecto.
Paso 2: practica profesional
Nombra las operaciones GraphQL con claridad, por ejemplo GetCourseDetail o ListMarketplaceServices. Eso ayuda a debuggear, medir performance y entender logs.
Paso 3: practica profesional
En un marketplace educativo, Apollo Client puede alimentar buscadores, filtros por categoria, perfiles de expertos, detalle de curso y seguimiento de progreso sin multiplicar fetches manuales.
Ejercicio practico para portfolio
Elegi una API de cursos, empleos o productos digitales y documenta como resolverias este problema con GraphQL y Apollo. Inclui el schema, una query, una mutation, manejo de errores y una nota sobre cache o permisos. El objetivo no es memorizar sintaxis: es demostrar criterio tecnico para una entrevista junior, freelance o equipo de producto.
- Entregable: captura del resultado, archivo con codigo y README breve.
- Checklist: nombres claros, datos tipados, errores explicitos y flujo reproducible.
- Conexion laboral: agregalo a tu portfolio y enlazalo desde LinkedIn o desde una propuesta del marketplace.
Cuando termines, continua con rutas de carreras, oportunidades de empleo digital y servicios publicados en el marketplace de Cursalo.
Sigue con GraphQL con Apollo para APIs modernas
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.