Relay Query Renderer avec GraphQL sur Back4App

rendu de requête sur back4app introduction dans notre précédent guide , nous avons appris à préparer notre environnement relay maintenant, vous êtes prêt à commencer à développer votre application react native dans ce guide, vous apprendrez comment effectuer votre première requête sur back4app nous allons plonger dans le rendu de requête relay, comprendre ses principaux principes et l'utiliser pour consommer vos premières données de back4app objectifs obtenez un aperçu du rendu de requête relay; effectuez une requête sur l'api graphql de back4app depuis une application react native utilisant relay; prérequis application créée sur le tableau de bord back4app application react native avec l'environnement relay configuré par les documents précédents lisez sur les nœuds relay et les connexions qu'est ce que le rendu de requête? tout comme react construit un arbre de composants, relay construit un arbre de composants de données cela signifie que chaque composant de l'application sera le propriétaire de ses données de fragment le fragment contiendra les informations nécessaires pour le rendre à l'écran et relay s'assure que ces données sont disponibles avant de rendre le composant en gérant toute cette approche, le rendu de requête est un composant racine nécessaire pour composer ces fragments et préparer la requête à être récupérée depuis notre back end pourquoi comprendre le rendu de requête? comprendre l'utilisation du rendu de requête est important pour abstraire votre application de différentes manières une bonne abstraction de code pourrait éviter des heures de travail, des erreurs, du temps de débogage, etc comment fonctionne le rendu avec les api back4app dans le dernier tutoriel, nous avons préparé le fichier d'environnement relay, qui spécifie les informations de connexion à back4app en utilisant cette configuration, relay s'occupera de la communication avec les api back4app vous n'avez pas à vous soucier de la connexion concentrez vous simplement sur la construction des composants de données 1 création d'une classe sur le tableau de bord back4app créons votre première classe et peuplons la avec quelques objets en utilisant la console graphql de back4app la classe person a 2 champs name qui est une chaîne de caractères et salary qui est un entier allez dans le tableau de bord >core >console graphql et utilisez le code ci dessous 1 mutation createclass { 2 createclass(input { 3 name "person" 4 schemafields { 5 addstrings \[{name "name"}] 6 addnumbers \[{name "salary"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } vous verrez le résultat ci dessous création de classe maintenant, créons des objets à l'intérieur de cette classe allez au guide de mutation de création d'objet guide https //www back4app com/docs/parse graphql/graphql mutation create object#mutation generic , et voyez comment gérer ce cas assurez vous d'utiliser la dernière version de parse server afin d'utiliser la notation api graphql la plus récente disponible sur back4app 1 mutation createobject{ 2 createhero(input {fields {name "allana foley", salary 1000}}){ 3 person { 4 id 5 name 6 salary 7 } 8 } 9 } création d'objet maintenant, la classe person est créée et a un champ nom et un champ salaire après avoir créé une nouvelle classe, back4app génère automatiquement toutes les ressources nécessaires pour utiliser le back end en toute sécurité un exemple est la liste des objets back4app a déjà créé les connexions nécessaires pour interroger la liste des personnes people pour mieux comprendre, allez dans le playground, rafraîchissez et ouvrez l'onglet docs et cherchez people back4app a généré le champ de connexion vous pouvez également interroger la classe personne comme une liste notez que le champ query people est un personconnection relay consommera le champ de connexion pour rendre une liste des objets de la personne document du champ person et les documents du champ de connexion people (person) 2 mise à jour du schéma il est important de se rappeler que si une nouvelle classe entre dans votre application, il sera nécessaire de mettre à jour le schéma à l'intérieur de la racine de l'application react native si nécessaire, allez dans télécharger le schéma docs et répétez les étapes pour mettre à jour le schéma 3 premier exemple de conteneur de fragment avant de continuer le tutoriel, laissez nous vous présenter le conteneur de fragment créons un composant qui sera le propriétaire des informations de la personne ce composant contiendra le nom et le salaire de la personne ici, vous pouvez demander n'importe quel champ de personne pour construire votre composant maintenant, nous allons procéder avec ces deux champs créez un fichier et nommez le personcard js personcard js à l'intérieur, créons un simple composant fonctionnel 1 import react from 'react'; 2&#x9; 3 const personcard = () => { 4 return ( 5 \<div> 6 7 \</div> 8 ); 9 }; remplacez la ligne d'exportation par le code ci dessous 1 export default createfragmentcontainer(personcard, { 2 person graphql` 3 fragment personcard person on person { 4 id 5 name 6 salary 7 } 8 `, 9 }); le code ci dessus créera un fragment d'une personne qui demande uniquement l'id, le nom et le salaire terminez la mise à jour du reste du composant avec le code suivant 1 const personcard = ({person}) => { 2 return ( 3 \<view> 4 \<text>name {person name}\</text> 5 \<text>salary {person salary}\</text> 6 \</view> 7 ); 8 }; le résultat final devrait ressembler à ceci 1 import react from "react"; 2 import { createfragmentcontainer, graphql } from "react relay"; 3 import { view, text } from "react native"; 4&#x9; 5 const personcard = ({person}) => { 6 return ( 7 \<view> 8 \<text>name {person name}\</text> 9 \<text>salary {person salary}\</text> 10 \</view> 11 ); 12 }; 13&#x9; 14 export default createfragmentcontainer(personcard, { 15 person graphql` 16 fragment personcard person on person { 17 id 18 name 19 salary 20 } 21 `, 22 }); 4 création du query renderer l'étape suivante consiste à créer le query renderer pour votre liste d'objets le query renderer est un composant racine pour récupérer les composants de données et les préparer à récupérer des données du backend vous apprendrez comment récupérer des données pour une classe person sur back4app 4 1 création du fichier créez un nouveau fichier et nommez le personrenderer js personrenderer js copiez le code ci dessous et collez le dans le fichier personrenderer 1 const personrenderer = () => { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql``} 6 variables={null} 7 render={({error, props}) => { 8 if (error) { 9 return ( 10 \<view> 11 \<text>{error message}\</text> 12 \</view> 13 ); 14 } else if (props) { 15 // @todo here will be implement the person card for each item from result 16 } 17 return ( 18 \<view> 19 \<text>loading\</text> 20 \</view> 21 ); 22 }} 23 /> 24 ); 25 }; 26&#x9; 27 export default personrenderer; 4 2 comprendre les props de queryrenderer commençons par un query renderer avec leurs props vides graphql, variables et render étape par étape, vous allez implémenter chacun d'eux de manière incrémentale tout d'abord, votre application doit informer la requête pour le query renderer ici, notre application va consommer une liste de personnes dans les props de la requête, collez le code suivant 1 graphql` 2 query personrendererquery { 3 people { 4 edges { 5 node { 6 personcard person 7 } 8 } 9 } 10 }` le graphql provient de react relay et implémente la requête sous forme de chaîne il est important de comprendre les connexions edges et node la requête ci dessus consomme une connexion de nœuds de personnes depuis le serveur back4app chaque fois que vous créez une nouvelle classe, elle sera suivie d'une connexion de nœuds variables lorsque cela est nécessaire, le renderer de requête consommera des variables un bon exemple lorsque l'application demande une requête pour une personne par id comme ce n'est pas le cas en ce moment, passons par null dans les props de variables remplir la carte de la personne cette requête renverra une liste de personnes le renderer de requête s'assure que les données seront disponibles pour le rendu si ce n'est pas le cas, une erreur sera déclenchée les props responsables de cela sont le render remplissez les props de rendu avec le code suivant 1 render={({error, props}) => { 2 if (error) { 3 return ( 4 \<view> 5 \<text>{error message}\</text> 6 \</view> 7 ); 8 } else if (props) { 9 return props people edges map(({node}) => \<personcard person={node} />); 10 } 11 return ( 12 \<view> 13 \<text>loading\</text> 14 \</view> 15 ); 16 }} remplacez le todo commenté par une carte javascript pour rendre une carte de personne pour chaque résultat de la liste comme dit, le renderer de requête prend la responsabilité de rendre les données disponibles uniquement lorsqu'elles sont prêtes d'ici là, un message de chargement sera affiché si une erreur se produit, elle sera affichée à l'écran empêchant un plantage inattendu de l'application enfin, améliorons le rendu de la personne en remplaçant le map par une nouvelle fonction mettez le avant le query renderer 1 const renderpersons = (people) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; et le résultat final devrait ressembler à 1 import react from "react"; 2 import { queryrenderer } from "react relay"; 3 import environment from " /relay/environment"; 4 import personcard from " /personcard"; 5 import { view, text } from "react native"; 6&#x9; 7 const personrenderer = () => { 8 const renderpersons = (people) => { 9 return people edges map(({node}) => \<personcard person={node} />); 10 }; 11&#x9; 12 return ( 13 \<queryrenderer 14 environment={environment} 15 query={graphql` 16 query personrendererquery { 17 people { 18 edges { 19 node { 20 personcard person 21 } 22 } 23 } 24 } 25 `} 26 variables={null} 27 render={({error, props}) => { 28 if (error) { 29 return ( 30 \<view> 31 \<text>{error message}\</text> 32 \</view> 33 ); 34 } else if (props) { 35 return renderpersons(props people); 36 } 37 return ( 38 \<view> 39 \<text>loading\</text> 40 \</view> 41 ); 42 }} 43 /> 44 ); 45 }; 46&#x9; 47 export default personrenderer; 5 faire votre première requête il est maintenant temps de récupérer la personne en utilisant le personrenderer si tout va bien, votre application a maintenant deux nouveaux composants personrenderer et personcard avant de démarrer l'application, le relay a besoin du relay compiler pour s'exécuter et générer les types de composants pour cela, exécutez dans votre terminal dans app js, ajoutez le code suivant 1 import react from 'react'; 2 import { safeareaview, statusbar, view, text } from 'react native'; 3&#x9; 4 import providers from ' /providers'; 5 import personrenderer from ' /components/home/person/personrenderer'; 6&#x9; 7 const app = () => { 8 return ( 9 \<providers> 10 \<statusbar barstyle="dark content" /> 11 \<safeareaview> 12 \<view 13 style={ { 14 flexdirection 'column', 15 justifycontent 'center', 16 alignitems 'center', 17 margintop 100, 18 } }> 19 \<text style={ {fontweight "bold", textalign "center"} }> 20 back4app react native relay query renderer list example 21 \</text> 22 \<personrenderer /> 23 \</view> 24 \</safeareaview> 25 \</providers> 26 ); 27 }; 28&#x9; 29 export default app; le code de app js provient à l'origine de create react native app il a ajouté une vue avec un style pour centrer le contenu à l'écran avec une marge de 10px depuis le haut à l'intérieur, il y a un texte avec une étiquette pour donner un peu de contexte pour l'impression et le personrenderer pour afficher la liste des personnes vous devez obtenir le résultat suivant rendu dans notre application back4app react native, nous importons le personrenderer directement dans le app js app js comme le personrenderer est un composant racine et a son queryrenderer, la personne doit être affichée sans aucune erreur 6 typage des composants cette étape a du sens pour une application qui fonctionne avec typescript si votre application n'utilise pas typescript, allez y l'un des pouvoirs du relay compiler est de générer les types à partir de chaque composant de données typons le personrenderer et le personcard pour rendre l'application plus puissante typage du personrenderer tapez l'argument de la fonction renderperson people people dans le personrenderer 1 const renderpersons = (people personrendererquery\['response']\['people']) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; importez le personrendererquery personrendererquery type depuis le generated generated dossier créé à l'intérieur du même dossier que le personrenderer typage du personcard allez y pour le personcard, créez un nouvel objet de type et nommez le personcardprops 1 type personcardprops = {}; importez le personcard person personcard person type depuis les generated generated dossiers 1 import {personcard person} from ' / generated /personcard person graphql'; ajoutez la personne à l'intérieur du type personcardprops 1 type personcardprops = { 2 person personcard person; 3 }; sur les arguments props de personcard, tapez le composant avec le personcardprops personcardprops le résultat final des deux composants devrait ressembler à personrenderer 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import {environment} from ' / / /relay'; 4 import personcard from ' /personcard'; 5 import {view, text} from 'react native'; 6 import {personrendererquery} from ' / generated /personrendererquery graphql'; 7&#x9; 8 const personrenderer = () => { 9 const renderpersons = (people personrendererquery\['response']\['people']) => { 10 return people edges map(({node}) => \<personcard person={node} />); 11 }; 12&#x9; 13 return ( 14 \<queryrenderer 15 environment={environment} 16 query={graphql` 17 query personrendererquery { 18 people { 19 edges { 20 node { 21 personcard person 22 } 23 } 24 } 25 } 26 `} 27 variables={null} 28 render={({error, props}) => { 29 if (error) { 30 return ( 31 \<view> 32 \<text>{error message}\</text> 33 \</view> 34 ); 35 } else if (props) { 36 return renderpersons(props people); 37 } 38 return ( 39 \<view> 40 \<text>loading\</text> 41 \</view> 42 ); 43 }} 44 /> 45 ); 46 }; 47&#x9; 48 export default personrenderer; personcard 1 import react from 'react'; 2&#x9; 3 import {createfragmentcontainer, graphql} from 'react relay'; 4&#x9; 5 import {view, text} from 'react native'; 6 import {personcard person} from ' / generated /personcard person graphql'; 7&#x9; 8 type personcardprops = { 9 person personcard person; 10 }; 11&#x9; 12 const personcard = ({person} personcardprops) => { 13 return ( 14 \<view> 15 \<text>name {person name}\</text> 16 \<text>salary {person salary}\</text> 17 \</view> 18 ); 19 }; 20&#x9; 21 export default createfragmentcontainer(personcard, { 22 person graphql` 23 fragment personcard person on person { 24 id 25 name 26 salary 27 } 28 `, 29 }); conclusion le résultat final de queryrenderer a démontré comment l'application peut être abstraite l'application peut afficher la personne à l'intérieur du query renderer comme le personcard a plus de composants, cela ne change pas la façon dont le query renderer a été construit le personrenderer a été construit pour montrer comment une requête peut être effectuée en étapes faciles, combinée avec la puissance du serveur back4app dans le prochain guide, vous apprendrez comment récupérer un objet person spécifique et afficher ses attributs