Implementa Database Offline in Flutter con GraphQL

implementazione del database offline first utilizzando l'api graphql introduzione poiché sei qui, devi aver già seguito il resto dei tutorial e sei familiare con l'esecuzione di query e mutazioni graphql per recuperare e modificare i dati in questa documentazione, esploreremo come implementare un'interfaccia utente offline first con flutter e graphql obiettivi comprendere l'architettura interna del client flutter graphql offline consentire all'applicazione di eseguire query graphql anche se l'applicazione è offline implementare la persistenza dei dati offline prerequisiti richiediamo che l'utente abbia una comprensione di base di dart e flutter anche se non necessario, il ricettario graphql sarà utile per comprendere alcuni dei concetti di graphql richiediamo che tu abbia completato l'argomento prerequisito impostazione di flutter graphql e che tu abbia configurato il codice precedente e implementato il backend back4app 1 configurazione della cache offline il client flutter graphql supporta per impostazione predefinita le “query offline”, ovvero non genererà errori se eseguiamo alcune query graphql quando siamo offline e recupererà i dati dalla cache dobbiamo notare che questo è diverso dal mantenere la cache tra le sessioni dell'app e specificamente il client flutter graphql non ha persistenza della cache su disco quindi, se l'app viene chiusa dalla barra di sistema e riaperta, i dati dovrebbero comunque essere recuperati per abilitare la stessa cosa dobbiamo abilitare la cache offline vai a main dart 1 return materialapp( 2 home graphqlprovider( 3 child cacheprovider( // cache provider widget that provides the offline queries support 4 child myhomepage(), 5 ), 6 client client, 7 ), 8 ); 2 configurazione delle preferenze memorizzate una avvertenza nell'utilizzo del client flutter graphql è che non memorizza alcuna cache di propria quando l'applicazione è chiusa, né idrata la cache quando l'applicazione viene riaperta per implementare la stessa cosa utilizzeremo la libreria flutter shared preferences essa avvolge lo storage persistente specifico per la piattaforma per dati semplici (nsuserdefaults su ios e macos, sharedpreferences su android, ecc ), consentendo essenzialmente di memorizzare dati offline in modo molto semplice per installare la libreria, aggiungi nel pubspec yml https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 file in main dart aggiungi quanto segue 1 import 'package\ shared preferences/shared preferences dart'; 2 3 class sharedpreferenceshelper { 4 static final string offline cache key = 'programminglanguagelistresponse'; 5 6 static future\<programminglanguagelist> getcache() async { 7 final sharedpreferences prefs = await sharedpreferences getinstance(); 8 final cache = prefs getstring( offline cache key); 9 final offlinedata = 10 cache != null ? programminglanguagelistfromjson(cache) null; 11 12 return offlinedata; 13 } 14 15 static future\<bool> setcache(dynamic value) async { 16 final sharedpreferences prefs = await sharedpreferences getinstance(); 17 18 return prefs setstring( offline cache key, jsonencode(value)); 19 } 20 } la libreria shared preferences memorizza i dati in una forma chiave valore dove il valore viene convertito in una stringa json dobbiamo analizzare questi dati nel nostro modello di dati 3 analisi dei dati memorizzati localmente creeremo un nuovo file chiamato programing languages model dart programing languages model dart che conterrà la logica di analisi genereremo questa logica incollando la nostra risposta graphql nel convertitore da json a modello dart su https //app quicktype io/ https //app quicktype io/ copieremo il codice generato e creeremo un file programing languages model dart programing languages model dart https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/programing languages model dart https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/programing languages model dart 4 integrazione della logica di archiviazione offline se i dati non esistono, utilizzeremo i dati dalle preferenze condivise se i dati non sono nemmeno nelle preferenze condivise, mostreremo semplicemente un'icona di caricamento ora implementeremo modifiche per integrare tutte le modifiche insieme, nel metodo build del nostro myhomepagestate myhomepagestate cambieremo il nostro metodo build utilizzeremo il futurebuilder futurebuilder widget per consumare dati dalla classe sharedpreferenceshelper 1 return futurebuilder\<programminglanguagelist>( 2 future sharedpreferenceshelper getcache(), 3 builder (prefs, snapshot) { 4 final offlinedata = snapshot data; 5 if (!snapshot haserror) { 6 return safearea( 7 … utilizzare il widget futurebuilder ci consente di scrivere codice senza dover utilizzare lo stato è un processo relativamente veloce per ottenere i dati dalle preferenze condivise potremmo anche mostrare un loader mentre inizializziamo le preferenze condivise e otteniamo dati da un archivio offline ora utilizziamo questo oggetto di dati offline e rendiamo mentre i dati da graphql non sono disponibili ristruttureremo anche un po' il codice di seguito sarà il nostro codice per il query query https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/main dart widget 1 body query( 2 options queryoptions( 3 documentnode gql(query), 4 ), 5 builder ( 6 queryresult result, { 7 refetch refetch, 8 fetchmore fetchmore, 9 }) { 10 final data = result data == null 11 ? offlinedata 12 programminglanguagelistfromjson( 13 jsonencode(result data)); 14 if (data == null) { 15 return center( 16 child text( 17 "loading ", 18 style textstyle(fontsize 20 0), 19 )); 20 } else { 21 sharedpreferenceshelper setcache(data); 22 return listview\ builder( 23 itembuilder (buildcontext context, int index) { 24 if (index == 0) { 25 return center( 26 child raisedbutton( 27 onpressed refetch, 28 child result loading == true 29 ? text("loading ") 30 text("refetch"), 31 ), 32 ); 33 } 34 return listtile( 35 title text(data programminglanguages 36 edges\[index 1] node name), 37 trailing text(data programminglanguages 38 edges\[index 1] node stronglytyped 39 ? "strongly typed" 40 "weekly typed"), 41 ); 42 }, 43 itemcount data programminglanguages edges length + 1, 44 ); 45 } 46 }, 47 ), 48 ), dovremmo ottenere quanto segue conclusione ora siamo in grado di garantire un'ottima esperienza mobile memorizzando i dati offline e rivalidando i dati quando l'applicazione si connette a internet inoltre, un aspetto importante che sta migliorando l'esperienza dell'utente è che il client flutter graphql memorizza nella cache la vecchia risposta e mentre invia una nuova richiesta automaticamente per questo motivo non dobbiamo continuare a mostrare schermate di caricamento ingombranti mentre recuperiamo nuovamente i dati il codice per l'articolo è disponibile su https //github com/templates back4app/flutter graphql/tree/flutter graphql offline https //github com/templates back4app/flutter graphql/tree/flutter graphql offline