如何在GraphQL嵌套对象的listItems中实现cursor pagination？

问题背景 #

接手项目后需要为objectGroup对象内的listItems列表添加游标分页，现有查询和片段结构如下：

查询代码 #

export const GET_OBJECT = gql`
  query objectGroup($id: id) {
    objectGroup(objectId: $id) {
      nodes {
        ...fragment1
      }
    }
  }
${FRAGMENT1}
`

Fragment1代码 #

export const FRAGMENT1 = gql`
fragment fragment1 on objectGroup {
 // 无关内容
 listItems {
  ...fragment2
  someMoreData {
    blah
    blah
  }
 }
}
${FRAGMENT2}
`

Fragment2代码 #

export const FRAGMENT2 = gql`
fragment listItem on ListItem {
   id
   name
   size
 }
`

尝试参考项目根查询的分页模式（在nodes旁加pageInfo、first/after参数）无效，为listItems添加分页参数时报错Field 'listItems' doesn't accept argument 'after'，添加pageInfo时又提示Field 'pageInfo' doesn't exist on type 'ListItem'，且无法访问后端Schema。

可行解决方案 #

1. 查找列表的分页专用字段 #

多数GraphQL服务会为需要分页的列表提供连接类型字段，而非直接在原列表字段上添加参数。可以尝试替换listItems为类似listItemsConnection、paginatedListItems的字段，这类字段通常支持first/after参数，并返回包含edges（节点+游标）和pageInfo（分页状态）的结构。

修改后的片段示例：

export const FRAGMENT1 = gql`
fragment fragment1 on objectGroup {
 // 无关内容
 listItemsConnection(first: $first, after: $after) {
   edges {
     node {
       ...fragment2
       someMoreData {
         blah
         blah
       }
     }
     cursor
   }
   pageInfo {
     hasNextPage
     endCursor
   }
 }
}
${FRAGMENT2}
`

对应的查询需新增变量：

export const GET_OBJECT = gql`
  query objectGroup($id: id, $first: Int, $after: String) {
    objectGroup(objectId: $id) {
      nodes {
        ...fragment1
      }
    }
  }
${FRAGMENT1}
`

2. 客户端侧模拟分页 #

如果后端未提供任何分页支持，只能先拉取listItems的全量数据，在前端实现游标分页逻辑：

• 用状态管理工具（如React的useState）维护当前游标（比如用列表项的id作为游标）和每页条数
• 根据游标筛选出对应页码的数据，比如当传入after: lastId时，返回listItems.filter(item => item.id > lastId).slice(0, pageSize)
• 自己判断是否还有下一页：比较当前返回的数据长度和每页条数，或检查是否还有未加载的条目

3. 排查参数命名/类型问题 #

报错提示不接受after参数，可能是后端使用了不同的参数名（比如cursor而非after）或参数类型要求不同（比如需要String!而非可选类型）。可以尝试替换参数名，比如用first+cursor，或尝试偏移分页的limit+offset参数，看是否能正常请求。

4. 参考项目内嵌套分页案例 #

仔细排查项目中其他嵌套对象的分页实现，可能存在统一的命名规则或参数传递方式（比如某些字段需要通过父级传递分页参数），复用已有模式来适配当前场景。

内容的提问来源于stack exchange，提问作者JoeBarbaro