AWS AppSync: funcionando y funcionando con GraphQL en la nube

El servicio AWS AppSync GraphQL ofrece actualizaciones en tiempo real y soporte integrado fuera de línea junto con una integración de primera clase con ElasticSearch, DynamoDB y AWS Lambda.

Tablero de instrumentos AppSync

La forma en que describiría AppSync es que básicamente es un servicio parecido a Firebase, pero con funciones de consulta y búsqueda de bases de datos más completas, así como una API GraphQL totalmente administrada para su aplicación.

En este momento, AppSync tiene sdks para iOS nativo, web y React Native, y pronto llegará Android.

En esta publicación, voy a usar AWS AppSync para crear un nuevo punto final API que aprovisionará una tabla DynamoDB, y recorrer el proyecto inicial que proporciona AppSync y analizar cómo se conecta todo junto.

A continuación, veremos cómo puede usar AppSync para crear nuevos esquemas que aprovisionarán automáticamente tablas adicionales para correlacionarse con los recursos nuevos. También veremos cómo usar los resolvedores y las plantillas de asignación para crear solicitudes y respuestas personalizadas de sus esquemas GraphQL.

Esta publicación supondrá que tienes una cuenta de AWS.

Empezando

Lo primero que debe hacer es iniciar sesión en AWS Console y hacer clic en AWS AppSync en la sección Servicios móviles.

Una vez que haya iniciado sesión en la consola de AppSync, verá una pantalla que le permitirá seguir adelante y crear una nueva API (figura 1). Si esta es tu primera vez aquí y no tienes ninguna API creada, esta pantalla se verá diferente, pero seguirá teniendo el botón naranja Create API . :

Figura 1: consola de AppSync

Haré clic en el botón naranja Crear API y cree una nueva API llamada EventsApp , y elegirá el esquema de muestra (Figura 2) que creará automáticamente un buen esquema de ejemplo básico que podemos usar para comenzar, luego desplácese hacia abajo y haga clic en el botón naranja Crear .

Figura 2: Creando una nueva API

A continuación, seremos llevados al tablero para la API que acabamos de crear. Aquí, veremos un menú a la izquierda para nosotros, no solo para explorar y editar el esquema, sino también para probar Consultas, agregar y ver fuentes de datos existentes relacionadas con la API y administrar la configuración (Figura 3).

Figura 3: panel de instrumentos de EventsApp

En esta vista, vemos nuestra URL de punto final API, el modo de autenticación (establecido en API KEY por defecto) y una guía de inicio rápido para iOS, React Web y React Native.

Comenzaremos clonando el proyecto web y conectando nuestras credenciales recién creadas.

Continúe y vaya a la parte inferior de la guía Getting Started, elija Web y copie la url del repositorio clonado (Figura 3).

Figura 3: clonación del proyecto de ejemplo

En una carpeta de trabajo desde su línea de comandos, sigamos adelante y clonemos el proyecto:

 git clone https://github.com/aws-samples/aws-mobile-appsync-events-starter-react 

A continuación, continúe e instale las dependencias usando npm o hilo:

 npm instalar 

o

 hilo 

Ahora, necesitamos agregar nuestro nuestro archivo de configuración de AppSync.

Para descargar el archivo, haga clic en el botón naranja Descargar justo debajo de donde clonamos el repositorio y descargamos el archivo en la carpeta src .

Ahora, deberíamos poder seguir adelante y ejecutar el proyecto.

Desde la raíz del directorio, ejecute npm start.

 npm start 

Deberíamos ver nuestro proyecto ejecutándose en el navegador, ¡y ahora deberíamos poder agregar nuevos eventos (Figura 4)! Continúa y agrega al menos un evento.

Figura 4: aplicación de eventos

Ahora, deberíamos poder acceder a nuestras fuentes de datos y ver el nuevo elemento agregado a nuestra base de datos.

En el tablero, haga clic en Orígenes de datos y luego haga clic en AppSyncEventTable y luego haga clic en la pestaña de items (Figura 5).

Figura 5: Ver la tabla de DynamoDB

Ahora vamos a abrir nuestro editor para ver cómo se integra todo esto, luego profundizaremos en el panel de AWS AppSync para ver las consultas y el esquema que alimentan esta aplicación.

En src/App.js , echemos un vistazo a lo que está sucediendo:

  1. Importamos el archivo de configuración de AppSync descargado. Este archivo contiene graphqlEndpoint que es la URL API que se aprovisionó cuando se creó la API desde el panel de AppSync, la apiKey , así como un par de otras piezas de configuración.
  2. ApolloProvider del cliente Apollo se importa y se utiliza para proporcionar una instancia de cliente a un árbol de componentes Reaccionar. Esto nos permitirá unir cualquier componente de React a nuestro punto final GraphQL para realizar consultas y mutaciones.
  3. AWSAppSyncClient es similar al constructor ApolloClient . Toma un objeto de configuración que contiene la URL de la API, la región y la información de autenticación.
  4. Rehydrated es un ayudante de la biblioteca aws-appsync-react que básicamente esperará a renderizar la aplicación hasta que los datos sean extraídos de la API y la aplicación esté conectada con el AWSAppSyncClient
  5. Como se mencionó en el paso 3, aquí estamos pasando nuestra configuración única al constructor AWSAppSyncClient .
  6. Aquí creamos el componente principal de la aplicación, envolviendo el componente de la aplicación tanto en ApolloProvider como Rehydrated .

A continuación, echemos un vistazo a src/Components/AllEvents.js y src/GraphQL/QueryAllEvents.js . En estos archivos, verá una configuración típica de GraphQL / Apollo.

La consulta GraphQL en QueryAllEvents ve así:

 importar gql desde "graphql-tag"; 
 export default gql (` 
consulta {
listEvents {
artículos {
carné de identidad
nombre
dónde
cuando
descripción
comentarios {
artículos {
commentId
}
}
}
}
} `
);

Esta consulta obtendrá una matriz de elementos de evento, cada uno con una identificación junto con otra información.

Esquema

¿De dónde viene exactamente esta información? Volvamos a nuestra consola de AppSync para ver qué está pasando. Vaya al panel de la aplicación de eventos y echemos un vistazo al esquema que se generó para nosotros cuando creamos la API (Figura 6).

Figura 6: esquema de eventos de aplicaciones

En este esquema, veremos el tipo de correlación llamado Event junto con la consulta listEvents .

También podemos ver tipos adicionales, consultas y mutaciones para cosas como eliminar un evento, obtener un solo evento por identificación, entre otras cosas.

La siguiente pregunta es probablemente "¿Cómo se ocupa la base de datos de las consultas y las mutaciones?" .

La respuesta es resolvers .

Resolvers

Los Resolvers ofrecen una forma de vincular las tablas de la base de datos (en nuestro caso, DynamoDB) con las consultas y mutaciones individuales.

Puede ver, adjuntar y editar resoluciones desde la vista de Esquema haciendo clic en una resolución existente o haciendo clic en el botón Adjuntar al lado de un tipo de datos existente (Figura 7).

Figura 7: Visualización de los resolutores

Los resolvedores usan un lenguaje de plantillas llamado Velocity Templating Language (VTL) para asignar consultas GraphQL en un formato específico para su origen de datos.

Algunas de las consultas y mutaciones más básicas que necesitaría realizar, como obtener un elemento por ID o colocar un elemento en una matriz, ya están escritas para usted y disponibles en el menú desplegable cuando está creando o editando su resolver (Figura 8).

Figura 8: Plantilla de mapeo

Crear un nuevo tipo de GraphQL + tabla DynamoDB

Intentemos recorrer el proceso de creación de un nuevo tipo y consulta en nuestro esquema, y ??luego adjuntar y probar un resolvedor.

En el editor de esquemas, agreguemos un nuevo tipo de usuario y luego haga clic en guardar (Figura 9).

Figura 9: Agregar un tipo de usuario

Después de hacer clic en guardar, haz clic en el botón Crear recursos en la esquina superior derecha de la pantalla, encima de los tipos de datos.

En la pantalla Crear recursos, elija Usuario como tipo en el menú desplegable, desplácese hasta la parte inferior y haga clic en el botón Crear (Figura 10).

Figura 10: Creando un nuevo recurso

Esto hace dos cosas:

  1. Cree una nueva tabla UserTable llamada UserTable .
  2. Actualice el esquema, agregue consultas, mutaciones y suscripciones para que coincidan con este nuevo tipo.

Debería poder ver sus fuentes de datos y ver una nueva tabla, creada automáticamente para usted, llamada UserTable . También debería poder ver las nuevas definiciones en el esquema.

¡Ahora probemos la nueva tabla y consulta!

Consultas y Mutaciones

En el menú de la izquierda del tablero, haz clic en Consultas. ¡AppSync tiene una herramienta en el navegador para escribir, validar y probar consultas GraphQL!

Crea una nueva consulta de mutación llamada createUser :

 mutation createUser { 
createUser (input: {
nombre: "Nader Dabit"
id: "12345"
nombre de usuario: "naderdabit"
}) {
carné de identidad
}
}

Luego haz clic en el botón naranja de reproducción (Figura 11).

Figura 11: Ejecutando una consulta

¡Ahora debería poder ver los datos nuevos en la UserTable !

También podemos buscar estos datos usando la consulta getUser .

Pruebe la siguiente consulta para buscar al usuario recién creado:

 query getUser { 
getUser (id: "12345") {
nombre
usuario
carné de identidad
}
}

Si desea que la ID se genere automáticamente, también podemos hacerlo fácilmente actualizando algunas cosas.

Primero, cambie la definición de entrada CreateUserInput en el esquema a esto:

 entrada CreateUserInput { 
nombre: ¡Cadena!
nombre de usuario: ¡Cadena!
}

A continuación, en la resolución, cambie la id en la plantilla de:

 "id": $ util.dynamodb.toDynamoDBJson ($ ctx.args.input.id) 

a:

 "id": {"S": "$ util.autoId ()"} 

Ahora, podemos crear nuevos elementos y la ID se generará automáticamente:

 mutation createUser { 
createUser (input: {
nombre: "Jason Franks"
nombre de usuario: "jf223"
}) {
carné de identidad
}
}

Seguridad

Puede usar políticas AWS IAM o Cognito User Pools para su directorio, así como reglas personalizadas que se establecen en los resolvedores GraphQL para realizar verificaciones en tiempo de ejecución de las reglas de autorización.

Esto permite algunas capacidades bastante poderosas como poder verificar si un usuario específico tiene acceso para realizar una acción en una sola pieza de datos, incluso en el nivel de fila de la base de datos. Por ejemplo, puede verificar si un usuario llamado Bob fue el creador de un registro y solo le permite a Bob leer o editar ese registro. Estas verificaciones de acceso se pueden realizar antes de que el resolver se comunique con una fuente de datos o después de realizar el filtrado antes de enviar datos al cliente.

Las capacidades de Cognito User Pools también permiten la "agrupación" de usuarios y la configuración de los resolvedores basados ??en estos grupos. Por ejemplo, tal vez tenga usuarios de Ingeniería y Recursos Humanos, pero solo los usuarios de Ingeniería pueden invocar una resolución específica.

Para obtener más información, consulte los documentos aquí .

AWS Amplify

Si desea integrar fácilmente su UX de cliente con AppSync, consulte AWS Amplify .

Esta nueva biblioteca también lanzada el año pasado le permite obtener cosas como el Registro de usuario y el Inicio de sesión fácilmente en su aplicación. Gestiona los objetos AWS IAM y Cognito User Pools (como tokens JWT) para que pueda pasarlos al servicio AppSync cuando desee que los usuarios se autentiquen antes de ejecutar los resolvedores como se describe en la sección anterior.

Amplify funciona muy bien con los recursos de AWS, por ejemplo, enviará Analytics a Amazon Pinpoint y también tiene un componente de almacenamiento para cargar y descargar datos de S3, que se puede bloquear por usuario con una configuración "privada".

AWS lo diseñó para que sea abierto y conectable para su uso con otros servicios en la nube que deseen proporcionar una implementación o backends personalizados, lo cual es una buena adición a la comunidad de código abierto.

https://www.youtube.com/watch?v=vAjf3lyjf8c&feature=youtu.be&t=3360

Echa un vistazo a este clip de YouTube para obtener una descripción general de Amplify.