Flutter本地数据存储插件ferry_hive_store的使用

Flutter本地数据存储插件ferry_hive_store的使用

简介

ferry_hive_store 是一个用于在Flutter应用中持久化数据的存储实现，它基于 hive 库。通过这个插件，您可以轻松地将GraphQL查询和突变的结果保存到本地存储中。

示例代码

以下是一个完整的示例demo，展示了如何在Flutter项目中使用 ferry_hive_store 插件。

1. 添加依赖

首先，在您的 pubspec.yaml 文件中添加必要的依赖项：

dependencies:
  flutter:
    sdk: flutter
  ferry: ^0.8.0
  ferry_hive_store: ^0.2.0
  hive: ^2.0.4
  hive_flutter: ^1.1.0

然后运行 flutter pub get 来安装这些依赖。

2. 初始化Hive

在您的应用程序启动时，初始化 Hive 并打开一个盒子（box）来存储数据。

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:ferry/ferry.dart';
import 'package:ferry_hive_store/ferry_hive_store.dart';

void main() async {
  // 初始化Hive
  await Hive.initFlutter();

  // 打开一个名为'graphql'的盒子
  await Hive.openBox('graphql');

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

3. 设置FerryClient

接下来，配置 FerryClient 使用 HiveStore 来持久化数据。

import 'package:ferry/ferry.dart';
import 'package:ferry_hive_store/ferry_hive_store.dart';
import 'package:hive_flutter/hive_flutter.dart';

// 创建一个HiveStore实例
final store = HiveStore(Hive.box('graphql'));

// 创建一个Link实例（这里假设您有一个GraphQL服务器）
final link = HttpLink('https://your-graphql-endpoint.com/graphql');

// 创建FerryClient实例
final client = Client(link: link, cache: Cache(store: store));

4. 使用FerryClient进行查询

现在，您可以使用 client 实例来进行GraphQL查询，并且结果会自动保存到本地存储中。

import 'package:ferry/ferry.dart';
import 'package:gql_exec/gql_exec.dart';

// 定义一个简单的查询
final query = QueryOptions(
  document: gql(r'''
    query GetTodos {
      todos {
        id
        text
        completed
      }
    }
  '''),
);

// 执行查询并打印结果
client.request(query).listen((response) {
  print(response.data);
});

5. 在UI中展示数据

最后，您可以在Flutter UI中展示从本地存储中获取的数据。

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
      ),
      body: ValueListenableBuilder<Box>(
        valueListenable: Hive.box('graphql').listenable(),
        builder: (context, box, widget) {
          final todos = box.get('todos');
          if (todos == null) {
            return Center(child: Text('No todos found'));
          }

          return ListView.builder(
            itemCount: todos.length,
            itemBuilder: (context, index) {
              final todo = todos[index];
              return ListTile(
                title: Text(todo['text']),
                trailing: Checkbox(
                  value: todo['completed'],
                  onChanged: (value) {
                    // 更新Todo状态的逻辑
                  },
                ),
              );
            },
          );
        },
      ),
    );
  }
}