如何在AWS Amplify GraphQL查询中实现分页与排序（Flutter场景）

核心思路 #

要实现需求，需在API查询中补充排序规则和分页条件：

1. 初始加载：按消息时间戳倒序查询，获取最新的10条消息
2. 上滑加载：基于当前列表中最早的消息时间戳，查询时间戳更早的10条消息

修改后的API查询代码 #

Future<PaginatedResult<Message>?> getMessages({
  required String conversationID,
  String? earliestTimestamp, // 可选参数：上一页最早消息的时间戳，用于加载更早的消息
}) async {
  try {
    // 基础查询条件：匹配目标会话ID
    QueryPredicate predicate = Message.CONVERSATIONID.eq(conversationID);
    
    // 若存在上一页的最早时间戳，追加"时间戳小于该值"的条件，筛选更早的消息
    if (earliestTimestamp != null) {
      predicate = predicate.and(Message.TIMESTAMP.lt(earliestTimestamp));
    }

    final request = ModelQueries.list(
      Message.classType,
      where: predicate,
      // 按时间戳倒序排列，确保最新消息排在结果首位
      sort: const [
        QuerySortBy(field: "timestamp", order: QuerySortOrder.descending),
      ],
      limit: 10,
    );
    final response = await Amplify.API.query(request: request).response;
    return response.data;
  } on ApiException catch (e) {
    safePrint('Query failed: $e');
  }
  return null;
}

页面使用逻辑 #

1. 初始加载：进入会话页面时直接调用查询方法，拿到最新10条消息。若需按聊天顺序（旧→新）显示，可反转结果列表：

   final result = await getMessages(conversationID: currentConvId);
   if (result != null) {
     List<Message> messages = result.items.reversed.toList();
     // 更新页面状态，渲染消息列表
   }
   

2. 上滑加载更多：监听列表上滑事件，取当前列表中最早的消息时间戳传入查询方法，将新获取的更早消息添加到列表头部：

   // 假设当前消息列表为_messages，最早的消息是列表第一条
   final earliestMsg = _messages.first;
   final result = await getMessages(
     conversationID: currentConvId,
     earliestTimestamp: earliestMsg.timestamp,
   );
   if (result != null) {
     // 反转新结果（因查询结果是倒序，需转为旧→新顺序后加到列表头部）
     List<Message> newMessages = result.items.reversed.toList();
     _messages.insertAll(0, newMessages);
     // 更新页面状态
   }
   

关键说明 #

• 排序参数：ModelQueries.list支持sort参数，用法和DataStore的sortBy一致，传入QuerySortBy数组即可指定排序字段和顺序
• 分页逻辑：通过timestamp的范围查询实现分页，比依赖nextToken更直观可控，避免数据变更导致的分页异常
• 字段选择：使用自定义的timestamp字段排序，比Amplify自动生成的createdAt更准确，能精准对应消息实际发送时间

内容的提问来源于stack exchange，提问作者Batuhancan GÜRCAN