Offline-Cache in Flutter GraphQL-Apps einrichten

implementierung der offline first datenbank mit der graphql api einführung da sie hier sind, haben sie wahrscheinlich die anderen tutorials durchgearbeitet und sind mit der ausführung von graphql abfragen und mutationen zum abrufen und ändern der daten vertraut in diesem dokument werden wir erkunden, wie man eine offline first benutzeroberfläche mit flutter und graphql implementiert ziele verstehen der internen architektur des flutter graphql offline clients ermöglichen, dass die anwendung graphql abfragen ausführt, auch wenn die anwendung offline ist implementierung der offline datenpersistenz voraussetzungen wir setzen voraus, dass der benutzer einige grundlegende kenntnisse in dart und flutter hat obwohl nicht notwendig, wird das graphql kochbuch nützlich sein, um einige der graphql konzepte zu verstehen wir setzen voraus, dass sie das vorausgesetzte thema flutter graphql setup abgeschlossen haben und dass sie eine vorherige codeeinrichtung und die implementierung des back4app backends haben 1 einrichtung des offline caches der flutter graphql client unterstützt standardmäßig „offline abfragen“, das heißt, er wirft keine fehler, wenn wir einige graphql daten im offline modus abfragen und die daten aus dem cache abrufen wir müssen beachten, dass dies anders ist als das speichern des caches über app sitzungen hinweg, und speziell der flutter graphql client hat keine cache persistenz auf der festplatte wenn die app also aus dem systemtray geschlossen und wieder geöffnet wird, müssten die daten weiterhin abgerufen werden um dasselbe zu ermöglichen, müssen wir den offline cache aktivieren gehe zu 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 einrichtung der gespeicherten einstellungen ein nachteil bei der verwendung des flutter graphql clients ist, dass er keinen eigenen cache speichert, wenn die anwendung geschlossen wird, noch hydratisiert er den cache, wenn die anwendung erneut geöffnet wird für die implementierung würden wir die flutter shared preferences bibliothek nutzen sie umschließt plattformspezifischen persistenten speicher für einfache daten (nsuserdefaults auf ios und macos, sharedpreferences auf android usw ) und ermöglicht es im wesentlichen, daten offline auf sehr einfache weise zu speichern um die bibliothek zu installieren, füge bitte in die pubspec yml https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 datei ein in main dart fügen sie folgendes hinzu 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 } die shared preferences bibliothek speichert daten in form von schlüssel wert paaren, wobei der wert in einen json string umgewandelt wird wir müssen diese daten in unser datenmodell parsen 3 parsen der lokal gespeicherten daten wir werden eine neue datei namens programing languages model dart programing languages model dart erstellen, die die parsing logik speichert wir werden diese logik generieren, indem wir unsere graphql antwort in den json zu dart modell konverter unter https //app quicktype io/ https //app quicktype io/ wir werden den generierten code kopieren und eine datei erstellen 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 integration der offline speicherlogik wenn die daten nicht vorhanden sind, würden wir die daten aus den gemeinsamen einstellungen verwenden wenn die daten auch nicht in den gemeinsamen einstellungen sind, würden wir einfach ein lade icon anzeigen wir werden jetzt änderungen implementieren, um alle änderungen zusammenzuführen, in der build methode unseres myhomepagestate myhomepagestate würden wir unsere build methode ändern wir würden das futurebuilder futurebuilder widget verwenden, um daten aus der sharedpreferenceshelper klasse zu konsumieren 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 … die verwendung des futurebuilder widgets ermöglicht es uns, code zu schreiben, ohne den zustand verwenden zu müssen es ist ein relativ schneller prozess, um die daten aus den shared preferences zu erhalten wir könnten auch einen loader anzeigen, während wir die shared preferences initialisieren und daten aus einem offline speicher abrufen wir verwenden jetzt dieses offline datenobjekt und rendern, während daten von graphql nicht verfügbar sind wir werden auch den code ein wenig umstrukturieren folgendes wird unser code für das 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 ), wir sollten folgendes erhalten fazit wir sind jetzt in der lage, ein sehr gutes mobiles erlebnis zu gewährleisten, indem wir die daten offline speichern und die daten erneut validieren, wenn die anwendung mit dem internet verbunden wird ein weiterer wichtiger aspekt, der das benutzererlebnis verbessert, ist, dass der flutter graphql client die alte antwort zwischenspeichert und beim senden einer neuen anfrage automatisch verwendet dadurch müssen wir keine umständlichen ladebildschirme mehr anzeigen, während wir daten erneut abrufen der code für den artikel ist verfügbar unter https //github com/templates back4app/flutter graphql/tree/flutter graphql offline https //github com/templates back4app/flutter graphql/tree/flutter graphql offline