在实施GraphQL分页时，可以参考GraphQL Cursor Connections Specification！

首先

由于我尝试添加分页功能来调用使用NestJS x GraphQL实现的获取用户列表的API，但在Next.js x URQL中却无法成功，所以我想记录一下遇到的问题。

如果这篇文章能对那些遇到同样问题的人提供帮助，我会很高兴。

太长不看

• この解決方法はGraphQLのPaginationをCursor-based paginationで実装した方に有効です

Request, ResponseパラメータはGraphQL Cursor Connections Specificationに従いましょう

环境

课题

我正在尝试使用NestJS创建的分页实现，结合graphql code gen和URQL，在Web端显示页面。

尽管我参考了以下的基本写作方法，但当我试图在自己的环境中重现时，无法获取其他的n条记录。

正如你所看到的，点击“Fetch more”按钮也无法显示接下来的n条内容。

那时设定的请求参数如下所示。

query Users($paginatedUsersInput: PaginatedUsersInput) {
  users(paginatedUsersInput: $paginatedUsersInput) {
    ...paginatedUsers
  }
}

fragment paginatedUsers on PaginatedUsersOutput {
  edges {
    node {
      ...userProfile
    }
  }
  pageInfo {
    endCursor
    hasNext
  }
}

fragment userProfile on UserOutput {
  nickname
  uid
}

{
  edges: {
    node: User
  }
  pageInfo: {
    endCursor: string
    hasNext: boolean
  }
}

解决方案 (jiě jué àn)

通过将输入和输出与 GraphQL 游标连接规范相匹配来解决了这个问题。

以下是我实际修改过的代码：↓

# paginatedUsersInputを除外してfirst, afterだけにする
query Users($first: Int, $after: String) {
  users(first: $first, after: $after) {
    ...paginatedUsers
  }
}

fragment userProfile on UserOutput {
  # ~~ 省略 ~~

{
	edges: {
		// cursorを追加
		cursor: string
		node: User
	}
	pageInfo: {
		endCursor: string
		// hasNextからhasNextPageに変更
		hasNextPage: boolean
	}
}

一切无问题，FetchMore正常运行！

请留意/留神

请注意，我们此次采用的分页方式是基于游标的（Cursor-based），不能应用于基于偏移（Offset-based）或基于时间（Time-based）的方式。

这是我的一些额外讨论。

因为以前从未实现过分页功能，所以这次能够理解并编写成功真是太好了！

我会继续进行开发！

再见！

参考文章