Amplify Connect con múltiples suscripciones en Vuejs 2

Vamos a aprender como utilizar el componente Amplify Connect con múltiples suscripciones en Vuejs 2.

El componente Amplify Connect nos permite obtener o modificar datos de nuestras bases de datos DynamoDB a través de AppSync haciendo uso de las propiedades query y mutation.

En esta entrada vamos a ver cómo trabajar con consultas (query), pero lo importante será ver cómo podemos suscribirnos a múltiples eventos cuando ocurran cosas con nuestros datos, por ejemplo al actualizar o eliminar datos que afecten a lo que estamos mostrando al usuario.

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.

Para ponerte en contexto, esto es lo que nos ofrece el componente amplify-connect:


En este caso nuestro componente ejecutará la query listTodosQuery al inicializarse, la cual lanzará una consulta GraphQL para mostrar los datos necesarios. Además, estará a la escucha de las suscripciones que le hayamos pasado a través de subscription, y por si fuera poco, a través de onSubscriptionMsg, nos retornará datos en el momento en el que alguna suscripción haya sido ejecutada, por ejemplo al borrar un todo. A continuación adjunto un ejemplo completo para poder estar a la escucha de múltiples eventos con el componente amplify-connect.


La idea es simple, haciendo uso de computed definimos la query para listar los todos y las suscripciones a las que necesitamos estar pendientes, en este caso nos conectamos a los eventos onUpdateTodo y onDeleteTodo.

Para entender cómo funcionan las suscripciones y qué nos ofrecen simplemente debes probar este código y revisar el método onUpdateOrDeleteTodo, ahí está todo el código que normalmente necesitarás para mostrar la información actualizada a tus usuarios.

Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register