Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React
Code

Cómo Construir Sin Servidor GraphQL y  REST APIs con AWS Amplify

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

AWS Amplify permite a los desarrolladores crear rápidamente y conectar a los potentes servicios en la nube. En el tutorial anterior, aprendiste cómo configurar Amplify en un proyecto React  y cómo utilizar autenticación, almacenamiento en S3 y hosting. Si necesita una introducción para amplificar la AWS, asegúrese de pásate por ese post primero.

En este post, iremos más lejos con Reacty y AWS Amplify, exploración de las funciones como un administrado GraphQL capa y lambda funciones de datos.

Agregar un GraphQL API

Vamos a ver cómo añadir un AWS AppSync GraphQL API a nuestro proyecto y comenzar a usar desde dentro de nuestro proyecto.

La API que vamos a crear será un restaurante API para poder mantenerse al día con restaurantes que nos gusta o le gustaría visitar.

Para agregar la API GraphQL a nuestro proyecto, podemos utilizar el siguiente comando:

Se le pedirá responder a algunas preguntas de configuración. Seleccione las siguientes opciones:

  • tipo de servicio: GraphQL
  • Nombre de la API: TutsGraphQLAPI
  • tipo de autorización: API key
  • esquema anotado GraphQL: N
  • creación de esquema de guiado: Y
  • ¿Qué mejor describe su proyecto? Solo objeto con los campos (por ejemplo, "Todo" con ID, nombre, descripción)
  • ¿Quieres editar el esquema ahora? Y

Cuando se le solicite, actualizar el esquema de la siguiente y guarde el archivo:

Esto sólo crea un tipo de datos único — Restaurant — con id requerido y campos de nombre, así como una descripción opcional.

A continuación, vamos a empujar las actualizaciones a nuestra cuenta:

¡Ahora, la API ha sido creada!

¿Qué acaba de suceder aquí? AWS amplifican utiliza la biblioteca incorporada de GraphQL transformar para crear una completa API de GraphQL, incluyendo esquema adicional, resoluciones y un origen de datos.

Para ver la nueva API de AppSync de AWS en cualquier momento después de su creación, puede ir a la consola en https://console.aws.amazon.com/appsync y haga clic en la API que se acaba de crear (Asegúrese de que su región está ajustado correctamente). Desde dentro de la consola AWS AppSync, puede ver la configuración de API y realizar las consultas y las mutaciones en la API.

Ejecución de las Mutaciones GraphQL

A continuación, vamos a interactuar con la API de nuestra aplicación React.

Lo primero que queremos hacer es crear una mutación. En GraphQL, las mutaciones son el equivalente de poner del REST, PUTPUSH y DELETE. Porque todavía no tenemos datos en nuestra base de datos, vamos a crear una mutación para crear un nuevo elemento de restaurante.

Para ello, nos a importación de API y graphqlOperation de AWS Amplify, definiendo una mutación y luego ejecutar la mutación.

Echemos un vistazo a una aplicación de ejemplo que implementa una mutación. En App.js, primero importamos reaccionan, nuestra aplicación de CSS y los componentes necesarios de AWS Amplify.

A continuación, definimos una mutación para crear un restaurante. Especificamos que la mutación acepta un nombre y una descripción y se nombra createRestaurant. Esta mutación se definió automáticamente cuando creamos el esquema de Restaurant arriba. Tenga en cuenta que la mutación se especifica en GraphQL, un lenguaje de consulta específico del dominio.

Ahora, creamos nuestro componente de aplicación.

A continuación, aún dentro del componente de App, se define una función para ejecutar la mutación. Esto ejecuta la mutación llamada API.graphql, pasando en la mutación y los datos.

Luego prestamos el componente, enlazando nuestras funciones de controlador y mutación de cambio.

Por último, exportar el componente de App, con la autenticación.

Usted debe ser capaz de ejecutar este código y empezar a crear nuevos artículos de restaurante en la API.

Para ver la fuente de datos reales para ver si los datos están allí, abra la consola AWS AppSync, elegir su API, haga clic en Recursos de Datos en el menú de la izquierda y luego haga clic en el Nombre de Recurso. Esto abrirá la tabla de Amazon DynamoDB. En la tabla, puede ver los datos en la ficha Elementos.

Ejecución de Consultas GraphQL

A continuación, veamos cómo para consulta de datos de la API. A implementar esto en tres pasos:

  1. definir una consulta
  2. ejecutar la consulta cuando la aplicación carga
  3. Guarde el resultado de la consulta en nuestro estado y representar en la interfaz de usuario

En primer lugar, definamos la consulta en un nuevo componente. Una vez más, estamos utilizando el lenguaje de GraphQL para especificar la consulta. Estamos utilizando la consulta de listRestaurants que automáticamente se definió cuando empujamos el esquema de Restaurants. El fragmento de código siguiente especifica que estamos esperando una lista de elementos, cada uno con un id, nombre y descripción.

Luego, necesitamos agregar algún estado inicial adicional para mantener la variedad de restaurantes devuelto desde el servidor.

También tendremos que añadir un evento de ciclo de vida de componentDidMount a consulta de datos desde el servidor de GraphQL. Este método async para actualizar el estado de componente cuando el servidor devuelve la lista de restaurant.

Por último, vamos a crear un componente que se asigna la matriz de restaurants del estado de componente para HTML.

Ahora, cuando ejecutamos la aplicación, veremos que los datos de la API se va a representar en una lista en la pantalla. Sin embargo, la aplicación no mostrará los cambios cuando los datos se actualizan, por ejemplo, al agregar un nuevo restaurante.

Así que para empezar, vamos a actualizar el método de createRestaurant para dar una respuesta optimista a la interfaz de usuario. Ahora mismo, cuando creamos un nuevo elemento, se actualiza la base de datos, pero la interfaz de usuario no se sabe aún sobre el nuevo elemento. Para solucionar este problema, actualizaremos la matriz de restaurante en el método createRestaurant al agregar el nuevo elemento a la matriz:

Suscripciones de Datos en Tiempo Real

A continuación, queremos ser capaces de trabajar con datos en tiempo real. En GraphQL, las suscripciones te permiten escuchar para datos en tiempo real. Cuando hay nuevos datos, la suscripción se dispararon, y los nuevos datos se transmiten a través de la suscripción. Depende de nosotros en el lado del cliente para manejar estos nuevos datos.

En nuestra aplicación, podrá suscribirse a la variedad de restaurantes, y vamos a crear una suscripción de onCreateRestaurant que se activará en cualquier momento se crea un nuevo restaurante. Entonces a tomar el nuevo elemento de la suscripción, actualizamos nuestra gama existente y llamar setState para renderizar la interfaz de usuario con los nuevos datos.

Sólo en cuanto a las mutaciones y las consultas, comenzamos definiendo la suscripción en el lenguaje específico del dominio de GraphQL.

La suscripción se creará en el método de ciclo de vida de la componentDidMount antes o después de la consulta de GraphQL que ya hemos establecido:

Ahora, si abre dos ventanas del navegador, podrá crear una mutación en una pantalla y ver la actualización ocurre en todas las otras pantallas.

Si observas el método .filter que se utilizó en la creación de la nueva matriz de restaurantes en la suscripción, se puede ver que estamos comprobando para ver si hay duplicados que contengan el mismo nombre y descripción. Quizás una mejor manera de hacer esto en la producción sería crear un ID de cliente único que también se almacena en la base de datos y filtro basado en ese identificador.

Creando un API REST con AWS Lambda

GraphQL es una tecnología maravillosa, pero a veces nuestro proyecto requiere que crear un API REST tradicional. Con AWS Lambda y amplificación, también es fácil crear servidor resto APIs mediante la CLI.

Cuando creamos la API GraphQL, usamos el comando amplify create api. Este comando nos da la opción de crear una API de GraphQL o una API REST. La API REST puede configurarse para utilizar una función de Express sin servidor independiente o una función de JavaScript sin servidor preconfigurado para funcionar con las operaciones CRUD de Amazon DynamoDB.

La opción que usaremos esta API es una función Express sin servidor.

Vamos a seguir adelante y añadir la nueva funcionalidad de:

Como de costumbre, esto le pedirá que rellene algunos datos de configuración. La fuente de las siguientes opciones:

  • tipo de servicio: REST
  • Introduzca un nombre de recurso que se utilizará dentro del proyecto: por ejemplo, amplifyrestapi
  • Escriba una ruta para los extremos de REST: por ejemplo, /people
  • Fuente lambda: Cree una Nueva Función de Lambda
  • Nombre de la función Lambda de AWS: amplifyrestapifunction
  • plantilla de función: Función expresa sin servidor (Integración con Amazon API Gateway)
  • [editar] la función lambda local ahora? Y

Ahora, podrás editar la función lambda localmente. En el archivo a reemplazar el existente método de app.get('/people') con lo siguiente:

Sólo se devuelve una lista constante de nombres para los propósitos de la demostración. Guarde este archivo y continuar con las siguientes respuestas:

  • ¿restringir el acceso a la API?
  • ¿Quién debe tener acceso? Sólo los usuarios autenticados
  • ¿Qué tipo de acceso desea para los usuarios autenticados? leer
  • ¿Añadir otro camino? N

Esto ha creado una nueva función Lambda localmente que podremos actualizar y empuje a nuestra cuenta según sea necesario. El código para esta función de lambda se encuentra en amplify/backend/function/amplifyrestapi/src.

Ahora, vamos a empujar las actualizaciones a nuestra cuenta:

Consultar la API REST del Cliente

Ahora, es nuestra función de Lambda para arriba y funcionando y podemos empezar a interactuar con él!

Primero, vamos a consultar los datos de la nueva API y mostrarlo en la interfaz de usuario. Para ello, usaremos la clase API de amplificar, llamar a API.get. En la sección anterior, utilizamos API.graphql para hacer peticiones a nuestro API de GraphQL, pero hay muchos métodos que están disponibles en la clase de la API. Usted puede aprender más acerca de la clase de la API en la documentación oficial.

Ahora, deberíamos podemos ejecutar la aplicación, obtener a la gente datos de nuestra API, y representar a la pantalla.

Actualización de una función de Lambda del CLI

Además de crear una nueva función de Lambda, también podemos actualizar nuestra función de Lambda del CLI.

Vamos a cambiar la función para golpear un API y recuperación de datos en vez de constantes constantes. Para ello, vamos a utilizar la biblioteca de axios para hacer las peticiones HTTP, y a obtener datos de la API de Star Wars.

Para utilizar axios, necesitaremos navegar para amplify/backend/function/amplifyrestapi/src e instalarlo allí. Axios se instala en la carpeta del proyecto de la función Lambda, no la carpeta de la aplicación principal, porque va a estar ejecutándose en el servidor de la función del Lambda.

Ahora que está instalado axios, actualizaremos la función Lambda para recuperar datos de la API de Star Wars:

Ahora, guarde el archivo y ejecutar amplify push desde la carpeta principal del proyecto para actualizar la función Lambda en la nube:

¡Ahora, la API es actualizado y listo para ir!

Cuando actualiza la aplicación, debemos ahora vemos los datos que se devuelve de la API de Star Wars.

Conclusión

En esta serie, usted aprendió cómo empezar con AWS Amplify y agregar a su proyecto de reaccionar, así como agregar autenticación, almacenamiento, hosting y un GraphQL o API REST — todo sin tener que manualmente código o aprovisionar un servidor. ¡Eso es un montón de energía para los desarrolladores de aplicaciones!

Espero que estos mensajes te han inspirado para crear sus propias aplicaciones de servidor web usando tecnología de servidor y AWS Amplify! Háganos saber lo que piensas en los comentarios.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.