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

10min
Реализация базы данных с приоритетом оффлайн с использованием GraphQL API
﻿
Введение
Поскольку вы здесь, вы, вероятно, прошли остальные учебные пособия и знакомы с выполнением запросов и мутаций GraphQL для получения и изменения данных. В этом документе мы собираемся исследовать, как реализовать пользовательский интерфейс с приоритетом оффлайн с помощью Flutter и GraphQL.
Цели
Понять внутреннюю архитектуру оффлайн-клиента flutter graphql
Позволить приложению выполнять запросы graphql, даже если приложение оффлайн
Реализовать оффлайн-хранение данных
Предварительные требования
Мы требуем, чтобы у пользователя было базовое понимание Dart и Flutter.
Хотя это не обязательно, кулинарная книга GraphQL будет полезна для понимания некоторых из концепций GraphQL.
Мы требуем, чтобы вы завершили предварительную тему Настройка Flutter Graphql и имели предыдущую настройку кода и реализованный бэкенд back4app.
- Настройка оффлайн-кэша
Клиент Flutter GraphQl по умолчанию поддерживает "оффлайн-запросы", то есть он не будет выдавать ошибки, если мы запрашиваем некоторые данные GraphQL в оффлайне и будет извлекать данные из кэша.
Мы должны отметить, что это отличается от сохранения кэша между сессиями приложения, и конкретно клиент flutter graphql не имеет сохранения кэша на диск. Поэтому, если приложение будет закрыто из системного трея и снова открыто, данные все равно нужно будет получить.
Чтобы включить это, мы должны активировать оффлайн кэш:
Перейдите к main.dart:
Dart
 return MaterialApp(
   home: GraphQLProvider(
     child: CacheProvider(   // cache provider widget that provides the offline queries support.
       child: MyHomePage(),
     ),
     client: client,
   ),
 );
 return MaterialApp(
   home: GraphQLProvider(
     child: CacheProvider(   // cache provider widget that provides the offline queries support.
       child: MyHomePage(),
     ),
     client: client,
   ),
 );
﻿
Настройка сохраненных предпочтений
Одно предостережение при использовании клиента flutter-graphql заключается в том, что он не сохраняет никакой кэш, когда приложение закрыто, и не восстанавливает кэш, когда приложение открывается снова.
Для реализации этого мы будем использовать библиотеку flutter shared_preferences. Она оборачивает платформенно-специфичное постоянное хранилище для простых данных (NSUserDefaults на iOS и macOS, SharedPreferences на Android и т.д.), по сути позволяя хранить данные оффлайн очень простым способом.
Для установки библиотеки, пожалуйста, добавьте в pubspec.yml файл
 shared_preferences: ^0.5.12+4
В main.dart добавьте следующее:
Dart
 import 'package:shared_preferences/shared_preferences.dart';
2
 class SharedPreferencesHelper {
   static final String _offline_cache_key = 'programmingLanguageListResponse';
5
   static Future<ProgrammingLanguageList> getCache() async {
     final SharedPreferences prefs = await SharedPreferences.getInstance();
     final cache = prefs.getString(_offline_cache_key);
     final offlineData =
        cache != null ? programmingLanguageListFromJson(cache) : null;
11
    return offlineData;
  }

  static Future<bool> setCache(dynamic value) async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();

    return prefs.setString(_offline_cache_key, jsonEncode(value));
  }
}
 import 'package:shared_preferences/shared_preferences.dart';
2
 class SharedPreferencesHelper {
   static final String _offline_cache_key = 'programmingLanguageListResponse';
5
   static Future<ProgrammingLanguageList> getCache() async {
     final SharedPreferences prefs = await SharedPreferences.getInstance();
     final cache = prefs.getString(_offline_cache_key);
     final offlineData =
        cache != null ? programmingLanguageListFromJson(cache) : null;
11
    return offlineData;
  }

  static Future<bool> setCache(dynamic value) async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();

    return prefs.setString(_offline_cache_key, jsonEncode(value));
  }
}
﻿
Библиотека Shared Preferences хранит данные в виде ключ-значение, где значение преобразуется в строку JSON. Нам нужно будет разобрать эти данные в нашу модель данных.
- Разбор локально хранимых данных
Мы создадим новый файл под названием programing_languages_model.dart. В котором будет храниться логика разбора. Мы сгенерируем эту логику, вставив наш ответ graphql в конвертер JSON в модель dart на https://app.quicktype.io/﻿
﻿
Мы скопируем сгенерированный код и создадим файл programing_languages_model.dart https://github.com/templates-back4app/Flutter-GraphQL/blob/flutter-graphql-offline/lib/programing_languages_model.dart﻿
- Интеграция логики оффлайн-хранения
Если данные не существуют, мы будем использовать данные из общих предпочтений. Если данные также отсутствуют в общих предпочтениях, мы просто покажем значок загрузки.
Теперь мы реализуем изменения, чтобы интегрировать все изменения вместе, в методе сборки нашего _MyHomePageState мы изменим наш метод сборки. Мы будем использовать FutureBuilder виджет для получения данных из класса SharedPreferencesHelper.
Dart
 return FutureBuilder<ProgrammingLanguageList>(
   future: SharedPreferencesHelper.getCache(),
   builder: (prefs, snapshot) {
     final offlineData = snapshot.data;
     if (!snapshot.hasError) {
       return SafeArea(
         ….
 return FutureBuilder<ProgrammingLanguageList>(
   future: SharedPreferencesHelper.getCache(),
   builder: (prefs, snapshot) {
     final offlineData = snapshot.data;
     if (!snapshot.hasError) {
       return SafeArea(
         ….
﻿
Использование виджета FutureBuilder позволяет нам писать код без необходимости использования состояния. Это относительно быстрый процесс получения данных из общих предпочтений. Мы также можем показать индикатор загрузки, пока инициализируем общие предпочтения и получаем данные из оффлайн-хранилища.
Теперь мы используем этот объект оффлайн-данных и отображаем его, пока данные из GraphQL недоступны. Мы также немного рефакторим код. Следующий код будет для Запрос﻿https://github.com/templates-back4app/Flutter-GraphQL/blob/flutter-graphql-offline/lib/main.dart виджет.
Dart
 body: Query(
     options: QueryOptions(
       documentNode: gql(query),
     ),
     builder: (
       QueryResult result, {
         Refetch refetch,
         FetchMore fetchMore,
       }) {
        final data = result.data == null
        ? offlineData
        : programmingLanguageListFromJson(
          jsonEncode(result.data));
          if (data == null) {
            return Center(
              child: Text(
                "Loading...",
                style: TextStyle(fontSize: 20.0),
              ));
            } else {
              SharedPreferencesHelper.setCache(data);
              return ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  if (index == 0) {
                    return Center(
                      child: RaisedButton(
                        onPressed: refetch,
                        child: result.loading == true
                        ? Text("Loading...")
                        : Text("Refetch"),
                      ),
                    );
                  }
                  return ListTile(
                    title: Text(data.programmingLanguages
                    .edges[index - 1].node.name),
                    trailing: Text(data.programmingLanguages
                    .edges[index - 1].node.stronglyTyped
                    ? "Strongly Typed"
                    : "Weekly Typed"),
                  );
                },
                itemCount: data.programmingLanguages.edges.length + 1,
              );
              }
            },
  ),
        ),
 body: Query(
     options: QueryOptions(
       documentNode: gql(query),
     ),
     builder: (
       QueryResult result, {
         Refetch refetch,
         FetchMore fetchMore,
       }) {
        final data = result.data == null
        ? offlineData
        : programmingLanguageListFromJson(
          jsonEncode(result.data));
          if (data == null) {
            return Center(
              child: Text(
                "Loading...",
                style: TextStyle(fontSize: 20.0),
              ));
            } else {
              SharedPreferencesHelper.setCache(data);
              return ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  if (index == 0) {
                    return Center(
                      child: RaisedButton(
                        onPressed: refetch,
                        child: result.loading == true
                        ? Text("Loading...")
                        : Text("Refetch"),
                      ),
                    );
                  }
                  return ListTile(
                    title: Text(data.programmingLanguages
                    .edges[index - 1].node.name),
                    trailing: Text(data.programmingLanguages
                    .edges[index - 1].node.stronglyTyped
                    ? "Strongly Typed"
                    : "Weekly Typed"),
                  );
                },
                itemCount: data.programmingLanguages.edges.length + 1,
              );
              }
            },
  ),
        ),
﻿
Мы должны получить следующее:
﻿
Заключение
Теперь мы можем обеспечить очень хороший мобильный опыт, храня данные офлайн и повторно проверяя данные, когда приложение подключается к интернету. Также важным аспектом, который улучшает пользовательский опыт, является то, что клиент flutter-graphql кэширует старый ответ и автоматически отправляет новый запрос. Благодаря этому нам не нужно постоянно показывать неудобные экраны загрузки, пока мы повторно получаем данные.
Код для статьи доступен по адресу: https://github.com/templates-back4app/Flutter-GraphQL/tree/flutter-graphql-offline﻿
Реляционные мутации данных в Flutter с GraphQL
Интеграция Parse SDK в Android Studio: Пошаговый гайд
Интеграция оффлайн-обработки данных в Flutter GraphQL

Реализация базы данных с приоритетом оффлайн с использованием GraphQL API

Введение

Цели

Предварительные требования

1 - Настройка оффлайн-кэша

2: Настройка сохраненных предпочтений

3 - Разбор локально хранимых данных

4 - Интеграция логики оффлайн-хранения

Заключение
