使用 AWS AppSync 实现分页

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

分页的意义

本文将介绍如何使用 AWS AppSync API 和 AWS Amplify 框架在 GraphQL 中实现分页。使用分页的主要目的是控制和限制每次从后端获取并返回给客户端的数据量。通过控制后端数据检索的工作量，分页有助于构建高效且经济的解决方案。此外，它还可以通过更快地向应用程序返回较小的数据集来提高整体响应速度。

分页类型

两种常见的分页方式是基于偏移量的分页和基于标记的分页。基于偏移量的分页需要指定页面大小和起始点：即要开始获取数据的行或页码。使用页面时，页面及其大小共同决定了要开始获取数据的行（例如：offset = (page - 1) * page_size - 1在从零开始的索引中）。基于偏移量的分页常见于关系型数据库。例如，在 MySQL 中，可以使用 `--offset` 子句从LIMIT 指定的偏移量获取数据。在本例中，偏移量为 5（从该行之后获取数据），页面大小为 10（返回 10 个项目）。

SELECT * FROM tbl LIMIT 5,10;  # Retrieve rows 6-15

基于令牌的分页使用令牌来指定要获取后续条目的记录以及页面大小。令牌的具体实现方式取决于系统。DynamoDB 就是一个使用令牌分页对查询结果进行分页的系统示例。在 DynamoDB 中，查询结果可能会返回一个元素。这是一个令牌，表示可以针对此特定查询获取更多条目。然后，您可以通过重复查询并将 `<token>` 设置为 `<token>` 的最后一个值来LastEvaluatedKey继续查询并获取剩余条目。ExclusiveStartKeyLastEvaluatedKey

AWS AppSync 的分页功能是如何工作的

AWS AppSync 是一项完全托管的 GraphQL 服务，可让您轻松在云端构建数据驱动型解决方案。借助 AWS Amplify GraphQL 转换，您可以快速构建 AppSync API，其类型由您账户中的数据源提供支持。例如，您可以@model在模式中使用指令来生成由 DynamoDB 表提供支持的 API。

让我们来看看如何使用 Amplify 和 AppSync 实现分页功能。我构建了一个简单的 React 应用来演示如何使用 AppSync 实现分页：使用 AWS AppSync 实现分页。您可以在这里找到完整的代码：https://github.com/onlybakam/todo-app-pagination。我使用了Amplify API 库来轻松地与 AppSync API 进行交互。

我创建了一个新的 Amplify 项目，并使用 CLI 创建了一个 AppSync API。要了解如何开始使用，请参阅入门指南。然后，我创建了以下架构：

type Todo
  @model
  @key(
    fields: ["owner", "dueOn"]
    name: "ByDate"
    queryField: "listTodosByDate"
  ) {
  id: ID!
  name: String!
  description: String
  owner: String!
  dueOn: AWSDateTime!
}

该@key指令允许您创建查询，按所有者获取待办事项，并按截止日期排序。请参阅Amplify Framework 文档 - 数据访问模式，了解如何@key启用各种数据访问模式。

要获取某个所有者的待办事项列表，请执行ListTodosByDate查询。您可以使用参数指定要返回的项目数量limit。默认情况下，限制为 100。您还可以使用参数指定项目的排序方式sortDirection（设置为 `true`ASC或 `false` DESC）。

  query ListTodosByDate(
    $owner: String
    $dueOn: ModelStringKeyConditionInput
    $sortDirection: ModelSortDirection
    $filter: ModelTodoFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listTodosByDate(
      owner: $owner
      dueOn: $dueOn
      sortDirection: $sortDirection
      filter: $filter
      limit: $limit
      nextToken: $nextToken
    ) {
      items {
        id
        name
        description
        owner
        dueOn
      }
      nextToken
    }
  }

查询返回一个项目列表和一个nextToken字段。如果nextToken设置了该字段，则表示还有更多项目需要获取。在后续查询中，您可以将此值作为查询参数传递，以便从上次返回的最后一个项目之后继续获取项目。

在应用程序中，我们希望能够前后翻阅待办事项。为此，我们维护了 3 个状态变量。

  const [nextToken, setNextToken] = useState(undefined)
  const [nextNextToken, setNextNextToken] = useState()
  const [previousTokens, setPreviousTokens] = useState([])

• nextToken这是用于获取当前项目的令牌
• nextNextToken这是上次获取数据时返回的令牌。如果设置了此令牌，则可以进行分页。
• previousTokens是一个包含先前标记的数组。这些标记允许我们对待办事项列表进行反向分页。如果数组中存在某个标记，则可以进行反向分页。

每当待办事项列表发生变化时owner，都会获取一组新的待办事项。nextTokensortDirection

import { listTodosByDate } from './graphql/queries'
import { API, graphqlOperation } from '@aws-amplify/api'

useEffect(() => {
  const fetch = async () => {
    const variables = {
      nextToken,
      owner,
      limit,
      sortDirection,
    }
    const result = await API.graphql(graphqlOperation(listTodosByDate, variables))
    setNextNextToken(result.data.listTodosByDate.nextToken)
    setTodos(result.data.listTodosByDate.items)
  }

  fetch()
}, [nextToken, owner, sortDirection])

正在加载初始项目列表

当所有者变更时，所有字段都会重置。`is`nextToken被设置为`undefined`，这使得查询会从头开始获取项目。查询返回后，nextToken结果中的 `value` 会被赋值给 `is` nextNextToken。这里需要注意的是，不要立即将该值赋给状态，nextToken因为这会立即触发另一次获取操作。

分页向前

如果nextNextToken设置了分页，则可以向前分页。当用户按下“下一页”按钮时，当前值nextToken会被添加到previousTokens数组中。接下来，数组nextToken会被设置为当前值nextNextToken。最后，nextNextToken数组会被设置为undefinednextToken 。当查询返回结果时，结果中的值会被再次赋值给数组nextNextToken。只要查询表明还有更多项目需要分页，就可以重复此过程。

向后分页

该previousTokens数组按顺序存储先前使用的标记（可以将其视为历史堆栈）。要向后分页，需要从数组中弹出最后一个值并将其赋值给 `nextToken`，从而nextToken触发新的查询。这样，您就可以从已知的“起始点”重复查询。查询结果可能会返回不同的 ` nextTokennextToken`。这是因为自返回 `nextToken` 以来，可能已经插入或删除了条目。通过将结果中的A`nextToken` 值赋给 ` nextToken` ，您可以从正确的位置继续向前分页。nextTokennextNextToken

结论

本文概述了分页功能，并提供了一个使用 AppSync API 在 React 应用中处理分页的简单解决方案。AWS AppSync 和 AWS Amplify 的入门非常简单。请点击此处查看文档。

您可以在这里找到此应用程序的代码：https://github.com/onlybakam/todo-app-pagination。您可以在这里查看它的实现：使用 AWS AppSync 进行分页。