如何在AWS Amplify React应用中编辑queries.js实现数据排序？

安全阿岳

2026-6-24

AWS Amplify React自定义排序查询实现方案

问题场景

在AWS Amplify Todo示例学习中，已在AppSync门户成功执行按createdAt降序排序的自定义查询，但在React应用中无法复用该逻辑。默认查询可展示Todo数据但无固定排序，且找不到官方自定义查询示例，需完成两个核心任务：

编辑queries.js添加带排序规则的自定义查询
修改App.js调用该自定义查询

解决方案

1. 更新queries.js中的ownerTodo查询

默认生成的ownerTodo查询缺少排序参数，需补充owner和sortDirection变量，并在查询语句中传入：

export const ownerTodo = /* GraphQL */ `
  query OwnerTodo(
    $owner: String!
    $filter: ModelTodoFilterInput
    $limit: Int
    $nextToken: String
    $sortDirection: ModelSortDirection
  ) {
    ownerTodo(owner: $owner, filter: $filter, limit: $limit, nextToken: $nextToken, sortDirection: $sortDirection) {
      items {
        id
        name
        description
        createdAt
        updatedAt
        owner
        __typename
      }
      nextToken
      __typename
    }
  }
`;

关键修改说明：

新增$owner: String!必填参数，与AppSync中查询的owner参数对应
新增$sortDirection: ModelSortDirection参数，支持传入ASC（升序）或DESC（降序）

2. 修改App.js调用自定义排序查询

替换原有查询为ownerTodo，并传入排序相关变量：

// 异步获取按createdAt降序的Todo数据
async function listTodoItem() {
  // 定义查询变量，替换XXX为实际的owner值
  const queryVariables = {
    owner: "XXX",
    sortDirection: "DESC"
    // 可选保留原有参数：filter、limit、nextToken
    // filter: {},
    // limit: 10,
    // nextToken: ""
  };

  const response = await var_api_client.graphql({
    query: ownerTodo,
    variables: queryVariables
  });

  console.log(response.data.ownerTodo.items);
  var_Putitems(response.data.ownerTodo.items);
}

关键修改说明：