Configuração de Banco de Dados Offline com Flutter e GraphQL

implementando o banco de dados offline primeiro usando a api graphql introdução como você está aqui, deve ter passado pelos outros tutoriais e está familiarizado com a execução de consultas e mutações graphql para buscar e modificar os dados neste documento, vamos explorar como implementar uma interface de usuário offline primeiro com flutter e graphql objetivos entender a arquitetura interna do cliente flutter graphql offline permitir que o aplicativo execute consultas graphql mesmo quando estiver offline implementar persistência de dados offline pré requisitos requeremos que o usuário tenha algum entendimento básico de dart e flutter embora não seja necessário, o livro de receitas graphql será útil para entender alguns dos conceitos graphql https //www back4app com/docs/parse graphql/graphql getting started requeremos que você tenha completado o tópico pré requisito configuração do flutter graphql https //www back4app com/docs/flutter/graphql/flutter graphql setup e tenha a configuração de código anterior e o backend back4app implementado 1 configurando o cache offline o cliente flutter graphql suporta “consultas offline” por padrão, ou seja, não lançará erros se consultarmos alguns dados graphql quando estiver offline e buscará os dados do cache devemos notar que isso é diferente de persistir o cache entre sessões do aplicativo e especificamente o cliente flutter graphql não possui persistência de cache em disco portanto, se o aplicativo for fechado a partir da bandeja do sistema e reaberto, os dados ainda precisariam ser buscados para habilitar o mesmo, precisamos ativar o cache offline vá para main dart https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/lib/main dart#l32 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 configurando preferências armazenadas uma ressalva ao usar o cliente flutter graphql é que ele não armazena nenhum cache próprio quando o aplicativo é fechado, nem hidrata o cache quando o aplicativo é aberto novamente para implementar o mesmo, estaremos utilizando a biblioteca flutter shared preferences ela envolve o armazenamento persistente específico da plataforma para dados simples (nsuserdefaults no ios e macos, sharedpreferences no android, etc ), permitindo essencialmente armazenar dados offline de uma maneira muito simples para instalar a biblioteca, por favor, adicione no pubspec yml https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 arquivo shared preferences ^ 0 5 12 + 4 em main dart https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/lib/main dart#l142 adicione o seguinte 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 } a biblioteca shared preferences armazena dados em um formato de chave valor onde o valor é convertido em uma string json precisaremos analisar esses dados para nosso modelo de dados 3 analisando os dados armazenados localmente vamos criar um novo arquivo chamado programing languages model dart programing languages model dart que armazenará a lógica de análise geraremos essa lógica colando nossa resposta graphql no conversor de modelo json para dart em https //app quicktype io/ https //app quicktype io/ vamos copiar o código gerado e criar um arquivo 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 a lógica de armazenamento offline se os dados não existirem, estaremos usando os dados das preferências compartilhadas se os dados também não estiverem nas preferências compartilhadas, simplesmente mostraríamos um ícone de carregamento agora vamos implementar mudanças para integrar todas as alterações juntas, no método de construção do nosso myhomepagestate myhomepagestate mudaríamos nosso método de construção usaríamos o futurebuilder futurebuilder widget para consumir dados da 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 … usar o widget futurebuilder nos permite escrever código sem precisar usar estado é um processo relativamente rápido obter os dados das preferências compartilhadas também poderíamos mostrar um carregador enquanto estamos inicializando as preferências compartilhadas e obtendo dados de um armazenamento offline agora usamos este objeto de dados offline e renderizamos enquanto os dados do graphql não estão disponíveis também vamos refatorar um pouco o código a seguir, teremos nosso código para o query query https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/main dart 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 ), devemos obter o seguinte conclusão agora somos capazes de garantir uma experiência móvel muito boa armazenando os dados offline e revalidando os dados quando o aplicativo se conecta à internet além disso, um aspecto importante que está melhorando a experiência do usuário é que o cliente flutter graphql armazena em cache a resposta antiga e, ao enviar uma nova solicitação automaticamente por causa disso, não precisamos continuar mostrando telas de carregamento desajeitadas enquanto buscamos os dados novamente o código do artigo está disponível em https //github com/templates back4app/flutter graphql/tree/flutter graphql offline https //github com/templates back4app/flutter graphql/tree/flutter graphql offline