Saltar al contenido

Lección 16 de 20 · Lectura y práctica

Diseñar el Esquema y la Arquitectura del Proyecto

Concepto claveDiseñar el esquema y la arquitectura de un proyecto GraphQL es como crear los planos de un edificio antes de construirlo. En el contexto de una red social, el esquema GraphQL define qué datos pueden consultarse.

Del concepto a la práctica

Taller de esta lección

Antes de escribir resolvers, convierte una función social en límites de dominio. Para una publicación, separa el dato persistido, la entrada de creación y la vista que puede consultar el cliente. Así evitas que una decisión interna, como authorId, obligue a exponer todos los detalles.

Ejemplo resuelto

Post { id, body, author, comments } usa CreatePostInput { body }; el autor se obtiene del contexto. La consulta feed devuelve publicaciones y la mutación createPost no acepta authorId del cliente.

  1. Dibuja entidades y relaciones: User, Post y Comment.

  2. Marca qué campos son públicos y cuáles son claves internas.

  3. Separa módulos de esquema, resolvers, servicios y datos.

  4. Traza cada operación hasta su fuente y regla de acceso.

Error frecuente: diseñar un input con todos los campos del tipo de salida. Corrección: incluye solo valores que el cliente puede decidir.

Pruébalo

Añade visibility: PRIVATE | PUBLIC y decide quién puede consultar una publicación privada.

Comprueba tu resultado

El esquema no permite enviar authorId en CreatePostInput; una publicación privada solo aparece para su autor o para el rol expresamente autorizado.

Un enum y un límite de coste

Define enum Visibility { PRIVATE PUBLIC } y visibility:Visibility! en Post; la entrada puede elegirlo, pero no authorId. Las consultas feed, post y las relaciones anidadas aplican la misma política de visibilidad. Incluye límites de paginación y una política de complejidad/profundidad para no permitir consultas sin límite. No confíes solo en que GraphQL sea tipado: la validación del esquema no prueba autorización ni coste aceptable.

Navegador, API y base de datos conectados por solicitudes, consultas y respuestas en sentidos opuestos.
CursaloMapa de práctica
Del navegador a los datos

El 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

Concepto clave

Diseñar el esquema y la arquitectura de un proyecto GraphQL es como crear los planos de un edificio antes de construirlo. En el contexto de una red social, el esquema GraphQL define qué datos pueden consultarse (como usuarios, publicaciones y comentarios) y cómo se relacionan entre sí, mientras que la arquitectura organiza el código en capas como resolvers, modelos de datos y servicios para mantenerlo escalable y mantenible.

Imagina que estás diseñando una plaza pública: el esquema sería el mapa que muestra dónde están los bancos, las fuentes y los caminos (los tipos de datos y sus conexiones), y la arquitectura sería cómo se organizan los materiales y trabajadores para construir cada elemento de manera eficiente. En GraphQL, esto se traduce en definir tipos, consultas, mutaciones y suscripciones que reflejen las necesidades de tu aplicación, como permitir a los usuarios publicar contenido, seguir a otros o recibir notificaciones en tiempo real.

Cómo funciona en la práctica

Para diseñar el esquema y la arquitectura de una API GraphQL para una red social, sigue estos pasos:

  1. Identifica las entidades principales: En una red social, típicamente son Usuario, Publicación, Comentario y Like. Define cada una como un tipo GraphQL con sus campos, por ejemplo, Usuario con id, nombre, email y una lista de publicaciones.
  2. Define las operaciones: Crea consultas para obtener datos (como obtener un usuario por ID), mutaciones para modificarlos (como crear una publicación) y suscripciones para actualizaciones en tiempo real (como notificar nuevos comentarios).
  3. Organiza la arquitectura: Usa una estructura de carpetas como src/schema para los tipos GraphQL, src/resolvers para la lógica de negocio, src/models para los modelos de datos (usando algo como Prisma o TypeORM) y src/services para funciones reutilizables. Esto separa las preocupaciones y facilita las pruebas.
  4. Implementa con Apollo Server y Next.js: Configura Apollo Server en Next.js para servir el esquema, conecta los resolvers a una base de datos (por ejemplo, PostgreSQL) y asegura la tipificación con TypeScript para evitar errores.

Ejemplo de un tipo GraphQL básico:

type Usuario {
  id: ID!
  nombre: String!
  email: String!
  publicaciones: [Publicacion!]!
}

type Publicacion {
  id: ID!
  contenido: String!
  autor: Usuario!
  comentarios: [Comentario!]!
}

Caso de estudio

Supongamos que estamos construyendo una red social llamada "SocialConnect". El esquema GraphQL debe soportar funcionalidades como registro de usuarios, creación de publicaciones, comentarios y notificaciones en tiempo real. Aquí hay un ejemplo concreto:

EntidadCampos claveOperaciones relacionadas
Usuarioid, nombre, email, seguidoresQuery: obtenerUsuario, Mutation: crearUsuario, Subscription: nuevoSeguidor
Publicaciónid, contenido, autorId, fechaQuery: publicacionesRecientes, Mutation: crearPublicacion, Subscription: nuevaPublicacion
Comentarioid, texto, publicacionId, usuarioIdMutation: agregarComentario, Subscription: nuevoComentario

La arquitectura se organiza así: en src/schema, definimos los tipos en archivos como usuario.graphql y publicacion.graphql; en src/resolvers, implementamos la lógica para cada operación; y en src/models, usamos Prisma para interactuar con la base de datos. Para las suscripciones, configuramos PubSub de Apollo Server para emitir eventos cuando ocurren cambios, como un nuevo comentario.

Un buen diseño de esquema anticipa las necesidades futuras, como agregar mensajes privados o reacciones, sin romper las consultas existentes.

Errores comunes

  • Esquema sobrecomplicado: Definir demasiados tipos o campos innecesarios puede hacer la API difícil de usar. Solución: Empieza con lo esencial y expande según los requisitos, validando con prototipos.
  • Acoplamiento fuerte en resolvers: Mezclar lógica de negocio con acceso a datos en los resolvers dificulta las pruebas. Solución: Separa la lógica en servicios independientes que los resolvers llamen.
  • Ignorar la tipificación: No usar TypeScript o tipos GraphQL estrictos lleva a errores en tiempo de ejecución. Solución: Define interfaces TypeScript para los tipos GraphQL y valida los datos en los resolvers.
  • Manejo pobre de suscripciones: No limitar las suscripciones puede saturar el servidor. Solución: Usa filtros en las suscripciones, como suscribirse solo a publicaciones de usuarios seguidos, y monitorea el rendimiento.
  • Falta de documentación: Un esquema sin comentarios o herramientas como GraphQL Playground confunde a los desarrolladores. Solución: Añade descripciones a los tipos y campos en el esquema y proporciona ejemplos de consultas.

Checklist de dominio

  1. He definido todos los tipos GraphQL necesarios para las entidades de la red social (Usuario, Publicacion, Comentario, etc.).
  2. He creado consultas, mutaciones y suscripciones que cubren los casos de uso principales, como obtener perfil de usuario o publicar contenido.
  3. He organizado el código en una arquitectura clara con carpetas separadas para schema, resolvers, models y services.
  4. He implementado resolvers tipados con TypeScript que delegan la lógica de negocio a servicios.
  5. He configurado Apollo Server en Next.js para servir el esquema y manejar suscripciones con PubSub.
  6. He probado el esquema con herramientas como GraphQL Playground para verificar que las consultas devuelven datos correctos.
  7. He documentado el esquema con descripciones y ejemplos para facilitar su uso por otros desarrolladores.

Diseña el esquema GraphQL para una red social básica

En este ejercicio, diseñarás el esquema GraphQL inicial para una red social que incluya usuarios, publicaciones y comentarios. Sigue estos pasos:

  1. Define los tipos GraphQL: Crea un archivo llamado schema.graphql y define los tipos Usuario, Publicacion y Comentario. Asegúrate de incluir campos esenciales como id, nombre para Usuario, contenido para Publicacion y texto para Comentario, y establece las relaciones entre ellos (por ejemplo, una Publicacion tiene un autor de tipo Usuario).
  2. Agrega operaciones: En el mismo archivo, define al menos una consulta (por ejemplo, obtenerUsuarios para listar usuarios), una mutación (por ejemplo, crearPublicacion para añadir una nueva publicación) y una suscripción (por ejemplo, nuevaPublicacion para notificar cuando se cree una publicación). Usa la sintaxis de GraphQL con tipos de entrada si es necesario.
  3. Organiza la arquitectura: Crea una estructura de carpetas en tu proyecto Next.js con src/schema para el archivo schema.graphql, src/resolvers para un archivo de resolvers (puedes dejarlo vacío por ahora), y src/models para futuros modelos de datos. Esto te ayudará a mantener el código ordenado.
  4. Valida el esquema: Usa una herramienta como GraphQL Code Generator o escribe una consulta de ejemplo en GraphQL Playground para asegurarte de que los tipos son correctos y no hay errores de sintaxis.

Entrega un enlace a tu repositorio de GitHub con los archivos creados o pega el contenido de schema.graphql en tu respuesta.

Pistas
  • Recuerda que en GraphQL, los tipos pueden tener campos que referencian a otros tipos, como Publicacion con un campo autor de tipo Usuario.
  • Para las suscripciones, define un tipo Subscription con un campo, por ejemplo, nuevaPublicacion: Publicacion, que se activará cuando ocurra una mutación relacionada.
  • Usa tipos de entrada (input) para las mutaciones si necesitas pasar múltiples parámetros, como CrearPublicacionInput con contenido y autorId.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Sigue con GraphQL Profesional con Next.js y Apollo Server: APIs Tipadas y Suscripciones

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.

01 / ELEGIR UNA RUTA

El próximo paso

Aprende IA mientras construyes algo que sí necesitas.

Empieza por el curso inicial o explora el catálogo para encontrar una práctica alineada con tu trabajo.