Construyendo APIs GraphQL sin servidor en tiempo real en AWS con TypeScript y CDK

Rate this content
Bookmark

CDK (Cloud development kit) permite a los desarrolladores construir infraestructura en la nube utilizando lenguajes de programación populares como Python, TypeScript o JavaScript. CDK es una abstracción de nivel superior en infraestructura como código, lo que permite a los desarrolladores que tradicionalmente no estaban familiarizados con la computación en la nube construir APIs y servicios web escalables utilizando sus habilidades existentes, y hacerlo en solo unas pocas líneas de código.


En esta charla, aprenderás cómo utilizar la versión de TypeScript de CDK para construir una API en tiempo real altamente escalable con GraphQL, Lambda, DynamoDB y AWS AppSync. Al final de la charla, codificaré en vivo una API desde cero en solo un par de minutos y luego probaré consultas, mutaciones y suscripciones.


Al final de la charla, deberías tener una buena comprensión de GraphQL, AppSync y CDK y estar listo para construir una API en tu próximo proyecto utilizando TypeScript y CDK.

25 min
17 Jun, 2021

Video Summary and Transcription

Esta charla proporciona una introducción a JavaScript y React, así como información sobre cómo construir APIs GraphQL sin servidor en tiempo real con TypeScript, AppSync y CDK. Cubre los conceptos de esquema GraphQL, fuentes de datos y resolvers, así como el uso de suscripciones GraphQL para comunicación en tiempo real. La charla también destaca las características de AppSync y CDK para construir APIs e infraestructura. Concluye con una demostración de cómo crear una API con CDK y AppSync, incluida la creación de funciones Lambda y tablas DynamoDB.

Available in English

1. Introducción a JavaScript y React

Short description:

Hemos creado un nuevo sitio web para que explores el mundo de JavaScript. Estamos ofreciendo artículos gratuitos, videos, cursos y tutoriales para ayudarte a aprender todo sobre React.

Hemos creado un nuevo sitio web para que explores el mundo de JavaScript. Estamos ofreciendo artículos gratuitos, videos, cursos y tutoriales para ayudarte a aprender todo sobre React. Haz clic en el enlace de la descripción para obtener más información sobre todos los nuevos cursos de React.js. También hemos creado una nueva lista de reproducción para que la revises. Hemos agregado muchos cursos nuevos y también ofreceremos artículos gratuitos en la web y en dispositivos móviles en el futuro. Haz clic en el enlace de la descripción para obtener más información sobre todos los otros cursos que hemos creado. Haz clic en el enlace de la descripción para obtener más información sobre todos los otros cursos que hemos creado.

2. Building Real-Time Serverless GraphQL APIs

Short description:

Voy a hablar sobre la creación de APIs GraphQL sin servidor en tiempo real con TypeScript, AppSync y CDK. Comenzaremos con una introducción a GraphQL, luego discutiremos AWS AppSync y Manage GraphQL Service, seguido de una breve introducción a CDK. También realizaré una demostración de codificación en vivo para mostrar cómo funcionan todos estos componentes juntos. GraphQL te permite definir un esquema que representa tus tipos de datos y operaciones. Ofrece más control sobre la latencia y transferencia de datos de la API, devolviendo respuestas en JSON. Una API GraphQL consta de tres partes principales, comenzando con el esquema.

De acuerdo, hola a todos y muchas gracias por asistir a mi charla hoy. Estoy muy emocionado de hablar sobre este tema porque es algo que he estado usando mucho últimamente y es realmente poderoso. Voy a hablar sobre la creación de APIs GraphQL sin servidor en tiempo real con TypeScript, AppSync y CDK. Mi nombre es Nader Dabit, soy un Defensor Principal de Desarrolladores y soy desarrollador de front-end y móvil de profesión. Recientemente, he estado trabajando con AWS y servicios de backend durante los últimos años. Últimamente, me he estado enfocando en la creación de aplicaciones full-stack en la nube y sin servidor. Así que vamos a empezar porque tenemos mucho que cubrir.

Voy a hablar sobre algunas cosas y todas están relacionadas entre sí. Primero, comenzaremos con una introducción a GraphQL. Luego, hablaremos sobre AWS AppSync y Manage GraphQL Service. Después, haremos una breve introducción a CDK. Luego, hablaremos sobre cómo todos estos componentes se relacionan entre sí, AppSync, CDK y GraphQL. Después, realizaré una demostración de codificación en vivo. Creo que la demostración de codificación en vivo te mostrará cómo funciona todo esto mejor que cualquier presentación. Pero espero que al poner todo esto junto te sea realmente útil y aprendas algo.

Entonces, hablemos un poco sobre GraphQL. Si buscas en Internet y encuentras la definición de GraphQL, podrías ver algo como esto. Un lenguaje de consulta para tu API. Esto no dice mucho. Vamos a profundizar un poco más. Con GraphQL, tienes tu, casi como un menú de tus datos, que es tu esquema GraphQL. El esquema tiene todos los diferentes tipos de datos, que son básicamente tipos, y todas las operaciones contra esos tipos. Por ejemplo, puedes tener una aplicación de tareas pendientes. Podrías pensar en algo como un tipo de tarea pendiente. Y luego, podrías tener operaciones para crear, leer, actualizar y eliminar tus tareas pendientes. Todo eso se define en tu esquema. Y una vez que hayas implementado tu API, y hablaremos un poco más sobre eso en un momento, simplemente puedes solicitar los datos que deseas. Esto es algo que probablemente hayas escuchado antes, si alguna vez has investigado sobre GraphQL, es que una de las cosas realmente poderosas es que tienes la capacidad de construir APIs con una latencia mucho menor y más controladas que cuando trabajas con puntos finales REST porque tienes mucho más control sobre los datos que se envían de ida y vuelta a través de la red, y luego recibes tus datos de respuesta devueltos en JSON.

Entonces, una API GraphQL está compuesta por tres partes principales. Tienes tu esquema, del que hablaremos en un momento.

3. Understanding GraphQL Schema and Operations

Short description:

Profundizaremos un poco más en un momento. Tienes tus resolvers y luego tienes tus fuentes de datos. Entonces, el esquema es donde residen todas tus declaraciones de datos. Entonces, nuevamente, para una aplicación de tareas pendientes, podrías tener un tipo de tarea pendiente y luego, para operar con ese tipo de tarea pendiente, es posible que necesites definir algunas operaciones.

Profundizaremos un poco más en un momento. Tienes tus resolvers y luego tienes tus fuentes de datos. Entonces, el esquema es donde residen todas tus declaraciones de datos. Entonces, nuevamente, para una aplicación de tareas pendientes, podrías tener un tipo de tarea pendiente. Y luego, para operar con ese tipo de tarea pendiente, es posible que necesites definir algunas operaciones. Aquí, podrías tener una forma de obtener una sola tarea pendiente por ID. Podrías tener una forma de crear una nueva tarea pendiente utilizando una operación de crear tarea pendiente. Y estas se definen en consultas, mutaciones, y también tenemos un nuevo tipo que es único en GraphQL llamado suscripción, y hablaremos de los tres en un momento.

4. Understanding GraphQL Data Sources and Resolvers

Short description:

Una vez que hayas definido tu esquema, tendrás tus fuentes de datos. Las fuentes de datos son de donde provienen los datos para estas operaciones, y recibirás los datos devueltos en uno de los tipos definidos en tu esquema. Las operaciones se manejan en un resolvedor, que asigna la operación de GraphQL a una fuente de datos. Esto es un detalle de implementación para ti como desarrollador, y los marcos o servicios como AppSync pueden tener sus propias opiniones.

Entonces, una vez que hayas definido tu esquema, tendrás tus data sources. Y las data sources son de donde provienen los data para estas operaciones, y luego recibirás los data devueltos en uno de los tipos que has definido en tu esquema. Y la forma en que se manejan esas operaciones generalmente se hace en un resolvedor. Y el resolvedor es básicamente solo una función o algún tipo de código que asigna la operación de GraphQL a una data source. Y esto es un detalle de implementación para ti como desarrollador si estás construyendo tu propia API, esto dependerá de cómo lo escribas. Muchos de los frameworks tienen formas un poco más definidas de hacer esto. Y si estás trabajando con GraphQL como un servicio, como AppSync, también tienen sus propias opiniones.

5. Data Sources and GraphQL Subscriptions

Short description:

Entonces, una fuente de datos puede ser una base de datos, una función fuera del servicio principal o un punto final HTTP para la arquitectura de microservicios. Las consultas, mutaciones y suscripciones de GraphQL se mapean a los verbos HTTP. Puedes solicitar campos específicos en una consulta y tener un mayor control sobre el acceso a los datos con GraphQL como fuente de datos. Las suscripciones de GraphQL permiten la comunicación en tiempo real entre un cliente y una API. Las suscripciones se basan en eventos y generalmente tienen nombres como onCreate, onUpdate o onDelete. La implementación de las suscripciones de GraphQL se puede hacer utilizando servicios como Hasura o AppSync, o tomando decisiones entre servidores y eventos o websockets.

Entonces, una fuente de datos puede ser una database, una función que está fuera del propio servicio principal o un punto final HTTP para incorporar una architecture de microservicios en una API de GraphQL.

Hablemos ahora de la parte de recuperación de datos de GraphQL, que es realmente interesante. Con GraphQL, es posible que estés familiarizado con Rust, por lo que creo que es muy conveniente e interesante comparar los dos, GraphQL versus Rust. Con GraphQL, tienes esta idea de consultas, mutaciones y suscripciones, y se mapean muy bien a cosas que hemos hecho en el mundo de Rust, como mapear a los verbos HTTP con los que trabajamos. Entonces, cuando necesitas leer algunos datos, como obtener o listar una lista de elementos, utilizarás una consulta de GraphQL. Si vas a actualizar, crear o eliminar algo, normalmente utilizarás una mutación, y si necesitas algún tipo de aspecto en tiempo real en tu API, utilizarás suscripciones.

Echemos un vistazo a una tabla de verbos de GraphQL versus Rust. Nuevamente, mapear una solicitud Get tiene mucho sentido con una consulta de GraphQL. Obtener un elemento por ID o obtener una lista de elementos normalmente será una consulta de GraphQL. Y luego, las operaciones de post, put, delete o patch serán mutaciones de GraphQL. Dicho esto, veamos cómo GraphQL devuelve los datos que has solicitado, como mencionamos hace un momento. En una consulta, puedes decir, `Tenemos este tipo de tarea en GraphQL y tiene cuatro campos. Tiene un ID, un nombre y un valor de createdAt o campos`. Y en esta solicitud, queremos obtener los cuatro campos, así que está bien. Pero también puedes decir que solo quieres obtener un subconjunto o una selección más pequeña de estos campos, y esto seguirá funcionando. No tienes que hacer ninguna actualización en tu backend. La forma en que está construido GraphQL, la forma en que se crean estas consultas, solo obtienes los datos que has solicitado. Entonces, si alguna vez has trabajado en la construcción de diferentes tipos de aplicaciones de cliente para un solo backend en el mundo moderno, es posible que tengas una aplicación web, una aplicación móvil, una aplicación de escritorio que también puede tener una aplicación para Apple Watch o incluso una aplicación para automóviles en el futuro, nunca se sabe. Tener GraphQL como fuente de datos te permite tener mucho más control sobre el acceso a tus datos sin tener que cambiar mucho código en tu backend una vez que se completa la implementación.

A continuación, hablemos de las suscripciones de GraphQL, que son el aspecto en tiempo real de GraphQL. Las suscripciones de GraphQL permiten la comunicación en tiempo real entre un cliente y una API. Las suscripciones se basan en eventos. Entonces, cuando creas, actualizas o eliminas un elemento, es posible que puedas suscribirte a ese evento. Normalmente, una suscripción puede tener un nombre como onCreate, onUpdate o onDelete. Por ejemplo, para una aplicación de tareas, podrías tener onCreateTask, onUpdateTask, etc. Las suscripciones suelen ser una conexión bidireccional. Por lo tanto, debes tener una forma de enviar la actualización y luego recibir la actualización de vuelta en el cliente. Muchas veces, te preguntarán cómo implementar las suscripciones de GraphQL. Si estás utilizando un servicio como Hasura o AppSync, o cualquiera de estos servicios de GraphQL, esto se encargará de ti. Pero si estás construyendo tu propia API, normalmente tendrás que tomar la decisión entre servidores y eventos o websockets.

6. GraphQL Subscriptions Overview

Short description:

Las APIs de GraphQL se pueden construir utilizando websockets. Puedes suscribirte a subconjuntos de datos y recibir solo los campos en los que estás interesado. Por ejemplo, si estás interesado en el ID, el nombre y el valor completado de una tarea, puedes crear una suscripción para recibir solo esos datos.

Creo que muchas veces ves que las APIs de GraphQL se construyen utilizando websockets. Entonces, nuevamente, muy similar a una consulta de GraphQL donde solicitas los datos que deseas y solo obtienes esos datos, también puedes suscribirte a subconjuntos de datos. Entonces, aunque nuestro tipo de tarea tiene cuatro campos diferentes, podemos hacer suscripciones y devolver solo un subconjunto de esos campos. Digamos que solo estamos interesados en el ID, el nombre y el valor completado, crearemos una suscripción y solo recibiremos esos datos a los que estamos suscritos. Esa es una breve descripción general de GraphQL.

7. AppSync, CDK, and Infrastructure

Short description:

AppSync es un servicio de GraphQL administrado que proporciona una capa de API consistente para cualquier servicio o fuente de datos de AWS. Ofrece funciones de seguridad empresariales, incluidos tipos de autorización únicos o múltiples. Agregar suscripciones de GraphQL es fácil con AppSync. Puedes usar SDK de AWS para AppSync u otras bibliotecas como Urql o Apollo. CDK es una nueva forma de escribir infraestructura como código y está ganando popularidad entre los usuarios de Amplify. Admite varios proveedores de la nube y se puede utilizar en combinación con Amplify para construir infraestructura.

Hablemos ahora sobre AppSync, y luego hablaremos sobre CDK y después haremos una demostración en vivo. AppSync es un servicio de GraphQL administrado, y está construido utilizando una infraestructura realmente escalable en AWS. AppSync proporciona una capa de API consistente para cualquier servicio de AWS o cualquier fuente de datos, y estas fuentes de datos no tienen que estar en AWS, pueden estar en cualquier lugar siempre y cuando tengan algún tipo de acceso HTTP o algún tipo de acceso a tu centro de datos, que también está disponible.

Tenemos funciones de seguridad empresariales incorporadas. Si necesitas tener tipos de autorización únicos o múltiples para un acceso público y privado o una combinación de ambos, lo tenemos incorporado. Tenemos IAM, tenemos OIDC para utilizar tu propio proveedor de autenticación. Si estás utilizando algo como Auth0 o Octa, puedes usar OIDC. Tenemos Cognito para un servicio de autenticación administrado, y luego tenemos claves de API para acceso público. Y una de las cosas realmente interesantes de AppSync es lo fácil que es agregar una suscripción de GraphQL. Vamos a ver eso en código en un momento. Pero para cualquier mutación, las suscripciones ya están incorporadas en el servicio. Todo lo que necesitas hacer es agregar una línea adicional de código, y puedes suscribirte a cualquier tipo, pero también a cualquier subconjunto de ese tipo. Por ejemplo, puedes pensar en una aplicación de chat donde tienes mensajes. También puedes pasar argumentos, hasta cinco argumentos diferentes, para suscribirte solo a las actualizaciones de una sala de chat, utilizando el ID de la sala de chat.

También construimos y mantenemos nuestros propios SDK para todos estos servicios de AWS, incluido AppSync. Puedes usar algo como Urql o Apollo. Pero tenemos nuestros propios SDK que administran muchas cosas, como los encabezados de autorización. Y tenemos SDK y bibliotecas para web, iOS, Android, React Native y Flutter.

Y ahora hablemos de CDK por un momento. CDK es la abreviatura de Cloud Development Kit. Y CDK es básicamente una nueva forma de escribir infraestructura como código. Y cuando digo nueva, es algo así como un poco más de dos años. Así que no es tan nuevo, pero sigue siendo bastante nuevo. Y puedes hacer esto. Es muy diferente a cualquier infraestructura como código que hayamos visto en el pasado, porque en lugar de usar algún tipo de archivo de configuración como JSON o YAML, estás utilizando TypeScript, JavaScript, Python, o cualquier lenguaje de programación que prefieras. CDK inicialmente solo admitía AWS, pero ahora admite otros proveedores de nube, incluido Azure. Y está ganando mucha popularidad. Muchos usuarios de Amplify que construyen su infraestructura utilizan CDK como proveedor de CloudFormation, o pueden usar una combinación de Amplify y CDK. Y luego utilizan las bibliotecas de cliente de Amplify para conectarse. La inicialización de un nuevo proyecto de CDK se ve así.

8. Building an API with CDK and AppSync

Short description:

Para comenzar con CDK, instala la CLI de CDK e inicializa un nuevo proyecto. Agrega características adicionales desde el boilerplate proporcionado. Crea un nuevo proyecto de CDK e instala los paquetes necesarios. Configura la API y el código, incluyendo el esquema de GraphQL y la autorización base. Agrega fuentes de datos y resolvers, mapeándolos al esquema. Define todo en código. En la demostración en vivo, comenzaremos desde cero en una aplicación de CDK vacía, importando CDK, AppSync, DynamoDB y Lambda.

Solo necesitas instalar la CLI de CDK, y luego inicializar un nuevo proyecto y estarás listo para comenzar. Luego puedes comenzar a agregar características adicionales desde el boilerplate proporcionado. Vamos a partir de un proyecto base y veremos cómo funciona.

Entonces, AppSync con CDK. Lo que normalmente harás es crear tu nuevo proyecto de CDK, tal como te mostramos hace un momento, CDK Init. Instalarás los paquetes NPM que necesites, cualquier paquete CDK usando NPM. Por ejemplo, para AppSync, necesitarás instalar el paquete CDK de AppSync. Y tal vez también necesites instalar otras fuentes de datos como Lambda, DynamoDB para las bases de datos con las que interactúes desde CDK. Luego crearás y configurarás la API y el código. Le darás un nombre a la API. Establecerás tu esquema GraphQL, y luego configurarás la autorización base. En la API que vamos a construir, configuraremos la autorización base como pública. Luego agregarás fuentes de datos y resolvers a esas fuentes de datos. Por ejemplo, podrías decir, `He creado esta API. Necesito tener una base de datos NoSQL. Necesito una base de datos SQL. Y luego necesito tener una forma de mapear mis resolvers para los tipos, los campos y las operaciones de mi esquema a esas fuentes de datos. Y luego definirás todo esto realmente en código. Y hoy trabajaremos con TypeScript.

Creo que lo más interesante, sin embargo, es la demostración en vivo porque vamos a partir desde cero construyendo esto. Así que lo que voy a hacer es entrar en un proyecto que he creado aquí. Esta es una aplicación de CDK realmente vacía. Voy a abrir esto. Y en el directorio lib, tenemos el punto de entrada para la aplicación de CDK. Aquí es donde vamos a escribir nuestro código. Y si vamos a package.JSON, veremos que he instalado tres dependencias. AppSync para CDK, DynamoDB, que es una base de datos NoSQL y AWS Lambda. Usando todas estas cosas, construiremos una API en solo un par de minutos. Así que lo primero que me gustaría hacer es importar mis dependencias. Voy a importar CDK, AppSync, DynamoDB y Lambda.

9. Creating API Reference and GraphQL Schema

Short description:

Vamos a crear la referencia de la API utilizando el constructo de AppSync. El nombre de la API será CDK Notes AppSync API. Configuraremos una configuración de autorización predeterminada utilizando una clave de API y habilitaremos x-ray para un registro adicional. Luego, crearemos el esquema de GraphQL para una aplicación de notas, que incluirá un tipo de nota, una consulta para listar notas, una mutación para crear notas y una suscripción en tiempo real para la creación de notas. La directiva AWS_subscribe agrega funcionalidad en tiempo real a la suscripción.

Y vamos a utilizar eso para crear nuestra API. A continuación, vamos a crear la referencia de la API utilizando el constructo de AppSync. Y le daremos un nombre a la API. El nombre de la API será CDK Notes AppSync API, y lo llamaremos como React Summit o algo así. Daremos una ubicación para el esquema de GraphQL. Esto estará en GraphQL/schema/schema.GraphQL, que crearemos en un momento.

Luego configuraremos una configuración de autorización predeterminada. Y en nuestro caso, solo utilizaremos una clave de API. Así que la configuramos aquí y luego establecemos una fecha de vencimiento, que será dentro de 365 días a partir de ahora. Y si necesitáramos varios tipos de autorización, podríamos haberlo hecho aquí. Pero no lo haremos. Luego, habilitamos x-ray, porque x-ray es básicamente un sistema de registro muy sofisticado que podemos utilizar para un registro adicional con fines de depuración.

Lo siguiente que queremos hacer es crear nuestro esquema de GraphQL. Así que voy a crear una carpeta aquí y un archivo schema.GraphQL. Y aquí vamos a crear nuestro esquema. El esquema que vamos a crear es para una aplicación de notas. Tenemos un tipo de nota. Tenemos una consulta para listar notas. Tenemos una mutación para crear notas. Y luego tenemos la parte en tiempo real, que es la suscripción para la creación de notas. Así que vamos a decir que queremos adjuntar la directiva AWS_subscribe a esto. Y esto es lo que agrega la funcionalidad en tiempo real. Así que si miramos el esquema y eliminamos esto, todo esto es solo GraphQL básico. Esta directiva aquí es específica de AppSync. Pero esto es todo lo que necesitas adjuntar a cualquier suscripción para establecer una matriz de mutaciones para que se active la suscripción. No se necesita código adicional. Así que vamos a decir que queremos pasar una matriz, pero el único elemento que nos interesa es crear una nota. Queremos suscribirnos a ese evento. Y luego se creará la suscripción on create note para nosotros. Así que voy a cerrar eso.

10. Creando Función Lambda y Fuente de Datos

Short description:

Vamos a crear una función Lambda llamada notes Lambda con un tiempo de ejecución de node.js. El código estará ubicado en la carpeta de funciones Lambda, con el punto de entrada como main.handler. Estamos configurando el tamaño de memoria para mejorar el rendimiento. Luego, agregaremos la fuente de datos Lambda a la API utilizando la referencia notes Lambda.

Y lo que queremos hacer ahora es crear una función Lambda. Y la función Lambda será donde se encuentre nuestra lógica de negocio o nuestra lógica para interactuar con la base de datos. Así que vamos a seguir adelante y decir que estamos creando una función Lambda. La estamos referenciando como notes Lambda. Estamos diciendo nueva función Lambda. Y podría minimizar esto aquí para tener una mejor vista del código. Estamos configurando un tiempo de ejecución. El tiempo de ejecución es node.js. Estamos dando una ubicación para nuestro código, que es esta carpeta de funciones Lambda, y luego un punto de entrada, que es main dot handler. Y luego estamos configurando el tamaño de memoria, aumentándolo un poco para que sea más eficiente. Y luego lo que estamos haciendo es tomar esa referencia de API. Así que creamos nuestra API aquí arriba. Y estamos diciendo que queremos agregar una fuente de datos Lambda, y luego estamos pasando esta notes Lambda aquí. Así que creamos la API. Estamos configurando una fuente de datos Lambda. Ahora necesitamos seguir adelante y crear ese código de función Lambda.

11. Creando Resolvedores Lambda

Short description:

Vamos a crear una nueva carpeta llamada Lambda-fns para almacenar nuestro código Lambda. Agregaremos dos resolvedores, uno para la consulta ListNotes y otro para la mutación create node. Estos resolvedores pasarán el evento a la función Lambda cuando se llamen.

Entonces, lo que vamos a hacer es crear una nueva carpeta llamada Lambda-fns, y ahí es donde nuestro código Lambda va a estar en un momento. Pero por ahora, sigamos adelante. Y lo que queremos hacer es agregar nuestros resolvedores. Y necesitamos dos resolvedores porque en nuestro esquema GraphQL, tenemos dos operaciones. Tenemos una consulta y una mutación. La consulta es para ListNotes, así que básicamente estamos diciendo que queremos resolver la consulta ListNotes en esta función. Entonces, cuando se llame esta consulta, simplemente la pasamos a la función Lambda en el evento. Y lo mismo ocurre con la mutación. Cuando se crea un nuevo nodo, cuando se dispara el resolvedor create node, se pasará el evento a la función Lambda.

12. Creando Tabla DynamoDB y Funciones Lambda

Short description:

Creamos una tabla DynamoDB llamada NotesTable para almacenar todos nuestros datos. La configuramos como serverless y establecemos una clave de partición. Concedemos acceso a la tabla desde nuestra función Lambda y establecemos una variable de entorno para hacer referencia al nombre de la tabla. Ahora hemos creado la API, la función y la tabla, y hemos reducido el código a aproximadamente 40 líneas. A continuación, crearemos nuestras funciones Lambda en un archivo notes.ts y definiremos el tipo de nota. Utilizaremos TypeScript y tendremos dos operaciones: crear una nota y listar notas. El objeto evento en la función Lambda contendrá información y argumentos, que utilizaremos en la función.

Y finalmente, lo que necesitamos es algún tipo de database con el que trabajar. Así que vamos a crear una tabla DynamoDB. Y la tabla DynamoDB será donde almacenemos todos nuestros data.

Así que estoy creando una nueva tabla llamada NotesTable utilizando el constructor CDK de DynamoDB. Estamos configurando algunas opciones básicas, estableciéndolo como serverless mediante el uso de pago por solicitud, y establecemos una clave de partición, que básicamente es la clave primaria de ID. Y luego vamos a conceder acceso a la tabla DynamoDB desde nuestra función Lambda, diciendo básicamente, OK, esta función puede interactuar con esta tabla.

Luego llamamos a la función addEnvironment, o establecemos una variable de entorno llamando a NotesLambda.addEnvironment. Y lo que estamos haciendo básicamente es decir, OK, queremos poder acceder a una variable de entorno llamada NotesTable, pero aún no conocemos el valor real de eso. Así que vamos a establecer la variable de entorno allí porque no conocemos el valor del nombre real de la tabla. Pero sabemos que necesitamos acceder a esa tabla. De esta manera, en la función Lambda, podemos hacer referencia a process.env.NotesTable.

Básicamente, creamos la API, creamos una función, mapeamos las operaciones de nuestra API en esa función, y luego creamos una tabla de database y habilitamos el acceso desde nuestra función Lambda a esa tabla. Hicimos todo eso. Y realmente, si lo minimizamos, serían unas 40 líneas de código o algo así.

Ahora que todo eso está creado, ya hemos terminado con nuestro código en nuestro proyecto CDK actual. Ahora lo único que tenemos que hacer es crear nuestras funciones Lambda. Así que voy a tener un archivo notes.ts. Y aquí, vamos a tener nuestro tipo de nota. Esto va a mapear bastante cerca de nuestro tipo GraphQL. Solo lo vamos a usar para nuestros TypeScript aquí. Y lo que queremos hacer ahora es tener un main.js. Ups, esto en realidad debería ser TypeScript, así que voy a cambiarle el nombre a ts. Y en esta función, vamos a tener nuestras dos operaciones que vamos a importar y usar en un momento. Una para crear una nota en DynamoDB, y otra para listar notas. Tenemos un tipo que estamos creando que tiene un par de campos diferentes. Uno es el objeto info que tiene el campo nombre, y el otro es el objeto arguments que tiene la nota. Y básicamente vamos a estar usando estas dos piezas de data, podrías decir, que vienen del evento que llega a la función lambda. Así que cuando se invoque esta función, el evento va a tener un objeto event.info. Y va a tener un objeto event.arguments. Los argumentos son los argumentos pasados a la función o a la operación.

13. Creando Consultas GraphQL y Funciones Lambda

Short description:

createNotes y GetNoteById son consultas GraphQL que activamos para ejecutar diferentes funciones. Tenemos createNote.ts para crear nuevos elementos en DynamoDB y listNotes.ts para escanear la tabla y devolver todos los datos. La función principal en la carpeta de funciones Lambda se llama handler. Después de construir e implementar el stack de CDK, podemos probar la API en la consola de AWS creando una nota con la mutación create note y devolviendo el ID, nombre y valor completado.

Entonces, createNotes tendría un argumento de notas. GetNoteById podría tener un ID de nota. Y luego el nombre del campo es la propia consulta de GraphQL, o la operación de GraphQL en sí. Por lo tanto, el nombre del campo se referenciará aquí abajo como createNote o listNotes. Vamos a cambiar en función de ese nombre de campo. Así que diremos, vale, si es createNote, queremos ejecutar esta función. Si es listNotes, queremos ejecutar esa función.

Entonces, dicho esto, necesitamos seguir adelante y crear esas dos últimas funciones. Así que tenemos createNote.ts y listNotes.ts. Esta es una función de Lambda para interactuar con DynamoDB. Básicamente, creamos un objeto params, sacamos la nota del argumento, y llamamos al documento, dynamodb.document.put, creando así un nuevo elemento. Aunque esto no es realmente en lo que nos estamos centrando, es un código bastante básico para interactuar con DynamoDB desde una función de Lambda. Y luego, la otra operación es listNotes, que es un escaneo de DynamoDB. Básicamente, vamos a decir que los params que necesitamos son: lo único que necesitamos saber es el nombre de la tabla, que se obtiene de la variable process.environment, y llamamos a document.client.scan, pasando estos params, y esto simplemente va a extraer todo de esa tabla y luego nos lo devolverá.

Si vuelvo a mi CDK, puedes ver que tengo este main.handler referenciado aquí en la carpeta de funciones de Lambda. Si vamos a nuestra carpeta de funciones de Lambda, vamos a main, vemos que la función principal aquí se llama handler, así es como se referencia. Y eso es todo lo que tenemos que hacer, así que vamos a probar esto. Voy a ejecutar npm run build. Esto va a compilar todo ese TypeScript a JavaScript, que es lo que el servicio necesita para ejecutarse. Luego llamaremos a CDK deploy, y luego CDK deploy va a mirar nuestro stack de CDK, y va a decir, oh, necesitamos implementar todo esto. Estamos listos para empezar. Todo lo que tenemos que hacer es decir que sí, y todo este código de infraestructura se implementará. Esto tomará unos minutos.

Vale, después de implementar el stack, ahora podemos probar esto. Así que voy a entrar en la consola de AWS, y vamos a ir a la API que acabamos de crear yendo a AppSync. Y luego vamos a buscar la aplicación Notes. Aquí tenemos la aplicación Notes. Ahora podemos ir a nuestras consultas, y podemos decir, mutación create note. Y luego, simplemente vamos a devolver el ID, nombre. Y creo que también tenemos el valor completado, que vamos a establecer aquí como falso.

14. Consultando y Suscribiéndose a Notas

Short description:

Finalmente, consultaremos la lista de notas y configuraremos una suscripción para onCreateNote. Este stack me permite utilizar mis habilidades de front-end para construir código de infraestructura. CDK es una comunidad en crecimiento que funciona bien con Amplify. Échale un vistazo si estás interesado en la computación en la nube de pila completa.

Y luego, finalmente, haremos una consulta. de la lista de notas. Y aquí, deberíamos ver las notas que se devuelven desde nuestra API.

Entonces, nuestra API está en funcionamiento. Finalmente, configuraremos una suscripción. Y la suscripción básicamente va a devolver el mismo campo, así que copiemos esos. Y para onCreateNote, queremos esos. Y ahora tenemos una suscripción en ejecución, así que si se crea un nuevo elemento, la suscripción data vendría por aquí.

Entonces, eso es todo. Estoy muy emocionado con este stack porque puedo utilizar mis habilidades de front-end, TypeScript, JavaScript, para construir todo este código de infraestructura. CDK es una comunidad realmente genial. Está creciendo muy rápido. Funciona muy bien con Amplify. Si estás interesado en la computación en la nube de pila completa, échale un vistazo. Sígueme en Twitter en Dabbit3. Gracias por ver. ♪♪♪

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.