Implémentation de bases de données hors ligne avec GraphQL Flutter

mise en œuvre de la base de données hors ligne en utilisant l'api graphql introduction puisque vous êtes ici, vous devez avoir parcouru le reste des tutoriels et être familiarisé avec l'exécution de requêtes et de mutations graphql pour récupérer et modifier les données dans cette documentation, nous allons explorer comment mettre en œuvre une interface utilisateur hors ligne en premier avec flutter et graphql objectifs comprendre l'architecture interne du client graphql hors ligne de flutter permettre à l'application d'exécuter des requêtes graphql même lorsque l'application est hors ligne mettre en œuvre la persistance des données hors ligne prérequis nous exigeons que l'utilisateur ait une compréhension de base de dart et flutter bien que ce ne soit pas nécessaire, le livre de recettes graphql sera utile pour comprendre certains des concepts graphql nous exigeons que vous ayez complété le sujet préalable configuration de flutter graphql et que vous ayez mis en place un code précédent et un backend back4app 1 configuration du cache hors ligne le client flutter graphql prend en charge les "requêtes hors ligne" par défaut, c'est à dire qu'il ne renverra pas d'erreurs si nous interrogeons des données graphql lorsque nous sommes hors ligne et récupérera les données du cache nous devons noter que cela est différent de la persistance du cache entre les sessions de l'application et spécifiquement le client graphql flutter n'a pas de persistance du cache sur disque donc, si l'application se ferme depuis la barre système et se rouvre, les données devront toujours être récupérées pour activer cela, nous devons activer le cache hors ligne allez à 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 configuration des préférences stockées une mise en garde lors de l'utilisation du client flutter graphql est qu'il ne stocke aucun cache de son propre lorsque l'application est fermée, ni ne hydrate le cache lorsque l'application est rouverte pour mettre en œuvre cela, nous allons utiliser la bibliothèque flutter shared preferences elle enveloppe le stockage persistant spécifique à la plateforme pour des données simples (nsuserdefaults sur ios et macos, sharedpreferences sur android, etc ), permettant essentiellement de stocker des données hors ligne de manière très simple pour installer la bibliothèque, veuillez l'ajouter dans le pubspec yml https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 fichier dans main dart ajoutez ce qui suit 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 bibliothèque shared preferences stocke les données sous forme de clé valeur où la valeur est convertie en chaîne json nous devrons analyser ces données pour notre modèle de données 3 analyse des données stockées localement nous allons créer un nouveau fichier appelé programing languages model dart programing languages model dart qui stockera la logique d'analyse nous allons générer cette logique en collant notre réponse graphql dans le convertisseur de modèle json à dart à https //app quicktype io/ https //app quicktype io/ nous allons copier le code généré et créer un fichier 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 intégration de la logique de stockage hors ligne si les données n'existent pas, nous utiliserions les données des préférences partagées si les données ne sont également pas dans les préférences partagées, nous afficherions simplement une icône de chargement nous allons maintenant mettre en œuvre des changements pour intégrer tous les changements ensemble, dans la méthode de construction de notre myhomepagestate myhomepagestate nous changerions notre méthode de construction nous utiliserions le futurebuilder futurebuilder widget pour consommer des données de la 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 … l'utilisation du widget futurebuilder nous permet d'écrire du code sans avoir à utiliser l'état c'est un processus relativement rapide pour obtenir les données des préférences partagées nous pourrions également afficher un chargeur pendant que nous initialisons les préférences partagées et que nous obtenons des données d'un magasin hors ligne nous utilisons maintenant cet objet de données hors ligne et rendons pendant que les données de graphql ne sont pas disponibles nous allons également refactoriser un peu le code ce qui suit sera notre code pour le 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 ), nous devrions obtenir ce qui suit conclusion nous sommes maintenant en mesure d'assurer une très bonne expérience mobile en stockant les données hors ligne et en revalidant les données lorsque l'application se connecte à internet de plus, un aspect important qui améliore l'expérience utilisateur est que le client flutter graphql met en cache l'ancienne réponse et envoie automatiquement une nouvelle demande grâce à cela, nous n'avons pas à continuer à afficher des écrans de chargement encombrants pendant que nous récupérons à nouveau les données le code de l'article est disponible à l'adresse https //github com/templates back4app/flutter graphql/tree/flutter graphql offline https //github com/templates back4app/flutter graphql/tree/flutter graphql offline