BatchDelete con GraphQL y Amplify, Resolutores personalizados

Hace tiempo estoy inmerso en el desarrollo de aplicaciones web y móvil utlizando el entorno de Amazon Web Services con DynamoDB, AppSync y GraphQL.

La verdad que este conjunto de herramientas es muy fácil de manejar gracias a Amplify. 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.

Centrándonos en el tema que nos interesa, lo que vamos a ver es cómo podemos hacer borrados en masa en una aplicación con Vuejs 2 haciendo uso de resolutores personalizados de una forma bastante sencilla.

Imagina que tienes una tabla en DynamoDB que se conecta con AppSync y quieres haciendo uso de una mutación con GraphQL hacer un borrado masivo de una serie de registros a través de su ID. Para este propósito Amplify a día de hoy no tiene nada que nos sirva, pero sí tenemos los resolutores personalizados, que son súper potentes y una vez los entendamos serán algo de lo que no nos podremos librar fácilmente.

Para poder empezar a escribir nuestra lógica lo primero que necesitamos es tener un proyecto que esté utilizando Amplify (en el curso de Vuejs 2 con AWS que te mencioné arriba se explica paso a paso) y su API. Una vez lo tengamos, deberemos añadir lo siguiente a nuestro archivo amplify/backend/api/<proyecto>/schema.graphql:

Lo importante es la mutación, nos servirá para que cuando la invoquemos, Amplify se encargue de eliminar todos los Posts con los IDS que le pasemos.


Requests, Responses y los archivos .vtl

Ahora lo que necesitamos hacer es crear los resolutores personalizados, que son 2 archivos que representan el request y la response. Estos archivos son piezas claves para poder escribir este tipo de lógica haciendo uso de Amplify. Los archivos con extensión .vtl son archivos Apache Velocity Engine y nos permiten escribir una especie de JSON para aplicar cierta lógica.

Empecemos por el request, este archivo será el que se ejecute cuando invoquemos a la mutación batchDeletePosts, para ello, crea el archivo amplify/backend/api/<proyecto>/resolvers/Mutation.batchDeletePosts.req.vtl, ábrelo y añade el siguiente código.

Lo que estamos haciendo aquí es muy sencillo, definimos una variable ids que es un Array, iteramos los ids que le hayamos pasado a la mutación accediendo a los argumentos de la misma con ctx(contexto).args(argumentos).ids, definimos una variable llamada $map que es un objeto y dentro de ella añadimos todas las ids de forma correcta.

Un poco más abajo ocurren también cosas importantes, primero le decimos qué tipo de operación estamos realizando, en este caso es una operación BatchDeleteItem ya que es la que nos permite eliminar una cantidad indeterminada de registros, a continuación debemos definir la propiedad tables diciéndole el nombre de la tabla pasando los ids.

Súper importante, ¡el valor de la propiedad tables debe ser el nombre de la tabla que tenga en DynamoDB, no en AppSync!

Ahora que ya tenemos el request, vamos a crear el archivo para la response en amplify/backend/api/<proyecto>/resolvers/Mutation.batchDeletePosts.res.vtl, ábrelo y añade el siguiente código.

Con eso tenemos más que suficiente, en este caso lo que retornamos es simplemente la respuesta que nos ha reportado la mutación.

Definiendo el recurso personalizado (CustomResources)

Ahora que ya tenemos el request y la response, debemos decirle a Amplify y a la pila de CloudFormation que queremos poder ejecutar nuestra lógica de alguna forma, para este propósito tenemos el archivo amplify/backend/api/<proyecto>/stacks/CustomResources.json y más concretamente la clave Resources, ahí es donde debemos añadir el siguiente trozo de código que estoy seguro entenderás al momento.

Cualquier resolver debe tener un RequestMappingTemplateS3Location y un ResponseMappingTemplateS3Location, que son el request y la response, además, también debemos definir el tipo de operación, podría ser Query, aunque en este caso, ya que lo que deseamos es alterar los datos y no leerlos, la operación es de tipo Mutation, finalmente con la propiedad FieldName le decimos la mutación que será ejecutada, y así todo queda ligado 🙂

Recuerda ejecutar el comando amplify push para subir todos los cambios que hemos hecho a la pila de Cloudfront.

Ejecutar borrados masivos con Amplify y resolutores personalizados

Ya lo tenemos todo listo y es momento de ver recompensado nuestro trabajo, para ello vamos a escribir el siguiente trozo de código, puedes hacerlo en un componente de Vuejs, mixin o desde donde puedas ejecutar la siguiente función:

Y eso es todo, espero que te haya resultado útil y que te ayude a avanzar en el mundo de Amplify y GraphQL.

Cursosdesarrolloweb ©. Todos los derechos reservados.

Login