Modelos de datos con GraphQL y Amplify

arrow_back Blog

En esta entrada vamos a ver cómo definir modelos de datos en GraphQL con Amplify. La idea es poder definir nuestra base de datos paso a paso con las herramientas que nos ofrece Amplify, en este caso vamos a utilizar las directivas @model, @auth  y @connection.

Si no conoces Amplify y todo lo que ofrece, no te pierdas el  Curso de Vuejs 2 con AWS, Cognito y GraphQL, estoy seguro que te resultará súper útil.

Directiva @model: Almacena objetos en DynamoDB y configura los resolutores para las operaciones de CRUD, es decir, crea la tabla/colección en AWS con todo lo necesario para poder realizar las operaciones más típicas, leer, crear, actualizar y eliminar.

Directiva @auth: Nos permite definir diferentes estrategias para la API, en mi caso siempre la utilizo en conjunto con Cognito para definir el acceso a datos.

Directiva @connection: Nos permite definir relaciones entre los tipos que utilizan la directiva @model, por ejemplo una relación de entre un Post y Comentarios.

Sabiendo para qué nos sirven las anteriores directivas de Amplify vamos a ver cómo podemos utilizarlas en un proyecto para definir una estructura sencilla para un Blog.

Definir el modelo de datos para un Blog

Lo primero que debemos hacer es abrir nuestro archivo amplify/backend/api/<proyecto>/schema.graphql y añadir el siguiente código, el cual define la lógica necesaria para un Blog que tiene Posts y Comentarios:

El anterior código lo que va a generar en las bases de datos de DynamoDB son 2 tablas, Post y Comment, que tendrán una relación llamada PostComments a la que se podrá acceder más adelante de una forma tremendamente sencilla gracias a GraphQL!

Puedes ver que además de utilizar las directivas que hemos comentado, también estamos utilizando un enum(Enumerable) llamado PostStatus, esta es la forma más sencilla de poder manejar campos con varias opciones en la API de Amplify con AWS.

Para que las tablas se generen lo que debes hacer ahora es ejecutar el comando amplify push para subir la API a AWS.

Acceder a los datos de la API con Vuejs 2

Ahora que ya tenemos las queries, mutaciones y suscripciones en el directorio src/graphql (es el que viene por defecto al trabajar con Vuejs 2), podemos intentar acceder a los datos, en este caso y para cerrar esta entrada vamos a obtener todos los posts y sus comentarios:

La constante queryListPosts define la consulta (query) para obtener todos los posts y sus comentarios. Gracias a GraphQL podemos seleccionar al vuelo qué campos queremos obtener sin tener que estar definiendo API's y sus EndPoints.

Para obtener los datos simplemente debemos utilizar await API.graphql(graphqlOperation(<query>)) pasándole la consulta, opcionalmente podemos pasarle los filtros que deseamos aplicar, por ejemplo podríamos querer obtener sólo los Posts que no estén eliminados (Deleted: false).

Cómo puedes ver el trabajo definir modelos de datos en GraphQL con Amplify es bien sencillo, más adelante estaremos cubriendo temas más interesantes como las suscripciones, suscripciones múltiples, mutaciones y muchos más temas 100% necesarios.

Cursosdesarrolloweb Cursosdesarrolloweb

Cursosdesarrolloweb es una plataforma educativa con cursos y tutoriales en texto y vídeo.

Términos y condiciones Política de privacidad Formulario de contacto

Copyright 2024 © Todos los derechos reservados.

Contacto