Stockage relationnel avec GraphQL dans Flutter

22 min

stocker des données relationnelles en utilisant graphql introduction dans les deux derniers tutoriels, nous avons effectué des requêtes et des mutations graphql sur une base de données back4app depuis notre projet d'application flutter nous utilisons graphql flutter https //pub dev/packages/graphql flutter/install comme notre client graphql car c'est un projet très robuste et largement utilisé pour ces tutoriels, nous avons utilisé un modèle de données très simple avec les types les plus courants pour nos classes back4app est une plateforme flexible qui vous permet de créer, stocker et interroger des données relationnelles dans ce tutoriel, nous allons plonger profondément dans cette capacité en vous montrant comment utiliser des relations et des pointeurs lors de la sauvegarde et de l'interrogation de données relationnelles sur le backend de back4app de plus, nous allons explorer d'autres types de données que back4app propose, comme geopointer et datetime objectifs à la fin de cet article, vous serez en mesure de créer/mettre à jour et supprimer des données relationnelles (en utilisant des pointeurs et des relations) créer/mettre à jour des geopointers créer/mettre à jour la date et l'heure prérequis pour compléter ce tutoriel, vous aurez besoin de assurez vous d'avoir lu les deux guides précédents commencer à partir du modèle https //www back4app com/docs/flutter/graphql/flutter graphql project with source code download et mutation graphql https //www back4app com/docs/flutter/graphql/flutter crud app example téléchargez le fichier du projet depuis github repo https //github com/templates back4app/flutter graphql/tree/complex mutations qui comprend le code précédent ainsi que la nouvelle interface graphique dont vous aurez besoin ouvrez le projet téléchargé sur un ide flutter comme vs code ou android studio un compte back4app qui peut être créé ici https //www back4app com/ connectez votre tutoriel à back4app comme dans les tutoriels précédents commencer à partir du modèle https //www back4app com/docs/flutter/graphql/flutter graphql project with source code download 1 configuration du back end dans notre projet précédent https //www back4app com/docs/flutter/flutter crud app example notre modèle de données était très simple avec juste une seule classe langue maintenant, nous allons le rendre plus complexe en ajoutant 2 nouvelles classes et en les reliant à langue fondateur avec format nom de la colonne description nom nom du fondateur de la langue nom de la colonne description nom nom de l'entreprise propriétaire date propriété date d'acquisition de la propriété par l'entreprise siège social emplacement du siège social de l'entreprise nous allons créer une relation un à un entre la classe language et la classe founder en utilisant des parse pointers, qui indiqueront le fondateur de la langue spécifique ensuite, nous créerons une relation un à plusieurs entre la classe language et la classe ownership en utilisant des parse relations qui indiqueront quelle organisation/entreprise possédait la langue, leur siège social et la date à laquelle ils ont acquis la propriété de la langue le modèle de données ressemblera à cela avant de passer à notre application, créons les classes et les données dans notre back end dont nous aurons besoin allez sur votre application back4app, puis allez au graphql playground en utilisant la mutation ci dessous, créez une classe founder où nous stockerons les noms des fondateurs de la langue 1 mutation createclass { 2 createclass(input { 3 name "founder" 4 schemafields { 5 addstrings \[{name "name"}] 6 } 7 }){ 8 class{ 9 schemafields{ 10 name 11 typename 12 } 13 } 14 } 15 } maintenant, peuplons notre classe avec quelques noms de fondateurs dans les étapes suivantes, nous utiliserons ces données pour créer de nouvelles langues pointant vers la classe des fondateurs utilisez la mutation ci dessous sur back4app graphql playground pour créer vos fondateurs 1 mutation createobject{ 2 createfounder(input {fields {name "james gosling"}}){ 3 founder{ 4 id 5 name 6 } 7 } 8 } ici, nous avons entré le nom du fondateur du langage de programmation java vous pouvez faire de même pour les autres aussi, mais pour l'instant, cela suffit pour notre guide créons la classe ownership où nous stockerons la propriété du langage, la date de fondation (date heure) et l'emplacement du siège du propriétaire (geopointer) plus tard, nous créerons la relation entre la classe langue et ownership procédez en exécutant le code ci dessous pour créer la classe 1 mutation createclass { 2 createclass(input { 3 name "ownership" 4 schemafields { 5 addstrings \[{name "name"}] 6 adddates \[{name "date owned"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } maintenant, remplissez la classe propriété en utilisant les mutations suivantes 1 mutation createobject{ 2 createownership(input {fields {name "sun microsystems"}}){ 3 ownership{ 4 id 5 name 6 } 7 } 8 }1 mutation createobject{ 2 createownership(input {fields {name "oracle"}}){ 3 ownership{ 4 id 5 name 6 } 7 } 8 } maintenant, rafraîchissez la page, allez à \propriété\ classe dans le navigateur de base de données sélectionnez le ajouter une nouvelle colonne dans le coin supérieur droit sélectionnez geopoint dans le premier menu déroulant et nommez le siège dans le deuxième champ de texte et laissez tout tel quel et appuyez sur le ajouter une colonne bouton ensuite, allez à votre \ langue\ classe sur le navigateur de base de données ajoutons les relations aux \propriété\ et aux \fondateur\ classes cliquez sur ajouter une nouvelle colonne puis choisissez le type de données pointeur et la classe cible \fondateur\ donnez à la colonne le même nom fondateur puis appuyez sur ajouter une colonne maintenant, répétez ce processus en ajoutant une nouvelle colonne appelée propriété en utilisant le type de données relation et en sélectionnant la classe \propriété\ maintenant, vous avez votre modèle de données prêt à être utilisé sur votre application flutter et à commencer à enregistrer et mettre à jour les données 2 création/ajout et suppression de pointeurs maintenant, vous devez télécharger le code de base du projet depuis notre repo github https //github com/templates back4app/flutter graphql/tree/complex mutations ouvert dans votre ide pour connecter votre projet à back4app, allez au graphql playground et ouvrez puis copiez les clés et l'url de l'api comme indiqué sur l'image ci dessous maintenant, collez les dans le \constants dart\ et exécutez votre projet exécutez l'application dans votre émulateur allez au m bouton flottant en bas cela nous amènera à la page où nous avons effectué des mutations simples ici, vous trouverez un bouton d'action flottant supplémentaire cm c'est le bouton que nous allons utiliser pour effectuer nos mutations graphql complexes cliquez sur le cm bouton, et vous verrez quatre autres boutons, un pour chaque opération que nous allons réaliser dans ce guide maintenant, ouvrez le \databaseutils dart\ fichier et faites défiler vers le bas jusqu'à la \addpointers()\ méthode ici, nous allons ajouter la logique pour ajouter des pointeurs nous allons désigner james gosling comme un fondateur du langage java donc, d'abord, vous devrez vous rendre sur votre backend back4app et copier les \objectid\ des deux fondateurs (james gosling) et du langage (java) mise à jour/création de pointeur vers les données procédez à notre application à l'intérieur du \databaseutils dart\ et à l'intérieur du \addpointers()\ méthode initialisez un \string addpointerquery\ où nous allons assigner la requête graphql pour ajouter des pointeurs comme suit 1 string addpointerquery= 2 ''' 3 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 4 updatelanguage(input {id \\$languageid, fields \\$founderid}) 5 { 6 language{ 7 objectid 8 } 9 } 10 } 11 '''; et initialisez \la variable finale\ pour assigner des variables, remarquez que nous prenons le \rowobjectid\ et \pointersid\ comme paramètres où \rowobjectid\ l'id de l'objet de la ligne à partir de laquelle nous allons pointer \pointersid\ l'id de l'objet à la ligne à pointer alors déclarez \la variable\ comme 1 final variable={ 2 "userid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "link" pointersid 6 } 7 } 8 }; maintenant, comme dans le dernier guide, nous allons initialiser le \graphqlclient\ et envoyer une requête avec l'aide de \queryoptions()\ et retourner son instance avec \queryresults()\ 1 graphqlconfiguration configuration = graphqlconfiguration(); 2 graphqlclient client = configuration clienttoquery(); 3 4 queryresult queryresult = await client query( 5 queryoptions(documentnode gql(addpointerquery), variables variable), 6 ); 7 return queryresult; voici à quoi devrait ressembler votre \addpointers()\ méthode 1 future\<queryresult> addpointers(string rowobjectid, string pointersid) async{ 2 print('addpointers'); 3 //code for add/update pointers 4 string addpointerquery= 5 ''' 6 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 7 updatelanguage(input {id \\$languageid, fields \\$founderid}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "userid" rowobjectid, 17 "founderid" { 18 "founder" { 19 "link" pointersid 20 } 21 } 22 }; 23 graphqlconfiguration configuration = graphqlconfiguration(); 24 graphqlclient client = configuration clienttoquery(); 25 26 queryresult queryresult = await client query( 27 queryoptions(documentnode gql(addpointerquery), variables variable), 28 ); 29 return queryresult; 30 } redémarrez votre application maintenant, allez au cm bouton sur la page de mutation et appuyez ensuite sur le bouton ajouter des pointeurs ici, entrez l' \objectid\ de la ligne où le pointeur doit être ajouté dans le premier champ de texte et \objectid\ de la ligne où il pointerait dans le deuxième champ de texte, puis appuyez sur terminé maintenant, vérifiez votre tableau de bord et vous devriez pouvoir voir une relation sous la colonne fondateur vous pourriez cliquer dessus, cela vous mènera à la ligne pointant vers la classe fondateur suppression du pointeur vers les données maintenant, passez à la méthode \deletepointers()\ où nous allons écrire la logique pour supprimer les relations pour supprimer les relations, vous devez simplement apporter de légers changements à la requête ci dessus, c'est à dire, dans les variables, changez simplement le \"link"\ par \"remove"\ donc, après avoir initialisé \la variable finale\ cela donnerait 1 final variable={ 2 "languageid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "remove" pointersid 6 } 7 } 8 }; tout le reste ressemblera exactement à \addpointers()\ donc, votre \deletepointers()\ ressemble à 1 future\<queryresult> deletepointers(string rowobjectid, string pointersid) async{ 2 print('deletepointers'); 3 //code for delete pointers 4 string removepointersquery= 5 ''' 6 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 7 updatelanguage(input {id \\$languageid, fields \\$founderid}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "languageid" rowobjectid, 17 "founderid" { 18 "founder" { 19 "remove" pointersid 20 } 21 } 22 }; 23 graphqlconfiguration configuration = graphqlconfiguration(); 24 graphqlclient client = configuration clienttoquery(); 25 26 queryresult queryresult = await client query( 27 queryoptions(documentnode gql(removepointersquery), variables variable), 28 ); 29 return queryresult; 30 31 } vous pouvez maintenant vous rendre sur votre tableau de bord back4app et voir que la colonne fondateur de la ligne spécifique a été supprimée 3 création/ajout et suppression de données date heure si vous vous souvenez, nous avons créé une classe ownership plus tôt dans étape 1 et stocké des données à l'intérieur ce sont les noms des entreprises qui possédaient le langage de programmation java alors d'abord, entrons les dates auxquelles elles ont acquis la propriété passons à \databaseutils dart\ et créons ou faisons défiler jusqu'à \adddatetime()\ fonction ici, nous allons écrire la logique pour ajouter le type de données date heure à notre classe initialisez \string adddatetimequery\ et assignez lui la requête pour créer des données date heure 1 string adddatetimequery= 2 ''' 3 mutation addtime(\\$rowid id!,\\$dateowned date!){ 4 updateownership(input {id \\$rowid, fields {date owned \\$dateowned}}) 5 { 6 ownership{ 7 objectid 8 } 9 } 10 } 11 '''; et la \variable finale\ comme 1 final variable={ 2 "rowid" rowobjectid, 3 "dateowned" datetime 4 }; maintenant, initialisez le \graphqlclient\ et passez la requête à travers le \queryoption()\ voici à quoi ressemblerait votre fonction 1 future\<queryresult> adddatetime(string rowobjectid, string datetime) async{ 2 print('adddatetime'); 3 //code for add/update date time 4 string adddatetimequery= 5 ''' 6 mutation addtime(\\$rowid id!,\\$dateowned date!){ 7 updateownership(input {id \\$rowid, fields {date owned \\$dateowned}}) 8 { 9 ownership{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "rowid" rowobjectid, 17 "dateowned" datetime 18 }; 19 graphqlconfiguration configuration = graphqlconfiguration(); 20 graphqlclient client = configuration clienttoquery(); 21 queryresult queryresult = await client query( 22 queryoptions(documentnode gql(adddatetimequery), variables variable), 23 ); 24 return queryresult; 25 } maintenant, redémarrez à chaud l'application et notez l' objectid de la ligne contenant sun microsystems dans la colonne name appuyez sur le ajouter date heure bouton maintenant, entrez l' objectid noté dans le premier champ de texte et “02 24 1982” au format mm dd yyyy à la date à laquelle java a été publié et appuyez sur le terminé bouton accédez à votre backend back4app et vous verrez la date sous la forme de 24 févr 1982 à 00 00 00 utc ce qui signifie qu'il a identifié le type de données comme un type de données date heure de même, vous pourriez ajouter “01 27 2010” pour le date owned pour oracle 4 ajout/mise à jour des données geopointer ajoutons des données geopointer pour localiser le siège des entreprises de la table de propriété procédez au fichier \database utils dart\ et faites défiler vers le bas jusqu'à la fonction \addgeopointers()\ maintenant, initialisez \string addgeopointers\ et assignez la requête respective 1 string addgeopointers= 2 ''' 3 mutation addgeopointer(\\$objectid id!,\\$latitude float!,\\$longitude float!){ 4 updateownership(input {id \\$objectid, fields { headquarters {latitude \\$latitude, longitude \\$longitude}}}) 5 { 6 ownership{ 7 objectid 8 } 9 } 10 } 11 '''; et \variable finale\ comme 1 final variable={ 2 "objectid" rowobjectid, 3 "latitude" double parse(latitude), 4 "longitude" double parse(longitude), 5 }; puisque \latitude\ et \longitude\ sont des valeurs de type double, nous devons les analyser de string à double avant de les envoyer initialisez le \grapqlclient\ et passez la requête avec \queryoption()\ voici à quoi ressemblerait votre fonction \addgeopointers()\ 1 future\<queryresult> addgeopointers(string rowobjectid, string latitude, string longitude) async{ 2 print('add geopointers'); 3 //code for add/update geopointers 4 string addgeopointers= 5 ''' 6 mutation addgeopointer(\\$objectid id!,\\$latitude float!,\\$longitude float!){ 7 updateownership(input {id \\$objectid, fields { headquarters {latitude \\$latitude, longitude \\$longitude}}}) 8 { 9 ownership{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "objectid" rowobjectid, 17 "latitude" double parse(latitude), 18 "longitude" double parse(longitude), 19 }; 20 graphqlconfiguration configuration = graphqlconfiguration(); 21 graphqlclient client = configuration clienttoquery(); 22 queryresult queryresult = await client query( 23 queryoptions(documentnode gql(addgeopointers), variables variable), 24 ); 25 return queryresult; 26 } redémarrez votre application et sélectionnez le ajouter des geopointers bouton entrez \37 35\ dans la première zone de texte et \121 95\ dans la deuxième zone de texte entrez l' objectid de la ligne avec sun microsystems comme nom et appuyez sur terminé maintenant, allez dans votre back4app backend et vous verrez (37 35, 121 95) qui sont les coordonnées du siège et indique qu'il les identifie comme geopointers 5 ajouter/mettre à jour et supprimer une relation dans les pointeurs, nous ne pouvons pointer qu'à une seule ligne, mais avec l'aide des relations, nous pouvons établir une connexion à plusieurs lignes alors faisons une relation de notre langue table à ces deux lignes pour propriété de la langue java ajouter/mettre à jour la relation procédez au \database utils dart\ fichier et procédez à \addrelation()\ fonction pour écrire la logique initialisez \string addrelationquery\ et assignez la requête pour la relation comme suit 1 string addrelationquery= 2 ''' 3 mutation addrelation(\\$objectid id!, \\$relationid ownershiprelationinput){ 4 updatelanguage(input {id \\$objectid, fields {ownership \\$relationid}}) 5 { 6 language{ 7 objectid 8 } 9 } 10 } 11 '''; et la \variable finale\ serait 1 final variable= { 2 "objectid" objectid, 3 "relationid" relationid 4 }; donc, après avoir initialisé le \graphqlclient\ et passé la requête comme auparavant, voici à quoi ressemblerait votre \database utils dart\ 1 future\<queryresult> addrelation(string rowobjectid, string relationid) async{ 2 //code for add/update relation 3 print('addrelation'); 4 string addrelationquery= 5 ''' 6 mutation addrelation(\\$objectid id!, \\$relationid ownershiprelationinput){ 7 updatelanguage(input {id \\$objectid, fields {ownership \\$relationid}}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable= { 16 "objectid" rowobjectid, 17 "relationid" { 18 "add" relationid 19 } 20 }; 21 graphqlconfiguration configuration = graphqlconfiguration(); 22 graphqlclient client = configuration clienttoquery(); 23 queryresult queryresult = await client query( 24 queryoptions(documentnode gql(addrelationquery), variables variable), 25 ); 26 print(queryresult); 27 return queryresult; 28 } succès votre application a enfin stocké des données relationnelles, datetime et geopointers sur back4app! conclusion dans ce guide, nous avons appris comment stocker des données relationnelles sur back4app en utilisant graphql dans un projet d'application flutter nous avons également travaillé avec d'autres mutations graphql comme geopointers et datetime, créant, mettant à jour et supprimant des données dans le prochain tutoriel, nous allons approfondir les requêtes pour notre application flutter ce guide a été écrit par asim junain, de hybrowlabs https //www back4app com/partners/software development company