Configuración avanzada de Relay en React Native

configuración de relay introducción en nuestra guía anterior, aprendimos cómo obtener el archivo de esquema, guardarlo y pegarlo en nuestra aplicación de react native en esta guía, vamos a instalar relay y preparar nuestro entorno para comenzar a desarrollar una aplicación de react native objetivo para configurar relay, primero necesitaremos instalar relay en nuestra aplicación de react native y luego preparar el entorno de relay requisitos previos recomendamos un conocimiento básico de los siguientes temas relay modern , babel js , javascript (ecs5 y ecs6), graphql js readme un proyecto básico de react native en funcionamiento en tu entorno local un archivo schema graphql descargado en tu proyecto de react native en los siguientes pasos encontrarás una instalación básica de relay centrada en una aplicación de react native si deseas profundizar en este tema, visita la documentación oficial 1 instalando la api oficial de react relay comencemos a instalar la biblioteca oficial react relay esta biblioteca es la api oficial del equipo de relay y tiene todo lo necesario para construir los fragmentos de datos importante instalar relay modern para este tutorial con 10 0 0 como versión a partir de la versión 11 0 0, el enfoque para usar react relay es diferente debido a los nuevos hooks 2 configuración de relay la configuración de relay tiene la información necesaria para el compilador de relay dentro de ella, especificaremos dónde puede encontrar el archivo schema file el compilador de relay, qué carpetas deben ser buscadas y otras configuraciones primero, instalemos el paquete relay config nota este tutorial utiliza yarn como cliente de paquetes, pero puedes usar npm de todos modos ahora, creemos el archivo de configuración de relay donde relay encontrará la ruta del esquema crea un nuevo archivo dentro de la raíz de la aplicación nombralo como relay config js abre el archivo y guárdalo con la información a continuación 3 plugin babel de relay para convertir los artefactos de graphql en tiempo de ejecución, necesitamos instalar un plugin de babel ahora, dentro de tu archivo de configuración de babel, debes agregar en el array de plugins el plugin babel de relay el archivo final babel config js se verá así en proyectos de expo, sigue el mismo enfoque agregando el array de plugins dentro de babel config js justo después del array de presets el resultado final debería verse así 1 module exports = function (api) { 2 api cache(true); 3 return { 4 presets \[ 5 "babel preset expo", 6 ], 7 plugins \[ 8 'relay' 9 ] 10 }; 11 }; el plugin de relay debe ejecutarse antes que otros plugins para una correcta transformación de los artefactos de graphql consulta la documentación del plugin de babel para saber más 4 compilador de relay desde nuestra primera documentación, hemos estado explicando sobre el compilador de relay para que nuestra aplicación compile nuestros fragmentos de datos, lo instalaremos ahora abramos nuestro package json y configuremos un nuevo comando de script para ejecutar el compilador de relay watchman es responsable de configurar si el compilador de relay debe estar buscando cambios en los fragmentos de relay si es verdadero, se volverá a ejecutar en cada cambio si es falso, se ejecutará después de que ejecutes el yarn relay por sí mismo el archivo package json debería verse así 1 "scripts" { 2 "android" "react native run android", 3 "ios" "react native run ios", 4 "start" "react native start", 5 "test" "jest", 6 "lint" "eslint ", 7 "relay" "relay compiler watchman false" 8 }, 5 ejecutar yarn relay finalmente, con los pasos de instalación completados, podemos ejecutar el comando yarn relay en la raíz de la aplicación dado que no construimos ningún fragmento de datos, el relay compiler devuelve cualquier archivo cambiado genial, tu aplicación ya tiene relay instalado y configurado ahora, implementemos nuestro entorno para comenzar a hacer solicitudes al servidor de back4app 6 preparando el entorno de fetch el entorno de relay define cómo la capa de red manejará las solicitudes y cómo el relay store debe funcionar el store controla nuestros datos en el frontend actualizándolos solo cuando cambian y almacenándolos en caché un entorno simple necesitará al menos la capa de red y el store capa de red la capa de red es fácil de construir manejará cada solicitud de nuestra aplicación, realizando consultas, mutaciones y suscripciones (si su aplicación lo soporta) al consumirla, relay sabrá cómo preparar las llamadas para acceder al servidor de la aplicación almacén de relay el almacén es responsable de actualizar los datos de nuestra aplicación en el lado del cliente cada solicitud puede tener una función de actualización dentro de la función de actualización, puedes usar una lista de funciones auxiliares para actualizar tus datos con la interfaz de almacén para preparar el entorno de relay, necesitamos crear un archivo de configuración del entorno el archivo será leído por el renderizador de consultas cada vez que se realice una consulta preparemos este archivo 6 1 crear el archivo de entorno seguiremos el principio de diseño de la biblioteca relay, el concepto de colocación para empezar, creemos una carpeta en la raíz de la aplicación y nómbrala relay dentro de ella, crea un archivo y nómbralo environment js environment js 6 2 configurar el entorno después de eso, importa de relay runtime relay runtime todo lo que necesitamos 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 configurar la capa de red la capa de red necesita una función para obtener los datos del servidor primero que nada, creemos una función de obtención responsable de realizar una solicitud post 1 const fetchquery = async (request, variables) => { 2 const body = json stringify({ 3 query request text, 4 variables, 5 }); 6	 7 const headers = { 8 accept 'application/json', 9 'content type' 'application/json', 10 'x parse application id' 'x parse application id', 11 'x parse client key' 'x parse client key', 12 }; 13	 14 try { 15 const response = await fetch(`https //parseapi back4app com/graphql`, { 16 method 'post', 17 headers, 18 body, 19 }); 20 21 const data = await response json(); 22 23 if (data errors) { 24 throw data errors; 25 } 26 27 return data; 28 } catch (err) { 29 console log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; envolvemos la solicitud para el backend con un try catch si hay un error, se lanzará y la aplicación lo manejará de lo contrario, seguirá el comportamiento normal y devolverá los datos en la capa de red también es donde configuras la conexión de tu aplicación al servidor en back4app usamos dos claves principales application id y client key las claves deben ser informadas en los encabezados junto con la url del servidor para obtener esta información, ve a tu app y haz clic en api console > menú graphql con la consola de graphql abierta, verás la url en la parte superior y en la parte inferior las claves de la aplicación necesarias reemplaza con tu información la función de obtención recuerda no exponer la clave maestra 6 4 exportar el entorno el relay runtime proporciona las funciones necesarias para consumir la capa de red y crea el almacén finalmente, combinemos todo en un nuevo entorno y exportémoslo a nuestra aplicación usa el código a continuación en tu archivo de entorno 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; el archivo final del entorno se verá así 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 7	 8 const fetchquery = async (request, variables) => { 9 const body = json stringify({ 10 query request text, 11 variables, 12 }); 13	 14 const headers = { 15 accept 'application/json', 16 'content type' 'application/json', 17 'x parse application id' 'x parse application id', 18 'x parse client key' 'x parse client key', 19 }; 20	 21 try { 22 const response = await fetch(`https //parseapi back4app com/graphql`, { 23 method 'post', 24 headers, 25 body, 26 }); 27 28 const data = await response json(); 29 30 if (data errors) { 31 throw data errors; 32 } 33 34 return data; 35 } catch (err) { 36 console log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41	 42 const environment = new environment({ 43 network network create(fetchquery), 44 store new store(new recordsource()), 45 }); 46	 47 export default environment; conclusión increíble ahora que el relay y el entorno de relay están instalados y configurados, es hora de comenzar a consumir la api graphql de back4app así que, el siguiente paso es crear nuestro primer renderizador de consulta y comunicarlo a nuestro servidor