Relationale Daten in GraphQL für Flutter speichern

relationale daten mit graphql speichern einführung in den letzten beiden tutorials haben wir graphql abfragen und mutationen auf einer back4app datenbank aus unserem flutter app projekt durchgeführt wir verwenden graphql flutter https //pub dev/packages/graphql flutter/install als unseren graphql client, da dies ein sehr robustes und weit verbreitetes projekt ist für diese tutorials haben wir ein sehr einfaches datenmodell mit den gängigsten typen für unsere klassen verwendet back4app ist eine flexible plattform, die es ihnen ermöglicht, relationale daten zu erstellen, zu speichern und abzufragen in diesem tutorial werden wir tief in diese fähigkeit eintauchen, indem wir ihnen zeigen, wie sie beziehungen und zeiger verwenden, wenn sie relationale daten im back4app backend speichern und abfragen außerdem werden wir andere datentypen erkunden, die back4app anbietet, wie geopointer und datetime ziele am ende dieses artikels werden sie in der lage sein relationale daten erstellen/aktualisieren und löschen (unter verwendung von zeigern und beziehungen) geopointer erstellen/aktualisieren datum uhrzeit erstellen/aktualisieren voraussetzungen um dieses tutorial abzuschließen, benötigen sie stellen sie sicher, dass sie die vorherigen beiden anleitungen gelesen haben starten sie von der vorlage und graphql mutation laden sie die projektdatei von github repo herunter, die den vorherigen code sowie die neue gui enthält, die sie benötigen öffnen sie das heruntergeladene projekt in einer flutter ide wie vs code oder android studio ein back4app konto, das sie hier verbinden sie ihr tutorial mit back4app gemäß den vorherigen tutorials starten sie von der vorlage 1 backend einrichten in unserem vorherigen projekt https //www back4app com/docs/flutter/flutter crud app example war unser datenmodell sehr einfach mit nur einer einzigen klasse sprache jetzt werden wir es komplexer machen, indem wir 2 neue klassen hinzufügen und sie mit sprache verknüpfen gründer mit format spaltenname beschreibung name name des gründers der sprache spaltenname beschreibung name name des eigentümers der firma datum besessen datum, an dem das eigentum von der firma erlangt wurde hauptsitz standort des hauptsitzes der firma wir werden eine eins zu eins beziehung zwischen der klasse language und der klasse founder erstellen, die den gründer der spezifischen sprache angibt dann erstellen wir eine eins zu viele beziehung zwischen der klasse language und der klasse ownership unter verwendung von parse relations, die angeben, welche organisation/firma die sprache besaß, deren hauptsitz und das datum, an dem sie das eigentum an der sprache erworben haben das datenmodell wird so aussehen bevor wir zu unserer app übergehen, lassen sie uns die klassen und daten in unserem backend erstellen, die wir benötigen gehen sie zu ihrer back4app app und dann zum graphql playground verwenden sie die folgende mutation, um eine klasse founder zu erstellen, in der wir die namen der gründer der sprache speichern 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 } jetzt lassen sie uns unsere klasse mit einigen namen von gründern füllen in den folgenden schritten werden wir diese daten verwenden, um neue sprachen zu erstellen, die auf die klasse der gründer verweisen verwenden sie die folgende mutation im back4app graphql playground, um ihre gründer zu erstellen 1 mutation createobject{ 2 createfounder(input {fields {name "james gosling"}}){ 3 founder{ 4 id 5 name 6 } 7 } 8 } hier haben wir den namen des gründers der programmiersprache java eingegeben sie können dies auch für andere tun, aber im moment ist das genug für unseren leitfaden lassen sie uns die ownership klasse erstellen, in der wir den sprachbesitz, das gründungsdatum (datum zeit) und den standort des hauptsitzes des eigentümers (geopointer) speichern werden später werden wir die beziehung zwischen der sprachklasse und ownership erstellen fahren sie fort, indem sie den folgenden code ausführen, um die klasse zu erstellen 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 } jetzt füllen sie die ownership klasse mit den folgenden mutationen aus 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 } jetzt aktualisieren sie die seite, gehen sie zur ownership ownership klasse im datenbankbrowser wählen sie die neue spalte hinzufügen aus der oberen rechten ecke wählen sie geopoint aus dem ersten dropdown menü und benennen sie es hauptsitz im zweiten textfeld lassen sie alles wie es ist und drücken sie die spalte hinzufügen schaltfläche gehe dann zu deinem sprache sprache kurs im datenbankbrowser lass uns die beziehungen zu eigentum eigentum und gründer gründer klassen hinzufügen klicke auf neue spalte hinzufügen und wähle dann den datentyp zeiger und die zielklasse gründer gründer gib der spalte denselben namen gründer und drücke dann spalte hinzufügen wiederhole nun diesen prozess, indem du eine neue spalte namens eigentum hinzufügst, den datentyp beziehung wählst und die klasse eigentum eigentum auswählst jetzt hast du dein datenmodell bereit, um es in deiner flutter app zu verwenden und um daten zu speichern und zu aktualisieren 2 erstellen/hinzufügen und löschen von zeigern jetzt müssen sie den projekt boilerplate code von unserem github repo https //github com/templates back4app/flutter graphql/tree/complex mutations herunterladen und in ihrer ide öffnen um ihr projekt mit back4app zu verbinden, gehen sie zum graphql playground und kopieren sie die schlüssel und die api url, wie im bild unten gezeigt fügen sie sie jetzt in die constants dart constants dart ein und führen sie ihr projekt aus führen sie die anwendung in ihrem emulator aus gehen sie zu dem m schwebenden button am unteren rand das bringt uns zu der seite, auf der wir einfache mutationen durchgeführt haben hier finden sie einen zusätzlichen schwebenden aktionsbutton cm das ist der button, den wir verwenden werden, um unsere komplexen graphql mutationen durchzuführen klicken sie auf den cm button, und sie werden vier weitere buttons sehen, einen für jede operation, die wir in diesem leitfaden durchführen werden öffnen sie jetzt die databaseutils dart databaseutils dart datei und scrollen sie nach unten zur addpointers() addpointers() methode hier werden wir die logik zum hinzufügen von zeigern hinzufügen wir werden james gosling als gründer der programmiersprache java benennen zuerst müssen sie zu ihrem back4app backend gehen und die objectid objectid von beiden, dem gründer (james gosling) und der sprache (java), kopieren aktualisieren/erstellen eines zeigers auf daten fahren sie mit unserer app in der databaseutils dart databaseutils dart und innerhalb der addpointers() addpointers() methode initialisieren sie eine string addpointerquery string addpointerquery wo wir die graphql abfrage zum hinzufügen von pointern wie folgt zuweisen 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 '''; und initialisieren sie final variable final variable um variablen zuzuweisen, beachten sie, dass wir die rowobjectid rowobjectid und pointersid pointersid als parameter nehmen, wo rowobjectid rowobjectid die objekt id der zeile, von der aus wir zeigen werden pointersid pointersid die objekt id der zeile, auf die gezeigt werden soll deklarieren sie also variable variable als 1 final variable={ 2 "userid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "link" pointersid 6 } 7 } 8 }; jetzt, wie im letzten leitfaden, werden wir den graphqlclient graphqlclient initialisieren und die abfrage mit hilfe von queryoptions() queryoptions() senden und seine instanz mit queryresults() 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; so sollte ihre addpointers() addpointers() methode aussehen 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 } starten sie ihre app jetzt neu, gehen sie zum cm button auf der mutationsseite und drücken sie dann den add pointers button geben sie hier die zeilen objectid objectid ein, wo der pointer im ersten textfeld hinzugefügt werden muss, und die objectid objectid der zeile, auf die er im zweiten textfeld zeigen würde, und drücken sie dann auf fertig überprüfen sie jetzt ihr dashboard, und sie sollten in der founder spalte eine beziehung sehen sie können darauf klicken, wo es sie zur zeile führt, die auf die founder klasse zeigt zeiger auf daten löschen fahren sie nun mit der methode deletepointers() deletepointers() fort, in der wir die logik zum löschen von beziehungen schreiben werden um beziehungen zu löschen, müssen sie nur geringfügige änderungen an der obigen abfrage vornehmen, das heißt, ändern sie in den variablen einfach das "link" "link" in "remove" "remove" nachdem sie die final variable final variable initialisiert haben, würde es so aussehen 1 final variable={ 2 "languageid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "remove" pointersid 6 } 7 } 8 }; alles andere wird genau gleich aussehen wie die addpointers() addpointers() ihre deletepointers() deletepointers() methode sieht so aus 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 } sie können jetzt zu ihrem back4app dashboard gehen und sehen, dass die gründer spalte der spezifischen zeile gelöscht wurde 3 erstellen/hinzufügen und löschen von datum zeit daten wenn sie sich erinnern, haben wir eine klasse ownership früher in schritt 1 erstellt und einige daten darin gespeichert dies sind die namen von unternehmen, die die programmiersprache java besaßen lassen sie uns also zuerst die daten eingeben, an denen sie das eigentum erworben haben lassen sie uns zu databaseutils dart databaseutils dart gehen und die funktion adddatetime() adddatetime() erstellen oder nach unten scrollen hier werden wir die logik schreiben, um den datentyp datum zeit zu unserer klasse hinzuzufügen initialisieren sie string adddatetimequery string adddatetimequery und weisen sie ihm die abfrage zum erstellen von datum zeit daten zu 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 '''; und die final variable final variable wie folgt 1 final variable={ 2 "rowid" rowobjectid, 3 "dateowned" datetime 4 }; jetzt initialisieren sie den graphqlclient graphqlclient und übergeben sie die abfrage durch die queryoption() queryoption() so würde ihre funktion aussehen 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 } jetzt hot restart anwendung und notieren sie sich die objectid der zeile, die sun microsystems im name feld enthält drücken sie die add date time taste geben sie jetzt die objectid ein, die im ersten textfeld notiert wurde, und “02 24 1982” im mm dd yyyy format am tag, als java veröffentlicht wurde, und drücken sie die done taste gehen sie zu ihrem back4app backend und sie würden das datum in form von 24 februar 1982 um 00 00 00 utc sehen, was bedeutet, dass es den datentyp als datum uhrzeit datentyp identifiziert hat ebenso könnten sie “01 27 2010” für das date owned für oracle hinzufügen 4 hinzufügen/aktualisieren von geopointer daten lass uns geopointer daten hinzufügen, um die hauptsitze der unternehmen aus der ownership tabelle zu lokalisieren gehe zur database utils dart database utils dart datei und scrolle nach unten zur addgeopointers() addgeopointers() funktion jetzt initialisiere string addgeopointers string addgeopointers und weise die entsprechende abfrage zu 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 '''; und final variable final variable als 1 final variable={ 2 "objectid" rowobjectid, 3 "latitude" double parse(latitude), 4 "longitude" double parse(longitude), 5 }; da latitude latitude und longitude longitude doppelte werte sind, müssen wir sie von string zu double parsen, bevor wir sie senden initialisiere den grapqlclient grapqlclient und übergebe die abfrage mit queryoption() queryoption() so würde deine addgeopointers() addgeopointers() funktion aussehen 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 } starten sie ihre app neu und wählen sie die add geopointers schaltfläche geben sie 37 35 37 35 im ersten textfeld und 121 95 121 95 im zweiten textfeld ein geben sie die objectid der zeile mit sun microsystems als name ein und drücken sie auf fertig gehen sie nun zu ihrem back4app backend und sie würden sehen, dass (37 35, 121 95) die koordinaten des hauptsitzes sind und dass es als geopointers identifiziert wird 5 hinzufügen/aktualisieren und löschen von beziehungen in zeigern können wir nur auf eine zeile zeigen, aber mit hilfe von beziehungen können wir verbindungen zu mehreren zeilen herstellen lassen sie uns also die beziehung unserer language tabelle zu diesen beiden zeilen für ownership der java sprache herstellen hinzufügen/aktualisieren der beziehung fahren sie fort mit database utils dart database utils dart datei und fahren sie fort mit addrelation() addrelation() funktion zum schreiben der logik initialisieren sie string addrelationquery string addrelationquery und weisen sie die abfrage für die beziehung wie folgt zu 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 '''; und die final variable final variable wäre 1 final variable= { 2 "objectid" objectid, 3 "relationid" relationid 4 }; nachdem sie also den graphqlclient graphqlclient initialisiert und die abfrage wie zuvor übergeben haben, würde ihr database utils dart database utils dart so aussehen 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 } erfolg ihre app hat endlich relationale, datums und geopointer daten auf back4app gespeichert! fazit in diesem leitfaden haben wir gelernt, wie man relationale daten auf back4app mit graphql aus einem flutter app projekt speichert außerdem haben wir mit anderen graphql mutationen wie geopointers und datetime gearbeitet, daten erstellt, aktualisiert und gelöscht im nächsten tutorial werden wir tief in abfragen für unsere flutter app eintauchen dieser leitfaden wurde von asim junain, von hybrowlabs https //www back4app com/partners/software development company