Интеграция оффлайн-обработки данных в Flutter GraphQL

реализация базы данных с приоритетом оффлайн с использованием graphql api введение поскольку вы здесь, вы, вероятно, прошли остальные учебные пособия и знакомы с выполнением запросов и мутаций graphql для получения и изменения данных в этом документе мы собираемся исследовать, как реализовать пользовательский интерфейс с приоритетом оффлайн с помощью flutter и graphql цели понять внутреннюю архитектуру оффлайн клиента flutter graphql позволить приложению выполнять запросы graphql, даже если приложение оффлайн реализовать оффлайн хранение данных предварительные требования мы требуем, чтобы у пользователя было базовое понимание dart и flutter хотя это не обязательно, кулинарная книга graphql будет полезна для понимания некоторых из https //www back4app com/docs/parse graphql/graphql getting started мы требуем, чтобы вы завершили предварительную тему https //www back4app com/docs/flutter/graphql/flutter graphql setup и имели предыдущую настройку кода и реализованный бэкенд back4app 1 настройка оффлайн кэша клиент flutter graphql по умолчанию поддерживает "оффлайн запросы", то есть он не будет выдавать ошибки, если мы запрашиваем некоторые данные graphql в оффлайне и будет извлекать данные из кэша мы должны отметить, что это отличается от сохранения кэша между сессиями приложения, и конкретно клиент flutter graphql не имеет сохранения кэша на диск поэтому, если приложение будет закрыто из системного трея и снова открыто, данные все равно нужно будет получить чтобы включить это, мы должны активировать оффлайн кэш перейдите к 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 настройка сохраненных предпочтений одно предостережение при использовании клиента flutter graphql заключается в том, что он не сохраняет никакой кэш, когда приложение закрыто, и не восстанавливает кэш, когда приложение открывается снова для реализации этого мы будем использовать библиотеку flutter shared preferences она оборачивает платформенно специфичное постоянное хранилище для простых данных (nsuserdefaults на ios и macos, sharedpreferences на android и т д ), по сути позволяя хранить данные оффлайн очень простым способом для установки библиотеки, пожалуйста, добавьте в https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 файл shared preferences ^ 0 5 12 + 4 в https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/lib/main dart#l142 добавьте следующее 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 } библиотека shared preferences хранит данные в виде ключ значение, где значение преобразуется в строку json нам нужно будет разобрать эти данные в нашу модель данных 3 разбор локально хранимых данных мы создадим новый файл под названием programing languages model dart programing languages model dart в котором будет храниться логика разбора мы сгенерируем эту логику, вставив наш ответ graphql в конвертер json в модель dart на https //app quicktype io/ мы скопируем сгенерированный код и создадим файл programing languages model dart programing languages model dart https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/programing languages model dart 4 интеграция логики оффлайн хранения если данные не существуют, мы будем использовать данные из общих предпочтений если данные также отсутствуют в общих предпочтениях, мы просто покажем значок загрузки теперь мы реализуем изменения, чтобы интегрировать все изменения вместе, в методе сборки нашего myhomepagestate myhomepagestate мы изменим наш метод сборки мы будем использовать futurebuilder futurebuilder виджет для получения данных из класса 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 … использование виджета futurebuilder позволяет нам писать код без необходимости использования состояния это относительно быстрый процесс получения данных из общих предпочтений мы также можем показать индикатор загрузки, пока инициализируем общие предпочтения и получаем данные из оффлайн хранилища теперь мы используем этот объект оффлайн данных и отображаем его, пока данные из graphql недоступны мы также немного рефакторим код следующий код будет для запрос запрос https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/main dart виджет 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 ), мы должны получить следующее заключение теперь мы можем обеспечить очень хороший мобильный опыт, храня данные офлайн и повторно проверяя данные, когда приложение подключается к интернету также важным аспектом, который улучшает пользовательский опыт, является то, что клиент flutter graphql кэширует старый ответ и автоматически отправляет новый запрос благодаря этому нам не нужно постоянно показывать неудобные экраны загрузки, пока мы повторно получаем данные код для статьи доступен по адресу https //github com/templates back4app/flutter graphql/tree/flutter graphql offline