GraphQL — Iniciación

Este curso está dirigido a desarrolladoras y desarrolladores web con experiencia previa en REST que desean incorporar GraphQL a su conjunto de herramientas profesionales. A lo largo de las 8 horas de formación, la persona participante comprenderá qué es GraphQL, cómo se estructura un esquema y cuáles son las operaciones fundamentales del lenguaje —queries, mutations y subscriptions—; practicará esas operaciones sobre un servidor de pruebas real usando GraphiQL y Apollo Sandbox; y dará sus primeros pasos en la integración del cliente Apollo dentro de una aplicación React existente, gestionando estados de carga y error. Al finalizar el curso, la persona será capaz de consumir una API GraphQL desde un componente React, ejecutar mutations con variables dinámicas y diagnosticar los errores más frecuentes que aparecen durante el desarrollo cotidiano.

1. Describir las diferencias estructurales entre una API REST y una API GraphQL, señalando ventajas concretas de GraphQL y al menos una de sus limitaciones en el contexto de aplicaciones web.
2. Identificar los elementos que componen un esquema GraphQL —tipos de objeto, campos, tipos escalares y el tipo Query— a partir de ejemplos reales, etiquetando cada parte correctamente.
3. Ejecutar queries con argumentos y campos anidados, así como mutations con variables de GraphQL, sobre un servidor de práctica, verificando que los resultados JSON obtenidos se corresponden con los datos esperados.
4. Identificar y explicar los tres tipos de error más habituales en GraphQL —error de sintaxis, campo inexistente y tipo incorrecto— a partir de mensajes reales generados durante las prácticas.
5. Aplicar los hooks useQuery y useMutation de Apollo Client para conectar operaciones GraphQL a componentes React existentes, gestionando los estados de carga y error y enviando variables dinámicas desde formularios.
6. Comprender el propósito de las operaciones subscription en GraphQL, diferenciándolas de query y mutation, y reconocer escenarios donde su uso resulta más adecuado que el polling HTTP.

Bloque 1 — GraphQL frente a REST: conceptos y modelo de datos. El curso arranca situando GraphQL en el panorama de las APIs modernas. Se analiza cómo difiere estructuralmente de una API REST clásica, explorando el modelo de grafo tipado que propone y comparando las implicaciones prácticas de cada enfoque en términos de sobreextracción de datos, número de peticiones y contrato entre cliente y servidor. Se examinan también las situaciones en las que REST sigue siendo una elección razonable, con el fin de que la persona participante pueda tomar decisiones fundamentadas en proyectos reales.

Bloque 2 — El esquema: tipos, campos y operaciones base. Este bloque se centra en la anatomía de un esquema GraphQL. Se estudian los tipos de objeto y sus campos, los tipos escalares primitivos, el tipo Query como punto de entrada y la convención de nombrado que rige el lenguaje de definición de esquemas (SDL). La persona participante aprenderá a leer e interpretar un esquema proporcionado y a relacionar cada elemento con la respuesta JSON que producirá en tiempo de ejecución. Además, se introduce el propósito de las operaciones subscription y se las contrasta con query y mutation, identificando casos de uso donde la comunicación en tiempo real resulta preferible al polling.

Bloque 3 — Queries y mutations en la práctica. Con el entorno de práctica activo —GraphiQL o Apollo Sandbox—, la persona participante ejecuta queries progresivamente más complejas: primero campos simples, luego argumentos y, finalmente, campos anidados que atraviesan relaciones del grafo. A continuación se introducen las mutations, poniendo especial énfasis en el uso de variables de GraphQL en lugar de literales embebidos, práctica imprescindible para código seguro y reutilizable. El bloque concluye con un ejercicio de diagnóstico en el que los mensajes de error reales del servidor —errores de sintaxis, campos inexistentes y tipos incorrectos— sirven de punto de partida para comprender el sistema de validación de GraphQL y desarrollar hábitos de depuración eficaces.

Bloque 4 — Integración con React mediante Apollo Client. El último bloque traslada las operaciones aprendidas a una aplicación React existente. Se configura Apollo Client y se explora el hook useQuery para suscribir un componente a una query, renderizando los datos recibidos y manejando correctamente los estados de carga y error. Seguidamente se trabaja con useMutation para ejecutar operaciones de escritura desde un formulario, capturando los valores del usuario como variables dinámicas. Los ejercicios guiados de este bloque consolidan la progresión del curso, conectando la teoría del esquema con la realidad del desarrollo frontend cotidiano.

• Navegador web actualizado (Chrome, Firefox o Edge en versión reciente).
• Node.js 18 o superior con npm instalado.
• Editor de código con soporte para JavaScript/JSX (se recomienda VS Code con la extensión GraphQL: Language Feature Support).
• Acceso al servidor de práctica GraphQL provisto por el curso (URL facilitada en el aula virtual); no se requiere instalación local de servidor.
• Conexión a internet estable para acceder a Apollo Sandbox o GraphiQL en línea.

• Fundamentos de JavaScript moderno (ES2015+): funciones flecha, desestructuración, async/await y módulos.
• Experiencia básica con React: creación de componentes funcionales y uso elemental de hooks (useState, useEffect).
• Comprensión general del modelo petición-respuesta HTTP y del formato JSON.
• Haber consumido al menos una API REST desde el front-end (con fetch o similar).