Configuration Environment Relay avec React Native pour Développeurs

configuration de relay introduction dans notre précédent guide, nous avons appris comment obtenir le fichier de schéma, le sauvegarder et le coller dans notre application react native dans ce guide, nous allons installer relay et préparer notre environnement pour commencer à développer une application react native objectif pour configurer relay, nous devrons d'abord installer relay sur notre application react native, puis préparer l'environnement relay prérequis nous recommandons une compréhension de base des sujets suivants relay modern , babel js , javascript (ecs5 et ecs6), graphql js readme un projet react native de base fonctionnant sur votre environnement local un fichier schema graphql téléchargé sur votre projet react native dans les étapes suivantes, vous trouverez une installation de base de relay axée sur une application react native si vous souhaitez approfondir ce sujet, veuillez visiter la documentation officielle 1 installation de l'api officielle de react relay commençons par installer la bibliothèque officielle react relay cette bibliothèque est l'api officielle de l'équipe relay et contient tout ce qu'il faut pour construire les fragments de données important d'installer relay modern pour ce tutoriel avec 10 0 0 comme version à partir de la version 11 0 0, l'approche pour utiliser react relay est différente en raison des nouveaux hooks 2 configuration de relay la configuration de relay contient les informations nécessaires pour le compilateur relay à l'intérieur, nous spécifierons où le compilateur relay peut trouver le fichier schema file, quels dossiers doivent être consultés, et d'autres configurations commençons par installer le package relay config remarque ce tutoriel utilise yarn comme client de package, mais vous pouvez utiliser npm de toute façon maintenant, créons le fichier de configuration relay où relay trouvera le chemin du schéma créez un nouveau fichier à la racine de l'application nommez le relay config js ouvrez le fichier et enregistrez le avec les informations ci dessous 3 plugin babel relay pour convertir les artefacts graphql à l'exécution, nous devons installer un plugin babel maintenant, dans votre fichier de configuration babel, vous devez ajouter le plugin relay babel dans le tableau des plugins le fichier final babel config js ressemblera à ceci dans les projets expo, suivez la même approche en ajoutant le tableau des plugins à l'intérieur de babel config js juste après le tableau des presets le résultat final devrait ressembler à 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 }; le plugin relay doit s'exécuter avant les autres plugins pour une transformation correcte des artefacts graphql consultez la documentation du plugin babel pour en savoir plus 4 compilateur relay depuis notre première documentation, nous avons expliqué le compilateur relay pour que notre application compile nos fragments de données, nous allons l'installer maintenant ouvrons notre package json et configurons une nouvelle commande de script pour exécuter le compilateur relay watchman est responsable de la configuration de la nécessité pour le compilateur relay de surveiller les changements dans les fragments relay si vrai, il se réexécutera à chaque changement si faux, il s'exécutera après que vous ayez exécuté le yarn relay par lui même le fichier package json devrait ressembler à ceci 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 exécuter yarn relay enfin, avec les étapes d'installation terminées, nous pouvons exécuter la commande yarn relay à la racine de l'application puisque nous ne construisons aucun fragment de données, le relay compiler renvoie tout fichier modifié bien, votre application a déjà relay installé et configuré maintenant, mettons en œuvre notre environnement pour commencer à faire des requêtes au serveur back4app 6 préparation de l'environnement de récupération l'environnement relay définit comment la couche réseau gérera les requêtes et comment le relay store doit fonctionner le store contrôle nos données sur le frontend en les mettant à jour uniquement lorsqu'elles changent et en les mettant en cache un environnement simple aura besoin d'au moins la couche réseau et le store couche réseau le couche réseau est facile à construire il gérera chaque requête de notre application, effectuant des requêtes, des mutations et des abonnements (si votre application le prend en charge) en le consommant, le relay saura comment préparer les appels pour accéder au serveur de l'application magasin relay le magasin est responsable de la mise à jour des données de notre application côté client chaque requête peut avoir une fonction de mise à jour à l'intérieur de la fonction de mise à jour, vous pouvez utiliser une liste de fonctions d'aide pour mettre à jour vos données avec l'interface du magasin afin de préparer l'environnement relay, nous devons créer un fichier de configuration d'environnement le fichier sera lu par le rendu de requête chaque fois qu'une requête est effectuée préparons ce fichier 6 1 créer le fichier d'environnement nous suivrons le principe de conception de la bibliothèque relay, le concept de colocation pour commencer, créons un dossier à la racine de l'application et nommons le relay à l'intérieur, créez un fichier et nommez le environment js environment js 6 2 configurer l'environnement après cela, importez depuis relay runtime relay runtime tout ce dont nous avons besoin 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 configurer la couche réseau la couche réseau a besoin d'une fonction pour récupérer les données du serveur tout d'abord, créons une fonction de récupération responsable d'effectuer une requête 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 }; nous enveloppons la requête pour le backend par un try catch en cas d'erreur, une exception sera levée et l'application la gérera sinon, le comportement normal suivra et renverra les données dans la couche réseau, c'est également là que vous configurez votre connexion au serveur d'application chez back4app, nous utilisons deux clés principales l'id d'application et la clé client les clés doivent être renseignées dans les en têtes ainsi que l'url du serveur pour obtenir ces informations, allez dans votre application et cliquez sur api console > menu graphql avec la console graphql ouverte, vous verrez l'url en haut, et en bas les clés d'application nécessaires remplacez les informations de la fonction de récupération par les vôtres n'oubliez pas de ne pas exposer la clé maître 6 4 exporter l'environnement le relay runtime fournit les fonctions nécessaires pour consommer la couche réseau et crée le magasin enfin, combinons les dans un nouvel environnement et exportons le vers notre application utilisez le code ci dessous dans votre fichier d'environnement 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; le fichier d'environnement final ressemblera à ceci 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; conclusion génial maintenant que le relay et l'environnement relay sont installés et configurés, il est temps de commencer à consommer l'api graphql de back4app donc, la prochaine étape est de créer notre premier query renderer et de le communiquer à notre serveur