Flutter数据查询插件query_client的使用

query_client 是一个类似 React Hook 的工具，专门为 Flutter 设计。它可以帮助开发者轻松处理 API 请求、自动更新 UI、实现无限加载（分页加载）以及本地数据的即时变更。

特性

1. 简单的API请求

query_client 提供了简单的 API 请求方式，只需传入一个异步函数即可完成数据获取。

// 定义 QueryClient
final _queryClient = QueryClient<bool>(
  ({data, dataList}) async {
    // 模拟延迟
    await Future.delayed(Duration(seconds: 1));
    return true;
  },
);

// 在 Widget 中使用 FutureBuilder
Widget build() {
  return FutureBuilder(
    future: _queryClient.future, // 使用 QueryClient 的 future 属性
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return Text("just work");
      }
      return Text("Loading...");
    },
  );
}

2. 自动更新UI

通过 onUpdate 回调，可以实现在数据变化时自动更新 UI。

final _queryClient = QueryClient<bool>(
  ({data, dataList}) async {
    await Future.delayed(Duration(seconds: 1));
    return true;
  },
  onUpdate: () {
    // 如果需要自动更新 UI，可以调用 setState
    if (mounted) setState(() {});
  },
);

Widget build() {
  if (_queryClient.isLoading) {
    return Center(child: Text("Loading..."));
  }

  if (_queryClient.isError) {
    print("[MyWidget] error ${_queryClient.error}");
    return GestureDetector(
      child: Center(child: Text("🤕 Something went wrong! Tap to retry")),
      onTap: () {
        // 重试请求
        _queryClient.request();
      },
    );
  }

  return Center(child: Text("🎉 It works! ${_queryClient.data}"));
}

3. 无限加载（分页模式）

query_client 支持无限加载功能，可以通过 loadMore() 方法加载更多数据。

final _queryClient = QueryClient<bool>(
  ({data, dataList}) async {
    if (data != null) {
      // 使用上一次的数据来加载下一页
      await Future.delayed(Duration(seconds: 1));
    } else {
      await Future.delayed(Duration(seconds: 1));
    }
    return true;
  },
  onUpdate: () {
    if (mounted) setState(() {});
  },
);

Widget build() {
  if (_queryClient.isLoading) {
    return Center(child: Text("Loading..."));
  }

  if (_queryClient.isError) {
    print("[MyWidget] error ${_queryClient.error}");
    return GestureDetector(
      child: Center(child: Text("🤕 Something went wrong! Tap to retry")),
      onTap: () {
        // 重试请求
        _queryClient.request();
      },
    );
  }

  return GestureDetector(
    child: Center(
      child: Text("🎉 It works! ${_queryClient.data}. Tap to load more."),
    ),
    onTap: () {
      // 加载更多数据
      _queryClient.loadMore();
    },
  );
}

4. 数据变更（Mutate Data）

当需要对已加载的数据进行变更（如删除一条记录），可以使用 mutate() 方法。

final _queryClient = QueryClient<bool>(
  ({data, dataList}) async {
    if (data != null) {
      // 使用上一次的数据来加载下一页
      await Future.delayed(Duration(seconds: 1));
    } else {
      await Future.delayed(Duration(seconds: 1));
    }
    return true;
  },
  onUpdate: () {
    if (mounted) setState(() {});
  },
);

Widget build() {
  if (_queryClient.isLoading) {
    return Center(child: Text("Loading..."));
  }

  if (_queryClient.isError) {
    print("[MyWidget] error ${_queryClient.error}");
    return GestureDetector(
      child: Center(child: Text("🤕 Something went wrong! Tap to retry")),
      onTap: () {
        // 重试请求
        _queryClient.request();
      },
    );
  }

  final list = data.list;

  return GestureDetector(
    child: Column(
      children: list.map((x) {
        return GestureDetector(
          child: Text(x.name),
          onTap: () {
            // 删除该项
            _queryClient.mutate(({data, dataList}) {
              // 从列表中移除该数据
              final originIndex = data.list.indexWhere((y) => y.id == x.id);
              final origin = data.list.removeAt(originIndex);

              // 发送删除请求到服务器
              return Request.deleteItem(x.id)
                .then((res) {
                  // 成功则无需操作
                })
                .catchError((err) {
                  // 失败则将数据放回原位置
                  data.list.insert(originIndex, origin);
                  // 提示用户
                  Toast.show("🤕 Something went wrong! Try again!");
                });
            });
          },
        );
      }).toList(),
    ),
    onTap: () {
      // 加载更多数据
      _queryClient.loadMore();
    },
  );
}