Advertisement
  1. Code
  2. React Native

Códificar una Aplicación con GraphQL, React Native y AWS AppSync: Aplicación

Scroll to top
Read Time: 11 mins

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

En estos tutoriales, te mostraré cómo crear e interactuar con una base de datos GraphQL utilizando AWS AppSync y reaccionar nativo. Esta aplicación tendrá una funcionalidad en tiempo real y offline, algo salir de la caja con AppSync.

En el post anterior hemos creado nuestro fondo GraphQL con el servicio de Amazon AppSync. Revisa si no lo has hecho ya. O, si desea una introducción a GraphQL, echa un vistazo a algunos de nuestros otros posts.

En este post, te envuelva todo a pie a través de la compilación del cliente nativo de reaccionar. El proyecto es un poco complicado mostrar a pie se pero paso a paso, a te explique la arquitectura del proyecto y mostrarle las partes fundamentales del código fuente.

Resumen de la arquitectura de aplicación y estructura de carpetas

Nuestra aplicación tendrá un punto de entrada principal que consiste de dos puntos de vista con pestañas. Una pestaña mostrará una lista de las ciudades de nuestra base de datos de GraphQL, el otro será el formulario de entrada para agregar una nueva ciudad. La ficha de  Cities será un navegador que permite al usuario desplazarse a las ciudades individuales.

Se almacenan los componentes principales en la carpeta de recursos y tendrán otras carpetas en el directorio src para sostener nuestras mutaciones GraphQL, consultas y suscripciones.

También tenemos una carpeta activos para sostener nuestras imágenes.

folder structure

Crear y Configurar al Cliente de React Native

Para referencia, echa un vistazo al código final para esta aplicación en el repositorio de GitHub del tutorial, pero a delinear algunos de los pasos para crear la aplicación desde cero.

En primer lugar, creamos una nueva aplicación React Native utilizando cualquier Expo.

Una vez en el proyecto recién creado, instalamos nuestras dependencias. La funcionalidad GraphQL y AppSync, utilizamos las siguientes dependencias:

También utilizamos después de las dependencias para el diseño de la interfaz de usuario:

También, uno de la biblioteca de iconos de Vector fue instalado, hemos vinculado:

Después de instalar nuestras dependencias, descargamos el archivo AppSync.js desde nuestra consola de AppSync. En nuestra consola de proyecto de AppSync, elegimos React Native en la parte inferior y haga clic en el botón de descarga naranja para Descargar este archivo de configuración.


Este archivo de configuración contiene la información de cliente de AppSync que necesitábamos crear un nuevo cliente.

Configurar el Proveedor y Almacén

El nivel superior de la aplicación es donde realizamos nuestra configuración para conectar con el cliente nativo de reaccionar la API AppSync. Si usted ha usado Redux o React Apolo antes, esto serán familiar. Si no lo tienes, recuerda que cualquier niño de un provider, en nuestro caso la ApolloProvider, tendrán acceso a su funcionalidad dada.

El código siguiente es nuestro nuevo archivo App.js, que es el principal componente importado de nuestro entrypoint index.js.

En este archivo, creamos un nuevo cliente de AppSync usando una combinación del constructor AWSAppSyncClient de aws-appsync, así como la configuración en nuestro archivo de aws-exports.js, que proporciona la URL del API de GraphQL, región, tipo de autenticación, y clave de autenticación API.

Luego envolvemos nuestro principal punto de entrada, el archivo Tabs.js que sostenga nuestra navegación de la ficha, en un ApolloProvider y pase el cliente AppSync como el apoyo de cliente. También envolvemos el componente de Tabs en un componente Rehydrated que importamos de aws-appsync-react. Esto se asegurará de que hemos leído de almacenamiento asincrónico y han rehidratado nuestro caché antes de representar la interfaz de usuario.

Ahora nuestra aplicación será capaz de consultar datos desde nuestro extremo AppSync y también para realizar mutaciones y suscripciones!

Navegación

El principal punto de entrada de la aplicación es una navegación por fichas, implementada en el archivo Tabs.js con navegación de reaccionar.

Lo que hemos hecho aquí es crear y exportar un TabNavigator con dos pestañas. Estos son:

  1. Cities - este componente enumera nuestras ciudades, y resulta ser un componente de navegador de por sí. Este componente es un navegador porque queremos ser capaces de navegar hasta cada ciudad individual y ver las ubicaciones dentro de la ciudad.
  2. AddCity - este componente es una forma para poder añadir nuevas ciudades.

Componentes Reutilizables

Esta aplicación tiene sólo un componente reutilizable, un TextInput modificado para requisitos particulares. Desde que se se duplicar esta funcionalidad y estilo una y otra vez, hemos decidido hacer su propio componente. El componente de entrada se implementa en Input.js.

Lista de Ciudades y Navegación de Ciudad

La vista principal de la aplicación es una lista de las ciudades que va recuperar de GraphQL. Queremos ser capaces de navegar de cada ciudad una a una vista detallada de la ciudad donde podemos agregar ubicaciones.

Para ello, hacemos Cities.js es propio StackNavigator y City.js el componente que vaya a la hora de elegir una ciudad. Haciendo clic en una ciudad en Cities, pasamos su nombre y su id como apoyos a la City.

Cities.js

En este componente, estamos buscando mediante la consulta de listCities, y nosotros también estamos suscribirse a la NewCitySubscription, para que cuando una ciudad nueva es añadida, incluso desde otro cliente, nosotros manejar esa suscripción y actualización de nuestra gama de ciudades. La consulta de listCities hace una serie de ciudades disponibles en nuestro componente como this.props.cities.

City.js

En este componente, nos pasamos una ciudad como accesorios de navegación (disponible en props.navigation.state.params.city). Utilizamos el valor de id de la ciudad a buscar la lista de ubicaciones de la ciudad elegida mediante la consulta de listLocations. Nos suscribimos a nuevas ubicaciones de manera similar que suscribimos a nuevas ciudades en Cities.js, mediante la suscripción de NewLocationSubscription. También proporcionan un optimisticResponse y update de funciones para cuando se agrega una nueva ciudad. Respuesta optimista

Adición de Ciudades

Por último, debemos implementar con la funcionalidad para agregar nuevas ciudades a la API GraphQL en el archivo AddCity.js. Para ello nos hemos cableado una mutación junto con un formulario que se llame createCity, pasando el valor de la forma de entrada.

AddCity tiene una función onAdd que definimos en nuestra composición de GraphQL, que no sólo escribe una nueva ciudad en nuestra base de datos de GraphQL, sino que también implementa una interfaz de usuario optimista utilizando una combinación de optimisitcResponse y update.

Mutaciones, Consultas y Suscripciones

Mutaciones, consultas y suscripciones son la funcionalidad de integración con la API GraphQL. En nuestra aplicación, esta funcionalidad se implementa en los archivos Cities.js, City.js y AddCity.js mediante el cliente de AppSync.

Echemos un vistazo a cómo se implementan las mutaciones, consultas y suscripciones en nuestro código.

Consultas

En primer lugar, echemos un vistazo a cómo crear y exportar una consulta de GraphQL que podría interactuar con el listCities tipicamente en nuestro esquema de AppSync. Este código se encuentra en el archivo src/queries/LIstCities.js.

A continuación importamos esta consulta en el Cities.js archivo, junto con algunos ayudantes de react-Apollo y alambre el componente que nos gustaría tener acceso a esta información utilizando compose y graphql de react-Apollo.

Ahora tenemos acceso a la matriz de las ciudades de nuestro servidor de GraphQL como un apoyo. Podemos utilizar this.props.cities para asignar sobre la matriz de las ciudades de GraphQL.

Mutaciones

Para crear una mutación, sería necesario primero crear una mutación de GraphQL básica y exportarlo. Hacemos esto en el archivo src/mutations/CreateCity.js.

Nuevo podemos importar esta mutación (junto con los ayudantes de Apolo) en el archivo AddCity.js y utilizarlo en un componente:

Ahora, tenemos acceso a un apoyo llamado onAdd, que pasamos un objeto que nos gustaría enviar a la mutación!

Suscripciones

Las suscripciones permiten suscribirse a los cambios en los datos y tenerlos actualización en nuestra aplicación en tiempo real. Si tuviéramos que cambiar nuestra base de datos agregando o quitando una ciudad, queremos que nuestra aplicación para actualizar en tiempo real.

Primero necesitamos crear la mutación y exportarla para que podamos tener acceso a él dentro del cliente. Nos guarde en el archivo src/subscriptionsNewCitySubscriptions.js.

Ahora podemos importar y colocar la suscripción en el Cities.js. Ya vimos cómo obtener las ciudades de nuestra API. Vamos a actualizar ahora esta funcionalidad para suscribirse a nuevos cambios y actualizar la matriz de las ciudades cuando se agrega una nueva ciudad.

Añadimos un nuevo accesorio llamado subscribeToNewCities, que llamamos en componentDidMount. En la suscripción, pasamos en un documento (la definición de suscripción) y updateQuery para describir lo que queremos, cuando esto se actualiza.

Nos destructure createCity (que contiene la mutación) de los apoyos que se pasan a la función updateQuery y devolver todos los valores existentes junto con una serie de listCities actualizada que contiene las ciudades anteriores junto con los datos de la nueva ciudad que nos de createCity.

Optimistic UI

¿Qué pasa si no queremos esperar a que la suscripción devolver la información más actualizada de nuestra API para actualizar la interfaz de usuario?

Si un usuario crea una nueva ciudad, queremos que automáticamente se agregar la matriz de las ciudades y representar en nuestra aplicación antes de recibir la confirmación del servicio de back-end.

Podemos hacerlo fácilmente mediante unas técnicas y funciones.

Vamos a actualizar nuestro AddCityMutation a la siguiente (puede ver este código en el archivo de origen AddCity.js):

Aquí, hemos añadido dos nuevas propiedades al objeto de argumento de función mutate:

  1. optimisticResponse define la nueva respuesta que gustaría tener disponible en la función de actualización
  2. actualización toma dos argumentos, el proxy (que le permite leer desde la memoria caché) y los datos que desea utilizar para realizar la actualización. Leer la caché actual (proxy.readQuery), agregar nuestro nuevo elemento a la matriz de elementos y escribir de nuevo a la caché, que actualiza la interfaz de usuario.

Conclusión

GraphQL se está convirtiendo en cada vez más corriente. Gran parte de la complejidad que rodea GraphQL tiene que ver con el manejo de la base de datos y la capa de API. Sin embargo, herramientas como AppSync abstraernos esta complejidad, liberar a los desarrolladores de pasar la mayor parte de su configuración de tiempo y trabajo en el servidor.

Esperamos mucha más innovación en este espacio y no puede esperar a ver qué vemos en el 2018!

Si usted está interesado en usar AppSync junto con el marco sin servidor, revisa esta gran introducción a usar los dos juntos.

Si desea aprender más sobre AWS AppSync, sugiero echar un vistazo a la página de AppSync y la documentación para la construcción de un cliente GraphQL.

Si usted quiere contribuir con este proyecto, puede conectar a nuestro repositorio de GitHub. Si tienes alguna idea, no dude enviarnos un PR, o utilizar esta aplicación como un motor de arranque para su próximo proyecto GraphQL nativo reaccionar!

Y mientras tanto, algunos de nuestros otros reaccionan nativo tutoriales aquí en Envato Tuts+!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.