11、使用 React、GraphQL 和 Apollo Client 实现分页与缓存

使用 React、GraphQL 和 Apollo Client 实现分页与缓存

1. GraphQL 分页与 Apollo Client 在 React 中的实现

在使用 GraphQL API 时，分页是一项高级功能。下面我们将实现一个“More”按钮，用于查询存储库的后续页面，并将新页面与之前的列表合并到 Apollo Client 的缓存中。

步骤 1：扩展查询以支持分页

在 src/Profile/index.js 文件中，扩展查询以包含分页所需的信息：

const GET_REPOSITORIES_OF_CURRENT_USER = gql`
query($cursor: String) {
  viewer {
    repositories(
      first: 5
      orderBy: { direction: DESC, field: STARGAZERS }
      after: $cursor
    ) {
      edges {
        node {
          ...repository
        }
      }
      pageInfo {
        endCursor
        hasNextPage
      }
    }
  }
}
${REPOSITORY_FRAGMENT}
`;

• endCursor 可作为获取下一页存储库时的 $cursor 变量。