Explorando Relay y GraphQL en Back4App para React Native

comenzar con graphql relay introducción en esta guía aprenderás qué es relay, cómo trabajar con esquemas y entender cómo trabajar con graphql en back4app requisitos previos esto no es un tutorial aún, pero para sentirte cómodo leyéndolo necesitarás conocimientos básicos de javascript entendimiento básico sobre graphql si no lo tienes, el graphql js es un lugar perfecto para comenzar relay relay es un cliente de graphql desarrollado por el equipo de ingeniería de facebook y diseñado para el rendimiento al construir aplicaciones impulsadas por datos más precisamente, relay es un marco para obtener y gestionar datos de graphql de manera declarativa en el lado del cliente que utiliza convenciones estrictas para ayudar a que tu aplicación tenga éxito fue construido con la escalabilidad en mente para potenciar aplicaciones complejas como facebook el objetivo final de graphql y relay es ofrecer interacciones instantáneas de respuesta de ui una de las principales ventajas de usar graphql es que puedes obtener con una sola consulta todos los datos necesarios para construir una página de aplicación, por ejemplo por supuesto que esto es bueno (puedes ahorrar viajes al servidor) pero con eso viene un problema puedes usar diferentes consultas para el mismo componente al reutilizar este componente en diferentes partes de tu aplicación para evitar este tipo de problema, relay utiliza un concepto importante colocalización colocalización al usar relay, los componentes y sus requisitos de datos viven juntos los requisitos de datos de los componentes se declaran dentro de ellos eso significa que todos los componentes declaran los datos que necesitan relay asegura que cada componente tenga los datos que necesita cuando se renderiza la estructura de relay detrás del concepto de colocalización son los contenedores el más común es el contenedor de fragmento de relay el contenedor es el componente que intenta cumplir con los datos requeridos al renderizar cada componente los contenedores declaran su dependencia de datos utilizando fragmentos de graphql cada componente tendrá su propio contenedor de fragmento el contenedor no obtiene los datos directamente; solo declara la especificación para los datos necesarios al renderizar los datos se obtendrán en el lado del servidor relay se asegurará de que los datos estén disponibles antes de que ocurra el renderizado relay compone un árbol de datos con esos contenedores, ignorando las redundancias y obteniendo los datos en el servidor ilustremos el concepto con un ejemplo un fragmento es una selección de campos en un tipo de graphql relay trabaja con fragmentos, paginación y contenedores de refetch el más común es un contenedor de fragmento a continuación, se muestra un fragmento en graphql y después el mismo en relay 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4&#x9; 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12&#x9; 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20&#x9; 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); en el primer código puedes ver la versión de graphql que nos permite dividir esta consulta en fragmentos reutilizables en el siguiente código puedes ver la versión de relay que muestra los fragmentos y los datos juntos en el mismo componente la colocación significa que las definiciones de datos y las definiciones de vista viven juntas la colocación tiene algunos beneficios solo necesitamos declarar exactamente los datos que necesitamos eso significa que es difícil sobrecargar datos, lo que mejora nuestra aplicación, y es difícil subcargar datos, lo que previene errores con datos faltantes otro concepto importante es el enmascaramiento de datos, que significa que los componentes solo pueden acceder a los datos que solicitaron el enmascaramiento de datos ayuda a prevenir errores de dependencia además, los componentes solo se actualizan si los datos que están utilizando cambian renderizador de consultas moderno recomendamos echar un vistazo a la documentación oficial del renderizador de consultas https //relay dev/docs/en/query renderer html#docsnav para una mejor comprensión basado en los contenedores de fragmentos, relay los leerá y hará la solicitud al servidor según los datos que tienen pero, ¿cómo ocurre esta requisición? aquí es donde entra el renderizador de consultas moderno el renderizador de consultas moderno es el componente que lee los contenedores de fragmentos, hace la solicitud al servidor y devuelve los datos al componente cada componente raíz tendrá un renderizador de consultas moderno haciendo esta solicitud en el ejemplo anterior, tenemos una abstracción para que solo pasemos el fragmento que debe ser leído y así todo el resto del trabajo se realiza dentro de createqueryrenderermodern en el siguiente paso del documento ingresaremos a createqueryrenderermodern para entender la abstracción basada en el ejemplo puro anterior a continuación se muestra un ejemplo puro de query render modern 1 export default function artistrenderer({artistid}) { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql` 6 query queryrenderersartistquery($artistid string!) { 7 # the root field for the query 8 artist(id $artistid) { 9 # a reference to your fragment container 10 artistheader artist 11 } 12 } 13 `} 14 variables={ {artistid} } 15 render={({error, props}) => { 16 if (error) { 17 return \<div>{error message}\</div>; 18 } else if (props) { 19 return \<artist artist={props artist} />; 20 } 21 return \<div>loading\</div>; 22 }} 23 /> 24 ); 25 } podemos ver que el query renderer modern es un componente hoc en otras palabras, envuelve el componente que posee el contenedor con los datos que se van a solicitar, realiza la solicitud con el entorno de relay y devuelve los datos hacia abajo pasando al componente generación automática de tipos trabajando con relay podemos construir una aplicación de manera segura en cuanto a tipos como dijimos, cada componente será el propietario de sus datos así que, cuando ejecutamos el relay compiler, lee cada fragmento de datos y realiza una verificación con tu esquema graphql si todas las verificaciones del compilador de relay están bien, los tipos se generarán en una carpeta llamada generated esta carpeta se crea dentro de las carpetas de componentes raíz ve el ejemplo a continuación componente de inicio verificando la salud de la api 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8&#x9; 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16&#x9; 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); carpeta generada que contiene los tipos para el componente de inicio y los tipos generados después de esto, solo necesitamos importar el tipo en el componente y componerlo 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; el tipo se genera en flow, el lenguaje principal para tipos de facebook pero, con una biblioteca puedes generar en typescript esto es lo más común para trabajar con react native resumiendo, con el compilador de relay podemos verificar la implementación de datos antes del tiempo de ejecución esto nos ayuda a prevenir errores y luego mejorar la calidad de la aplicación y el tiempo de desarrollo en las consultas, podemos evitar datos duplicados en n componentes diferentes verifica si algunos datos son duplicados si los tiene, eliminará las redundancias esto reducirá el tamaño de la carga útil de las consultas y aumentará aún más el rendimiento de la aplicación desarrollando en las consultas, podemos evitar datos duplicados en n componentes diferentes verifica si algunos datos son duplicados si los tiene, eliminará las redundancias esto reducirá el tamaño de la carga útil de las consultas y aumentará aún más el rendimiento de la aplicación en el lado del servidor back4app back4app genera una api graphql compatible con relay lista para usar en tu proyecto lo que back4app genera para ti para que no tengas que construirlo tú mismo en el lado del servidor infraestructura en el panel de back4app puedes crear un modelo de datos completo con clases, tipos y todo lo que necesita una base de datos no tienes que preocuparte por la configuración y mantener el servidor por ti mismo después de crear tu modelo de datos, back4app generará todo lo necesario para consumirlo en el lado del frontend utilizando graphql echemos un vistazo al esquema de la api de graphql esquema el archivo de esquema es el núcleo de cualquier aplicación graphql describe todo el servidor disponible para ser utilizado en el lado del cliente relay funciona utilizando tu archivo de esquema para confirmar la cadena de consultas y el archivo generado aparecerá en / generado /mycomponent graphql, como dijimos en el tema de generación automática de tipos para usar el compilador de relay, necesitas un archivo de esquema graphql graphql o json que describa la api de tu servidor graphql estos archivos son representaciones locales de una fuente de verdad del servidor y no se editan cada esquema de graphql puede estar compuesto por tipo de consulta, tipo de mutación y tipo de suscripción para trabajar con un esquema que está siendo consumido por relay en el frontend, necesitas algunos de los conceptos básicos en el backend interfaz de nodo y conexión recomendamos leer sobre la interfaz de nodo y las conexiones de relay para hacer esta lectura más fácil de abstraer interfaces de nodo la interfaz de nodo implementa cada tipo en graphql para ayudar a obtener datos a través de id esta es una implementación para facilitar la obtención de datos del servidor y su actualización así que cada dato de cada tipo tendrá un id único, llamado id único global, implementado por una interfaz de nodo con el nodo, relay evita consultas anidadas y realiza la obtención y reobtención utilizando esto esto es difícil de implementar y necesita un poco de trabajo, ¡pero ya lo hemos construido para ti! paginación construido para ser compuesto, tanto en el front end como en el back end, relay nos ayudará a componer nuestros datos también para trabajar con paginación tenemos conexiones esas conexiones implementan el nodo del tipo que estamos obteniendo y tienen un modelo estándar, facilitando la implementación de la paginación en el lado del servidor afortunadamente, nuevamente, ya tenemos esto construido para usar en el frontend conclusión en esta guía introdujimos qué es relay, sus conceptos principales y cómo funciona también pudimos ver cómo back4app automatiza la creación del servidor graphql y nos entrega una base de datos completa con api graphql para trabajar resumiendo, todo el backend ya está construido por back4app solo necesitas crear tus tipos en el panel de control y comenzar a consumir basado en el esquema generado en la siguiente sección explicaremos cómo manejar este esquema en el front end y cómo preparar tu entorno para usar relay también tenemos un libro de cocina de graphql https //www back4app com/docs/parse graphql/graphql getting started , puedes usarlo para ayudarte a entender más conceptos en nuestro panel de control