AppSync: Creando y desplegando tu API en menos de 10 minutos

Source: Dev.to

Despliegue de tu esquema GraphQL en AWS AppSync

En el artículo anterior diseñamos un esquema completo para nuestra API de red social (tipos Usuario, Publicación y Comentario, queries, mutations y un contrato claro). Ese esquema está solo en un archivo local.
En este artículo lo desplegaremos en AWS AppSync (servicio administrado de GraphQL) y lo pondremos a funcionar en vivo.

Qué tendrás al final

• ✅ Una API GraphQL desplegada en la nube
• ✅ Un endpoint que puedes compartir
• ✅ Documentación generada automáticamente
• ✅ Un playground para probar queries

Tiempo estimado: (sin escribir código de backend)

Requisitos

¿No tienes cuenta AWS?
No te preocupes, crear una es gratis y lleva solo unos minutos. Ana Cunha escribió una guía completa sobre cómo empezar con AWS sin gastar nada (consulta el Free Tier).

---

1️⃣ ¿Cómo se puede ejecutar una API GraphQL?

Self‑hosted (tú gestionas el servidor)

• Apollo Server
• GraphQL Yoga

Ventajas

• Control total sobre todo
• Puedes ejecutarlo donde quieras (AWS, GCP, tu PC, etc.)
• Software open‑source y gratuito

Desventajas

• Tú manejas el servidor, actualizaciones y escalado
• Necesitas conocimientos de DevOps
• Más tiempo de configuración
• Pagas por la infraestructura donde lo despliegues

Managed (el proveedor gestiona la infraestructura)

• AWS AppSync
• Hasura
• StepZen

Ventajas

• No hay servidores que mantener
• Escalado automático
• Features incluidos (real‑time, caching, etc.)

Desventajas

• Menos control
• Dependencia del proveedor
• Modelo de precios variable (consulta la documentación de cada servicio)

¿Por qué elegimos AWS AppSync?

1. Serverless – No te preocupas por servidores.
2. Perfecto para aprender – Te enfocas en GraphQL, no en infraestructura.
3. Real‑time incluido – Lo usaremos en un próximo artículo para subscriptions.

Tip: No existe una opción “mejor” para todos los casos. Tu elección dependerá de tus necesidades de control, experiencia del equipo y preferencias de arquitectura.

---

2️⃣ ¿Qué hace AWS AppSync por ti?

Piénsalo como GraphQL‑as‑a‑Service:

Hoy nos enfocaremos en los pasos 1 y 2 (despliegue del esquema). Los resolvers los dejaremos para el siguiente artículo.

---

3️⃣ Paso a paso: desplegar el esquema en AppSync

1. Abre la consola

2. Inicia sesión con tu cuenta AWS.

   • Asegúrate de estar en la región que prefieras (ej.: us-east-1).

3. Crea una nueva API

   • Haz clic en el botón naranja Create API.

4. Selecciona el tipo de API

   • Elige GraphQL API.

5. Elige el tipo de API

   • En la sección API type selecciona GraphQL APIs.

6. Escoge una plantilla

   • Elige Design from scratch (porque ya tienes tu propio esquema).
   • Haz clic en Next.

7. Configura la API

   Campo	Valor sugerido
   API name	Social-Media-API (o el nombre que prefieras)
   Otros campos	Déjalos con los valores por defecto.

   • Haz clic en Next.

8. Conectar fuentes de datos

   • Selecciona Create GraphQL resources later (usaremos mock data por ahora).
   • Haz clic en Next.

9. Revisa el resumen

   • API type: GraphQL APIs
   • API name: Social‑Media‑API
   • GraphQL resources: Create later
   • Pulsa Create API.

10. ¡Listo!

    • La consola mostrará tu nueva API con un endpoint y un GraphQL Playground listo para usar.

---

4️⃣ Próximos pasos

• Subir tu esquema (schema.graphql) a la sección Schema de la consola.
• Probar queries en el Playground.
• En el artículo 4 añadiremos resolvers (DynamoDB, Lambda, etc.) y pasaremos a datos reales.

Resumen rápido

¡Felicidades! Has desplegado tu primer esquema GraphQL en AWS AppSync. 🎉

Continúa con el siguiente artículo para conectar resolvers y trabajar con datos reales.

🚀 Primer API GraphQL en AppSync – Subiendo el esquema

Estás en el dashboard de tu API. Verás dos secciones principales con información sobre los próximos pasos.

1️⃣ Abrir el editor de esquema

1. En el menú lateral izquierdo, haz clic en “Schema”.
2. Aparecerá un editor de texto grande con algunos comentarios por defecto.
   Este es el lugar donde irá tu esquema.

2️⃣ Copiar tu esquema local

1. Abre el archivo schema.graphql del artículo anterior.
2. Borra los comentarios que aparecen por defecto en el editor de AppSync.
3. Copia todo el contenido del archivo.
4. Pega el contenido en el editor de AppSync.

3️⃣ Guardar

• Haz clic en el botón naranja “Save Schema” (esquina superior derecha).

💡 ¿Qué pasa si ves errores?
AppSync valida tu esquema automáticamente. Si hay algún error de sintaxis, lo mostrará en rojo. Revisa que hayas copiado todo el esquema correctamente.
Si todo está bien, verás el mensaje: “Schema saved successfully.”

---

🎉 Esquema desplegado

¡Excelente! Tu esquema ya está en la nube. AppSync lo validó, lo procesó y ahora está listo para usarse.

4️⃣ Explorar lo que AppSync generó automáticamente

1. En el menú lateral, haz clic en “Settings”.

2. Busca la sección “API URL” o “GraphQL endpoint”. Verás una URL similar a:

   https://xxxxxxxxxx.appsync-api.us-east-1.amazonaws.com/graphql

   Esta es la URL de tu API. Cualquier cliente GraphQL puede usarla para hacer queries y mutations (por ahora solo tú tienes acceso; hablaremos de autenticación más adelante).

3. En el menú lateral, haz clic en “Queries”.

4. En la esquina superior derecha del editor, busca el botón/ícono “Docs” (📖) y ábrelo.

¿Qué ves en la documentación automática?

• Tipos: Usuario, Publicacion, Comentario
• Queries: usuario, publicacion, publicaciones
• Mutations: crearUsuario, crearPublicacion, crearComentario
• Campos de cada tipo con sus tipos de datos

Esto es introspección en acción: GraphQL permite que cualquier cliente “pregunte” sobre el esquema, y herramientas como este playground usan esa información para ofrecer autocompletado.

Ejemplo: inspeccionar el tipo Usuario

• Campos: id, nombre, email, fotoPerfil, publicaciones, creadoEn
• Cada campo muestra su tipo: String!, [Publicacion!]!, etc.

¿Por qué es importante?

• No necesitas documentación separada que se desactualice.
• El esquema ES la documentación.
• Cualquier cambio se refleja inmediatamente.
• Los desarrolladores pueden explorar la API sin preguntarte.

---

📋 Resumen de lo que tienes ahora

---

🔜 Próximos pasos (Parte 4)

1. Entender los resolvers – El puente entre tu esquema y tus datos.
2. Implementar resolvers con TypeScript – Código con type safety.
3. Usar mock data – Ver resultados inmediatos.
4. Probar queries reales – Ver tu API funcionando.
5. Implementar mutations – Crear usuarios, publicaciones y comentarios.

Ejemplo de query que podrás ejecutar pronto:

query {
  publicaciones {
    contenido
    autor {
      nombre
    }
    comentarios {
      contenido
    }
  }
}

---

📚 Recomendaciones

• Explora la documentación – Familiarízate con el panel de Docs.
• Revisa tu esquema – Asegúrate de que tiene todo lo que necesitas.
• Guarda tu API endpoint – Lo necesitarás después.

---

🎉 Logros alcanzados

• Entendiste las opciones para correr GraphQL APIs.
• Conociste AWS AppSync y qué hace por ti.
• Creaste tu primera API en AppSync.
• Desplegaste tu esquema.
• Exploraste la documentación auto‑generada.

Resumen de la serie hasta ahora

---

🎊 ¡Celebra!

Has pasado de un archivo de texto a una API GraphQL desplegada en la nube. Eso no es poca cosa. 🚀

Enlaces útiles

• AWS AppSync Documentation
• GraphQL Introspection