Implementa Base de Datos Offline en Flutter con GraphQL

implementando la base de datos offline primero utilizando la api de graphql introducción dado que estás aquí, debes haber pasado por el resto de los tutoriales y estar familiarizado con la ejecución de consultas y mutaciones de graphql para obtener y modificar los datos en esta documentación, vamos a explorar cómo implementar una interfaz de usuario offline primero con flutter y graphql objetivos entender la arquitectura interna del cliente offline de flutter graphql permitir que la aplicación ejecute consultas graphql incluso cuando la aplicación está offline implementar la persistencia de datos offline requisitos previos requerimos que el usuario tenga un conocimiento básico de dart y flutter aunque no es necesario, el libro de cocina de graphql será útil para entender algunos de los conceptos de graphql requerimos que hayas completado el tema previo configuración de flutter graphql y que tengas la configuración de código previa y el backend de back4app implementado 1 configurando la caché offline el cliente flutter graphql admite “consultas offline” por defecto, es decir, no lanzará errores si consultamos algunos datos de graphql cuando estamos offline y obtendrá los datos de la caché debemos señalar que esto es diferente de persistir la caché a través de las sesiones de la aplicación y específicamente el cliente graphql de flutter no tiene persistencia de caché en disco así que si la aplicación se cierra desde la bandeja del sistema y se vuelve a abrir, los datos aún necesitarían ser recuperados para habilitar lo mismo, tenemos que habilitar la caché offline ve 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 configuración de preferencias almacenadas una advertencia al usar el cliente flutter graphql es que no almacena ninguna caché propia cuando la aplicación está cerrada, ni hidrata la caché cuando la aplicación se vuelve a abrir para implementar lo mismo, estaríamos aprovechando la biblioteca flutter shared preferences envuelve el almacenamiento persistente específico de la plataforma para datos simples (nsuserdefaults en ios y macos, sharedpreferences en android, etc ), permitiendo esencialmente almacenar datos offline de una manera muy simple para instalar la biblioteca, por favor añade en el pubspec yml https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 archivo en main dart añade lo siguiente 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 biblioteca shared preferences almacena datos en forma de clave valor donde el valor se convierte en una cadena json necesitaremos analizar estos datos a nuestro modelo de datos 3 analizando los datos almacenados localmente crearemos un nuevo archivo llamado programing languages model dart programing languages model dart que almacenará la lógica de análisis generaremos esta lógica pegando nuestra respuesta de graphql en el convertidor de modelo json a dart en https //app quicktype io/ https //app quicktype io/ copiamos el código generado y creamos un archivo 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 integrando la lógica de almacenamiento offline si los datos no existen, estaríamos utilizando los datos de las preferencias compartidas si los datos tampoco están en las preferencias compartidas, simplemente mostraríamos un ícono de carga ahora implementaremos cambios para integrar todos los cambios juntos, en el método de construcción de nuestro myhomepagestate myhomepagestate cambiaríamos nuestro método de construcción usaríamos el futurebuilder futurebuilder widget para consumir datos de la clase 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 … usar el widget futurebuilder nos permite escribir código sin tener que usar estado es un proceso relativamente rápido obtener los datos de las preferencias compartidas también podríamos mostrar un cargador mientras estamos inicializando las preferencias compartidas y obteniendo datos de una tienda offline ahora usamos este objeto de datos offline y renderizamos mientras los datos de graphql no están disponibles también refactorizaremos un poco el código a continuación, nuestro código para el 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 ), deberíamos obtener lo siguiente conclusión ahora podemos garantizar una muy buena experiencia móvil al almacenar los datos sin conexión y revalidar los datos cuando la aplicación se conecta a internet además, un aspecto importante que está mejorando la experiencia del usuario es que el cliente flutter graphql almacena en caché la respuesta anterior y, al enviar una nueva solicitud, lo hace automáticamente por lo tanto, no tenemos que seguir mostrando pantallas de carga torpes mientras volvemos a obtener los datos el código del artículo está disponible en https //github com/templates back4app/flutter graphql/tree/flutter graphql offline https //github com/templates back4app/flutter graphql/tree/flutter graphql offline