Utilisation de GraphQL Relay avec back4app: Guide Technique

19 min

commencer avec graphql relay introduction dans ce guide, vous apprendrez ce qu'est relay, comment travailler avec le schéma et comprendre comment travailler avec graphql sur back4app prérequis ce n'est pas encore un tutoriel, mais pour vous sentir à l'aise en le lisant, vous aurez besoin de connaissances de base en javascript compréhension de base de graphql si vous n'en avez pas, le graphql js est un endroit parfait pour commencer relay relay est un client graphql développé par l'équipe d'ingénierie de facebook et conçu pour la performance lors de la création d'applications basées sur les données plus précisément, relay est un cadre pour récupérer et gérer de manière déclarative les données graphql côté client, qui utilise des conventions strictes pour aider votre application à réussir il a été construit en tenant compte de l'évolutivité pour alimenter des applications complexes comme facebook l'objectif ultime de graphql et relay est de fournir des interactions instantanées avec l'interface utilisateur l'un des principaux avantages de l'utilisation de graphql est que vous pouvez récupérer avec une seule requête toutes les données nécessaires pour construire une page d'application, par exemple bien sûr, c'est bien (vous pouvez économiser des allers retours vers le serveur), mais cela pose un problème vous pouvez utiliser différentes requêtes pour le même composant lorsque vous réutilisez ce composant dans différentes parties de votre application pour éviter ce genre de problème, relay utilise un concept important la colocation colocation lors de l'utilisation de relay, les composants et leurs exigences en matière de données vivent ensemble les exigences en matière de données des composants sont déclarées à l'intérieur d'eux cela signifie que tous les composants déclarent les données dont ils ont besoin relay s'assure que chaque composant dispose des données nécessaires lors du rendu la structure de relay derrière le concept de colocation est constituée des conteneurs le plus courant est le conteneur de fragment relay le conteneur est le composant qui tente de satisfaire les données requises lors du rendu de chaque composant les conteneurs déclarent leur dépendance aux données en utilisant des fragments graphql chaque composant aura son propre conteneur de fragment le conteneur ne récupère pas les données directement ; il déclare seulement la spécification des données nécessaires lors du rendu les données seront récupérées côté serveur relay s'assurera que les données sont disponibles avant que le rendu n'ait lieu relay compose un arbre de données avec ces conteneurs, en ignorant les redondances, et en récupérant les données sur le serveur illustrons le concept avec un exemple un fragment est une sélection de champs sur un type graphql relay fonctionne avec des fragments, de la pagination et des conteneurs de refetch le plus courant est un conteneur de fragment voir ci dessous un fragment en graphql et ensuite le même sur relay 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4	 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12	 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20	 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); dans le premier code, vous pouvez voir la version graphql qui nous permet de diviser cette requête en fragments réutilisables dans le code suivant, vous pouvez voir la version relay qui montre les fragments et les données ensemble dans le même composant la colocation signifie que les définitions de données et les définitions de vue vivent ensemble la colocation a certains avantages nous devons simplement déclarer exactement les données dont nous avons besoin cela signifie qu'il est difficile de surcharger les données, ce qui améliore notre application, et qu'il est difficile de sous charger les données, ce qui empêche les erreurs dues à des données manquantes un autre concept important est le masquage des données, ce qui signifie que les composants ne peuvent accéder qu'aux données qu'ils ont demandées le masquage des données aide à prévenir les erreurs de dépendance de plus, les composants ne sont mis à jour que si les données qu'ils utilisent changent rendu de requête moderne nous vous recommandons de jeter un œil aux documents officiels du rendu de requête https //relay dev/docs/en/query renderer html#docsnav pour une meilleure compréhension basé sur les conteneurs de fragments, relay les lira et fera la demande au serveur en fonction des données qu'ils ont mais, comment cette requête se produit elle ? c'est là que le rendu de requête moderne entre en jeu le rendu de requête moderne est le composant qui lit les conteneurs de fragments, fait la demande au serveur et renvoie les données au composant chaque composant racine aura un rendu de requête moderne effectuant cette demande dans l'exemple ci dessus, nous avons une abstraction afin que nous ne passions que le fragment qui doit être lu et que tout le reste du travail soit effectué à l'intérieur de createqueryrenderermodern dans l'étape suivante du document, nous allons entrer dans le createqueryrenderermodern pour comprendre l'abstraction basée sur l'exemple pur ci dessus voici un exemple pur 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 } nous pouvons voir que le query renderer modern est un composant hoc en d'autres termes, enveloppez le composant qui possède le conteneur avec les données à demander, faites la demande avec l'environnement relay et renvoyez les données vers le bas en les passant au composant génération automatique de types travailler avec relay nous permet de construire une application de manière sécurisée en termes de types comme nous l'avons dit, chaque composant sera le propriétaire de ses données donc, lorsque nous exécutons le relay compiler, il lit chaque fragment de données et effectue une vérification avec votre schéma graphql si toutes les vérifications du compilateur relay sont correctes, les types seront générés dans un dossier appelé generated ce dossier est créé à l'intérieur des dossiers des composants racines voir l'exemple ci dessous vérification de la santé de l'api par le composant d'accueil 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8	 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16	 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); dossier généré contenant les types pour le composant d'accueil et les types générés après cela, nous devons juste importer le type dans le composant et le composer 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; le type est généré en flow, le langage principal pour les types de facebook mais, avec une bibliothèque, vous pouvez générer en typescript c'est le plus courant pour travailler avec react native en résumé, avec le compilateur relay, nous pouvons vérifier l'implémentation des données avant le temps d'exécution cela nous aide à prévenir les bugs et à améliorer la qualité de l'application et le temps de développement sur les requêtes, nous pouvons éviter les données dupliquées dans n composants différents il vérifie si certaines données sont dupliquées si c'est le cas, il supprimera les redondances cela réduira la taille de la charge utile des requêtes et augmentera encore plus les performances de l'application développement sur les requêtes, nous pouvons éviter les données dupliquées dans n composants différents il vérifie si certaines données sont dupliquées si c'est le cas, il supprimera les redondances cela réduira la taille de la charge utile des requêtes et augmentera encore plus les performances de l'application côté serveur back4app back4app génère une api graphql conforme à relay prête à l'emploi pour votre projet ce que back4app génère pour vous afin que vous n'ayez pas à construire vous même côté serveur infrastructure sur le tableau de bord back4app, vous pouvez créer un modèle de données complet avec des classes, des types et tout ce dont une base de données a besoin vous n'avez pas à vous soucier de la configuration et de la maintenance du serveur par vous même après avoir créé votre modèle de données back4app, nous générerons tout ce qui est nécessaire pour le consommer côté frontend en utilisant graphql jetons un œil au schéma de l'api graphql schéma le fichier de schéma est le cœur de toute application graphql il décrit l'ensemble du serveur disponible pour être utilisé côté client relay fonctionne en utilisant votre fichier de schéma pour confirmer la chaîne de requêtes et le fichier généré apparaîtra dans / généré /mycomponent graphql, comme nous l'avons dit dans le sujet génération automatique de types pour utiliser le compilateur relay, vous avez besoin d'un fichier de schéma graphql graphql ou json décrivant l'api de votre serveur graphql ces fichiers sont des représentations locales d'une source de vérité du serveur et ne sont pas modifiés chaque schéma de graphql peut être composé par un type de requête, un type de mutation et un type de souscription pour travailler avec un schéma consommé par relay côté frontend, vous avez besoin de certains concepts de base côté backend interface de nœud et connexion nous vous recommandons de lire sur l'interface de nœud et les connexions relay pour rendre cette lecture plus facile à abstraire interfaces de nœud l'interface de nœud implémente chaque type sur graphql pour aider à récupérer des données via l'id c'est une implémentation pour faciliter la récupération des données du serveur et leur mise à jour ainsi, chaque donnée de chaque type aura un id unique, appelé id unique global, étant implémenté par une interface de nœud avec le nœud, relay évite les requêtes imbriquées et facilite la récupération et la nouvelle récupération en l'utilisant c'est difficile à mettre en œuvre et nécessite un peu de travail, mais nous avons déjà construit cela pour vous ! pagination construit pour être composé, tant sur le front end que sur le back end, relay nous aidera également à composer nos données pour travailler avec la pagination, nous avons des connexions ces connexions implémentent le nœud du type que nous récupérons et ont un modèle standard, facilitant l'implémentation de la pagination côté serveur heureusement, encore une fois, nous avons déjà cela construit pour être utilisé sur le front end conclusion dans ce guide, nous avons introduit ce qu'est relay, ses principaux concepts et comment cela fonctionne nous avons également pu voir comment back4app automatise la création de serveurs graphql et nous fournit une base de données complète avec une api graphql à utiliser en résumé, tout le backend est déjà construit par back4app vous devez simplement créer vos types sur le tableau de bord et commencer à consommer en fonction du schéma généré dans la section suivante, nous expliquerons comment gérer ce schéma sur le front end et comment préparer votre environnement pour utiliser relay nous avons également un livre de recettes graphql https //www back4app com/docs/parse graphql/graphql getting started , vous pouvez l'utiliser pour vous aider à comprendre davantage de concepts sur notre tableau de bord