Conservare dati relazionali in Flutter usando GraphQL

memorizza dati relazionali utilizzando graphql introduzione negli ultimi due tutorial abbiamo eseguito query e mutazioni graphql su un database back4app dal nostro progetto flutter app stiamo usando graphql flutter https //pub dev/packages/graphql flutter/install come nostro client graphql poiché è un progetto molto robusto e ampiamente utilizzato per quei tutorial abbiamo utilizzato un modello di dati molto semplice con i tipi più comuni per le nostre classi back4app è una piattaforma flessibile che ti consente di creare, memorizzare e interrogare dati relazionali in questo tutorial ci immergeremo in questa capacità mostrandoti come utilizzare relazioni e puntatori quando si salvano e interrogano dati relazionali sul backend di back4app inoltre, esploreremo altri tipi di dati che back4app offre come geopointer e datetime obiettivi alla fine di questo articolo sarai in grado di creare/aggiornare e eliminare dati relazionali (utilizzando puntatori e relazioni) creare/aggiornare geopuntatori creare/aggiornare data ora requisiti per completare questo tutorial, avrai bisogno di assicurati di aver letto le due guide precedenti inizia dal template e graphql mutation scarica il file del progetto da github repo che include il codice precedente così come la nuova gui di cui avrai bisogno apri il progetto scaricato su un ide flutter come vs code o android studio un account back4app che può essere creato qui collega il tuo tutorial a back4app come nei tutorial precedenti inizia dal template 1 configurazione del back end nel nostro progetto precedente https //www back4app com/docs/flutter/flutter crud app example il nostro modello di dati era molto semplice con una sola classe lingua ora lo renderemo più complesso aggiungendo 2 nuove classi e collegandole a lingua fondatore con formato nome della colonna descrizione nome nome del fondatore della lingua nome della colonna descrizione nome nome della società proprietaria data di proprietà data di acquisizione della proprietà da parte della società sede posizione della sede della società creeremo una relazione uno a uno tra la classe language e la classe founder utilizzando i parse pointers, che indicheranno il fondatore della lingua specifica poi, creeremo una relazione uno a molti tra la classe language e la classe ownership utilizzando le parse relations che indicheranno quale organizzazione/azienda possedeva la lingua, la loro sede centrale e la data in cui hanno acquisito la proprietà della lingua il modello di dati apparirà in questo modo prima di passare alla nostra app, creiamo le classi e i dati nel nostro back end che ci serviranno vai alla tua app back4app e poi vai al graphql playground utilizzando la mutazione qui sotto, crea una classe founder dove memorizzeremo i nomi dei fondatori delle lingue 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 } ora popoliamo la nostra classe con alcuni nomi di fondatori nei passaggi seguenti utilizzeremo questi dati per creare nuove lingue che puntano alla classe dei fondatori usa la mutazione qui sotto su back4app graphql playground per creare i tuoi fondatori 1 mutation createobject{ 2 createfounder(input {fields {name "james gosling"}}){ 3 founder{ 4 id 5 name 6 } 7 } 8 } qui abbiamo inserito il nome del fondatore del linguaggio di programmazione java puoi fare lo stesso per gli altri, ma per ora questo è sufficiente per la nostra guida creiamo la ownership classe dove memorizzeremo la proprietà della lingua, la data di fondazione (data ora) e la posizione della sede del proprietario (geopointer) in seguito creeremo la relazione tra la classe lingua e proprietà procedi eseguendo il codice qui sotto per creare 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 } ora popola la proprietà classe utilizzando le seguenti mutazioni 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 } ora aggiorna la pagina, vai alla proprietà proprietà classe nel browser del database seleziona il aggiungi nuova colonna in alto a destra seleziona geopoint dal primo menu a discesa e chiamalo sede nel secondo campo di testo e lascia tutto com'è e premi il aggiungi colonna pulsante quindi vai alla tua lingua lingua classe su database browser aggiungiamo le relazioni alle proprietà proprietà e fondatore fondatore classi clicca su aggiungi nuova colonna e poi scegli il tipo di dato puntatore e la classe target fondatore fondatore dai alla colonna lo stesso nome fondatore poi premi aggiungi colonna ora ripeti quel processo aggiungendo una nuova colonna chiamata proprietà utilizzando il tipo di dato relazione e selezionando la classe proprietà proprietà ora hai il tuo modello di dati pronto per essere utilizzato nella tua app flutter e per iniziare a salvare e aggiornare i dati 2 creazione/aggiunta e cancellazione di puntatori ora devi scaricare il codice boilerplate del progetto dal nostro repo github https //github com/templates back4app/flutter graphql/tree/complex mutations aperto nel tuo ide per collegare il tuo progetto a back4app vai al graphql playground e poi copia le chiavi e l'url api come mostrato nell'immagine qui sotto ora incollali nel constants dart constants dart e avvia il tuo progetto esegui l'applicazione nel tuo emulatore vai al m pulsante flottante in basso questo ci porterà alla pagina dove abbiamo eseguito semplici mutazioni qui troverai un pulsante di azione flottante extra cm questo è il pulsante che useremo per eseguire le nostre mutazioni graphql complesse clicca sul pulsante cm , e vedrai altri quattro pulsanti, uno per ogni operazione che andremo a fare in questa guida ora apri il databaseutils dart databaseutils dart file e scorri verso il basso fino al addpointers() addpointers() metodo qui aggiungeremo la logica per aggiungere puntatori indicheremo james gosling come fondatore del linguaggio java quindi prima dovrai procedere al tuo backend di back4app e copiare sia l' objectid objectid aggiornamento/creazione di puntatori ai dati procedere alla nostra app all'interno del databaseutils dart databaseutils dart e all'interno del addpointers() addpointers() metodo inizializzare un string addpointerquery string addpointerquery dove assegneremo la query graphql per aggiungere pointers come segue 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 '''; e inizializzare variabile finale variabile finale per assegnare variabili, notare che stiamo prendendo il rowobjectid rowobjectid e pointersid pointersid come parametri dove rowobjectid rowobjectid l'id dell'oggetto della riga da cui punteremo pointersid pointersid l'id dell'oggetto alla riga da puntare quindi dichiarare variabile variabile come 1 final variable={ 2 "userid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "link" pointersid 6 } 7 } 8 }; ora, come nell'ultima guida, inizializzeremo il graphqlclient graphqlclient e invieremo la query con l'aiuto di queryoptions() queryoptions() e restituiremo la sua istanza con 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; questo è come dovrebbe apparire il tuo addpointers() addpointers() metodo 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 } esegui un hot restart della tua app ora, vai al cm pulsante nella pagina di mutazione e poi premi il pulsante per impostare add pointers qui inserisci il objectid objectid della riga in cui il puntatore deve essere aggiunto nel primo campo di testo e objectid objectid della riga a cui punterebbe nel secondo campo di testo e poi premi fatto ora controlla il tuo dashboard e dovresti essere in grado di vedere una relazione sotto la founder colonna puoi cliccarci sopra e ti porterà alla riga che punta alla classe founder cancellazione del puntatore ai dati ora procedi al metodo deletepointers() deletepointers() dove scriveremo la logica per eliminare le relazioni per eliminare le relazioni devi solo apportare piccole modifiche alla query sopra, cioè, nelle variabili devi solo cambiare il "link" "link" con "remove" "remove" quindi, dopo aver inizializzato la variabile finale la variabile finale sarebbe 1 final variable={ 2 "languageid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "remove" pointersid 6 } 7 } 8 }; tutto il resto apparirà esattamente lo stesso del addpointers() addpointers() quindi il tuo deletepointers() deletepointers() metodo appare così 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 } ora puoi procedere al tuo dashboard di back4app e vedere che la colonna fondatore della riga specifica è stata eliminata 3 creazione/aggiunta e cancellazione di dati data ora se ricordi, abbiamo creato una classe ownership in precedenza in step 1 e memorizzato alcuni dati in essa questi sono i nomi delle aziende che possedevano il linguaggio di programmazione java quindi, prima inseriamo le date in cui hanno acquisito la proprietà procediamo a databaseutils dart databaseutils dart e creiamo o scorriamo fino alla adddatetime() adddatetime() funzione qui scriveremo la logica per aggiungere il tipo di dato data ora alla nostra classe inizializza string adddatetimequery string adddatetimequery e assegnagli la query per creare dati data ora 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 '''; e la variabile finale variabile finale come 1 final variable={ 2 "rowid" rowobjectid, 3 "dateowned" datetime 4 }; ora inizializza il graphqlclient graphqlclient e passa la query attraverso il queryoption() queryoption() questo è come apparirà la tua funzione 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 } ora hot restart l'applicazione e annota il objectid della riga contenente sun microsystems nella colonna name premi il pulsante aggiungi data ora ora inserisci il objectid annotato nel primo campo di testo e “02 24 1982” come formato mm dd yyyy nel giorno in cui java è stato pubblicato e premi il pulsante fatto procedi al tuo backend di back4app e vedrai la data sotto forma di 24 feb 1982 at 00 00 00 utc il che significa che ha identificato il tipo di dato come tipo di dato data ora allo stesso modo, potresti aggiungere “01 27 2010” per il date owned per oracle 4 aggiunta/aggiornamento dei dati geopointer aggiungiamo i dati geopointer per localizzare la sede centrale delle aziende dalla tabella proprietà procedere al database utils dart database utils dart file e scorri verso il basso fino alla addgeopointers() addgeopointers() funzione ora inizializza string addgeopointers string addgeopointers e assegna la query rispettiva 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 '''; e variabile finale variabile finale come 1 final variable={ 2 "objectid" rowobjectid, 3 "latitude" double parse(latitude), 4 "longitude" double parse(longitude), 5 }; poiché latitude latitude e longitude longitude sono valori double, dobbiamo analizzarli da string a double prima di inviarli inizializza il grapqlclient grapqlclient e passa la query con queryoption() queryoption() questo è come apparirebbe la tua addgeopointers() addgeopointers() funzione 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 } esegui un hot restart della tua app e seleziona il add geopointers pulsante inserisci 37 35 37 35 nella prima casella di testo e 121 95 121 95 nella seconda casella di testo inserisci l' objectid della riga con sun microsystems come name e premi fatto ora procedi al tuo backend di back4app e vedrai (37 35, 121 95) che sono le coordinate della sede centrale e indica che lo identifica come geopointers 5 aggiunta/aggiornamento e cancellazione di relazioni nei puntatori possiamo puntare solo a una riga, ma con l'aiuto delle relazioni possiamo fare collegamenti a più righe quindi facciamo una relazione della nostra language tabella a queste due righe per ownership del java linguaggio aggiunta/aggiornamento relazione procedere al database utils dart database utils dart file e procedere a addrelation() addrelation() funzione per scrivere la logica inizializzare string addrelationquery string addrelationquery e assegnare la query per la relazione come segue 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 '''; e la variabile finale variabile finale sarebbe 1 final variable= { 2 "objectid" objectid, 3 "relationid" relationid 4 }; quindi, dopo aver inizializzato il graphqlclient graphqlclient e passando la query come prima, ecco come apparirebbe il tuo database utils dart 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 } success la tua app ha finalmente memorizzato dati relazionali, datetime e geopointers su back4app! conclusione in questa guida abbiamo imparato come memorizzare dati relazionali su back4app utilizzando graphql da un progetto flutter app abbiamo anche lavorato con altre mutazioni graphql come geopointers e datetime, creando, aggiornando e eliminando dati nel prossimo tutorial ci immergeremo nelle query per la nostra app flutter questa guida è stata scritta da asim junain, da hybrowlabs https //www back4app com/partners/software development company