Advanced Guides
Compatibilité GraphQL de Parse Server avec Relay
15 min
compatibilité relay introduction l'api graphql de parse server suit les dernières normes actuellement disponibles pour des api hautement évolutives et des projets front end ambitieux l'équipe open source de parse a choisi de suivre la spécification du serveur relay https //relay dev/docs/en/graphql server specification relay est un framework javascript pour construire des applications react pilotées par des données, alimentées par graphql, conçu dès le départ pour être facile à utiliser, extensible et, surtout, performant relay y parvient grâce à des requêtes statiques et à la génération de code à l'avance à partir de parse 3 10, une compatibilité totale avec relay https //relay dev/docs/en/graphql server specification est mise en œuvre ce document vous guidera à travers ces mises en œuvre prérequis pour commencer ce tutoriel, vous aurez besoin de une application créée sur back4app voir le tutoriel créer une nouvelle application pour apprendre à créer une application sur back4app 1 créer une nouvelle application back4app tout d'abord, il est nécessaire de s'assurer que vous avez une application existante créée sur back4app cependant, si vous êtes un nouvel utilisateur, vous pouvez consulter ce tutoriel https //www back4app com/docs/get started/new parse app pour apprendre à en créer une 2 créer quelques classes dans votre nouvelle application, allez dans le navigateur de base de données navigateur de base de données et cliquez sur le créer une classe créer une classe bouton choisissez de créer une classe personnalisée classe personnalisée et donnez lui un nom en suivant le schéma d'exemple relay https //relay dev/docs/en/graphql server specification#schema , j'ai créé les classes faction, ship, et d'autres comme décrit avec des propriétés correspondantes, mais vous pouvez créer vos propres classes pour suivre cette documentation il suffit de modifier vos requêtes et mutations en conséquence n'oubliez pas que par convention, les classes commencent par une lettre majuscule, sont en camelcase, et ne contiennent pas de caractères spéciaux tels que des espaces et des symboles cliquez sur créer une classe créer une classe lorsque vous avez terminé 3 console graphql avec vos classes et propriétés créées, vous pouvez aller à la console api console api puis console graphql console graphql pour exécuter vos requêtes et mutations 4 requêtes notre toute première requête récupérera un objet basé sur son objectid objectid (à ne pas confondre avec id id ) parse a évolué et maintenant les requêtes supportent à la fois objectid objectid , anciennement connu sous le nom de id id dans les versions précédentes, mais supporte maintenant aussi global id global id , connu sous le nom de id id , qui fait référence à l'id global de relay et a un format plus long car il contient le nom de la classe crypté exemple de objectid objectid eat0ddk09v exemple de id id (a k a id global) rmfjdglvbjpfyvqwzerrmdl2 faisons notre toute première requête récupérant un objet par son objectid objectid 1 query rebelsquery { 2 faction(id "eat0ddk09v") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } cela va produire 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } maintenant, changeons cela pour le globalid pour relay 1 query rebelsquery { 2 faction(id "rmfjdglvbjpfyvqwzerrmdl2") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } et remarquez que le résultat sera le même 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } cela se produit parce que le global id global id fonctionne, comme son nom l'indique, globalement, et a le nom de classe crypté en lui, donc parse sait où chercher cet id 5 re fetching aussi avec le global id global id vous pouvez précharger comme la spécification de relay https //relay dev/docs/en/graphql server specification#object identification comme suit 1 query refetchquery{ 2 node(id "rmfjdglvbjpfyvqwzerrmdl2"){ 3 id on faction{ 4 name 5 } 6 } 7 } ce qui donnera 1 { 2 "data" { 3 "node" { 4 "id" "rmfjdglvbjpfyvqwzerrmdl2", 5 "name" "galactic empire" 6 } 7 } 8 } 6 connexions les connexions de relay https //relay dev/docs/en/graphql server specification#connections fonctionnent de la même manière dans parse avec graphql, donc, si vous devez récupérer les vaisseaux des rebelles 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships{ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } ce qui donnera 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "node" { 10 "name" "y wing" 11 } 12 }, 13 { 14 "node" { 15 "name" "x wing" 16 } 17 } 18 ] 19 } 20 } 21 } 22 } vous pouvez également récupérer les vaisseaux n 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1){ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } ce qui donne 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 cursor 10 "node" { 11 "name" "y wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } ou récupérez le n ième vaisseau après un vaisseau spécifique, en utilisant sa valeur de curseur 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1 after "yxjyyxljb25uzwn0aw9uoja"){ #cursor for the y wing ship 6 edges{ 7 cursor 8 node{ 9 name 10 } 11 } 12 } 13 } 14 } qui récupérera 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "cursor" "yxjyyxljb25uzwn0aw9uoje=", 10 "node" { 11 "name" "x wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } 7 mutations nous pouvons également utiliser des mutations compatibles avec les mutations de relay https //relay dev/docs/en/graphql server specification#mutations créons un nouveau vaisseau vaisseau 1 mutation createbwing($input createshipinput!){ 2 createship(input $input){ 3 ship{ 4 id 5 name 6 } 7 } 8 } cela nécessite la variable de requête suivante 1 { 2 "input" { 3 "fields" { 4 "name" "b wing" 5 } 6 } 7 } et renverra le identifiant global identifiant global et nom nom comme spécifié dans la mutation 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }