Guida Tecnica all'Integrazione di Flutter e GraphQL

flutter graphql su back4app introduzione poiché sei qui a esplorare la documentazione di back4app, sai che back4app è un backend flessibile a basso codice ti consente di interagire con il tuo backend in diversi modi, come preferisci se vuoi, puoi utilizzare l'api rest, oppure puoi utilizzare direttamente un sdk nativo https //pub dev/packages/parse server sdk per flutter in questa serie di tutorial, esploreremo l'utilizzo del nuovo e brillante api graphql con flutter questa guida è stata scritta da chinmay, un partner di back4app https //www back4app com/partners/software development company presso hybrowlabs obiettivi ottenere una panoramica di graphql; comprendere come graphql e flutter si integrano; comprendere gli strumenti e le librerie flutter disponibili per graphql; comprendere l'architettura generale e i concetti chiave in un'applicazione flutter graphql; prerequisiti richiediamo che l'utente abbia una comprensione di base di dart e flutter; anche se non necessario, il libro di cucina graphql sarà utile per comprendere il back4app graphql spec che cos'è graphql graphql è un'architettura alternativa allo standard rest api graphql è nato quando il team di facebook stava ricostruendo le proprie applicazioni native da zero e aveva un grande bisogno di ottimizzare i dati ricevuti dal backend mentre rifattorizzavano i loro servizi come un insieme di risorse, si sono frustrati perché non stavano andando da nessuna parte hanno fatto un passo indietro e hanno ripensato i dati come un grafo interconnesso di oggetti invece di risorse rest isolate questo ha fatto una grande differenza nella loro architettura applicativa ed è così che è nato graphql da quando graphql è stato rilasciato nel 2015, ha guadagnato enorme popolarità e attenzione ed è stato adottato da team come twitter, airbnb, atlassian, github perché graphql? in hybrowlabs, un partner di back4app https //www back4app com/partners/software development company , costruiamo applicazioni web e mobili moderne e intensive di dati abbiamo adottato back4app come il nostro servizio backend di scelta per la sua facilità d'uso, ottimizzazione e funzionalità di definizione dello schema che sono fornite su database già eccezionali la maggior parte delle volte le applicazioni in cui ingegnerizziamo dati che vengono visualizzati o manipolati non provengono solo da una singola classe di back4app piuttosto, questi dati provengono da più classi la combinazione back4app graphql ci consente di affrontare facilmente tali scenari nel frattempo, ci consente di ridurre l'impatto di rete a 2 3 chiamate per caricamento della schermata, portando solo i dati che vogliamo d'altra parte, il codice cloud che definiamo viene facilmente documentato grazie alla natura fortemente tipizzata di graphql questo rende il nostro codice manutenibile e facile da comprendere tldr; ecco i vantaggi dell'utilizzo di graphql l'impatto di rete viene ridotto al minimo query efficienti e batching delle query migliore gestione del codice la natura fortemente tipizzata porta prevedibilità flutter e back4app graphql è spesso molto difficile architettare una soluzione backend graphql che combini la flessibilità dei database nosql mantenendo la struttura e l'organizzazione fornite dalla presenza di un tipo e di una struttura di schema di graphql back4app ha sempre avuto questo design strutturato basato su schema e ora graphql lo porta a un livello completamente nuovo creando un'api che conosce la semantica del sistema di tipi d'altra parte, come sappiamo, dart (su cui si basa flutter) è un linguaggio fortemente tipizzato sì, dart è molto particolare riguardo alla sicurezza dei tipi con graphql abbiamo uno schema che può essere riutilizzato sul lato client questo rende la vita molto più facile inoltre, conoscere lo schema dei tipi che può essere recuperato in futuro aiuta davvero, poiché ci consente di implementare algoritmi avanzati di caching e invalidazione delle query su questi dati toolkit flutter per back4app graphql per interagire con la nostra api graphql sfrutteremo l'ottima graphql flutter https //github com/zino app/graphql flutter libreria quindi, comprendiamo le funzionalità che la libreria offre supporto per query e mutazioni tutto lo schema definito nel dashboard di back4app è direttamente convertito negli endpoint graphql di back4app ed è disponibile sia come query che come mutazioni le query ci consentono di ottenere dati annidati da più classi in una singola chiamata api le query sono principalmente effettuate per il recupero dei dati e sono memorizzate nella cache da back4app graphql consente metodi di query ricchi, supportando geolocalizzazione, tempo, regex e funzionalità di ricerca full text le mutazioni ci consentono di effettuare una chiamata api che può aggiornare più voci di classe le mutazioni consistono principalmente nella creazione, modifica e cancellazione dei dati di seguito è riportata una classe programinglanguage che ho creato su back4app quando navighi nella sezione graphql dell'api per back4app, vedrai la console di back4app precedentemente illustrata questa console avrà ora tutte le mutazioni e le query create automaticamente! quando vado alla sezione graphql dell'api per back4app, vedremo la console di back4app precedentemente illustrata questa console avrà ora tutte le mutazioni e le query create automaticamente! nell'immagine sopra ho utilizzato back4app graphql per elencare tutte le mie lingue dalla classe programminglanguage allo stesso modo, possiamo creare un'entrata nella nostra classe programminglanguage di back4app sfruttando le mutazioni polling delle query 1 query( 2 query( 3 options queryoptions( 4 document get all programming languages, // this is the query string you just created 5 pollinterval 10, //setting up polling 6 ), 7 builder (queryresult result) { 8 if (result errors != null) { 9 return text(result errors tostring()); 10 } 11 12 if (result loading) { 13 return text('loading'); 14 } 15 16 // it can be either map or list 17 list programminglanguages = result data\['programminglanguages']; 18 19 return listview\ builder( 20 itemcount programminglanguages length, 21 itembuilder (context, index) { 22 final repository = programminglanguages\[index]; 23 return text(programminglanguages\['name']); 24 }); 25 }, 26 ); per alcuni casi d'uso, in cui le sottoscrizioni potrebbero essere eccessive dobbiamo aggiornare i dati periodicamente, possiamo utilizzare la funzione di polling delle query del client questo ci consente di recuperare i dati più recenti in modo periodico ad esempio, possiamo effettuare un recupero dei dati in background ogni 1 minuto cache in memoria 1 static future\<queryresult> callquery( 2 {dynamic documentnode, dynamic variables, fetchpolicy fetchpolicy}) { 3 return singleton client query( 4 queryoptions( 5 context singleton context, 6 documentnode documentnode, 7 variables variables, 8 fetchpolicy fetchpolicy ?? fetchpolicy cacheandnetwork, 9 ), 10 ); 11 } il client flutter graphql implementa vari modi di memorizzazione nella cache dei dati, essi sono cache durante la revalidazione consideriamo un semplice esempio di recupero di un elenco di articoli vogliamo che i dati dell'elenco siano memorizzati nella cache, quando ci spostiamo da un elenco a un articolo specifico e poi di nuovo indietro il meccanismo di cache durante la revalidazione implementa questo metodo di interrogazione dei dati, il che significa che anche se viene effettuata una chiamata api per recuperare i dati, i dati vecchi vengono utilizzati per visualizzare mentre i nuovi dati vengono recuperati; quando i nuovi dati diventano disponibili, vengono quindi mostrati solo cache in questo metodo, una chiamata di rete viene effettuata solo se non ci sono dati sul nostro dispositivo questo è utile se abbinato a strutture di sincronizzazione offline per punti dati che non cambieranno questo ottimizza la rete e risparmia risorse solo rete in rari casi in cui non si desidera mantenere la cache dei dati, è possibile utilizzare la modalità solo rete della libreria flutter graphql sincronizzazione della cache offline l'esperienza mobile si aspetta che sia abilitata offline per impostazione predefinita fare questo con flutter e rest api è molto noioso devi memorizzare i dati nel database sqlite, controllare se i dati sono presenti o meno, scrivere query sql per recuperare i dati e poi fare anche le chiamate di rete per aggiornare i dati è un gran lavoro, che viene completamente bypassato con l'uso di questo plugin e il supporto offline per le query è integrato nella nostra applicazione flutter archiviazione file 1 mutation($files \[upload!]!) { 2 multipleupload(files $files) { 3 id 4 filename 5 mimetype 6 path 7 } 8 } 9 10 import 'package\ http/http dart'; 11 12 // 13 14 string filepath = '/aboslute/path/to/file ext'; 15 final file = await multipartfilefrom(file(filepath)); 16 17 final queryresult r = await graphqlclientclient mutate( 18 mutationoptions( 19 documentnode gql(uploadmutation), 20 variables { 21 'files' \[file], 22 }, 23 ) 24 );gr molte librerie server graphql non supportano una funzionalità di caricamento file utilizzando le query graphql per caricare un file dobbiamo chiamare un endpoint rest separato carica il file, ottieni l'url, quindi passalo all'api graphql sotto forma di stringa inoltre, dobbiamo mantenere manualmente i metadati del file come il nome del file, ecc back4app ha supporto per gli standard di caricamento file integrati nell'api graphql di back4app quando il file viene caricato, viene caricato come un tipo file di graphql, che corrisponde a un file di back4app in graphql automaticamente, abbiamo memorizzato il file in un'archiviazione file altamente scalabile di back4app supportata da aws s3 risultati ottimistici 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) gli utenti si aspettano un'interfaccia utente molto coinvolgente e un feedback istantaneo l'ui ottimista è un principio di ui/ux che in sostanza dice che non dovremmo aspettare che l'azione sia completata ma invece, mostriamo un feedback all'utente che abbiamo completato l'azione! questo viene fatto con l'assunzione che l'azione avrà successo per il 99% delle volte se l'azione purtroppo fallisce, mostriamo un messaggio di errore che dice che non siamo riusciti a completare l'azione flutter graphql viene fornito con supporto integrato per definire le mutazioni ottimiste, il che rende molto più facile implementare questo complesso sistema di interazione dell'interfaccia utente pertanto, con questo, abbiamo una base molto ben ottimizzata per costruire applicazioni moderne conclusione in questa guida ti abbiamo presentato alcuni importanti vantaggi dell'utilizzo di graphql nel tuo progetto flutter su back4app nella prossima guida metteremo le mani sul codice e inizieremo configurando il nostro client graphql flutter per utilizzare l'api di back4app