usePaginationFragment是否支持同一片段下配置多个connection？

是否可以通过 usePaginationFragment 实现？ #

不能。usePaginationFragment 的设计逻辑是单连接绑定，一个Hook实例只能处理对应fragment内的单个@connection字段，同个fragment内声明多个@connection时，Hook无法识别需要绑定哪个连接，会导致运行时报错或分页逻辑异常。

推荐实现方案 #

最优方案是将两个连接拆分到独立的@refetchable fragment中，在上层组件分别调用两次usePaginationFragment即可同时拿到两个连接的totalResults，且分页逻辑完全解耦，符合Relay的设计规范。

示例代码 #

1. 拆分GraphQL fragment定义：

fragment Component_myConnection1 on Viewer
@refetchable(queryName: "ComponentMyConnection1RefetchQuery") {
    myConnection1 @connection(key: "Component_myConnection1") {
        totalResults
        ...ComponentThatHandlesConnection_myConnection1
    }
}

fragment Component_myConnection2 on Viewer
@refetchable(queryName: "ComponentMyConnection2RefetchQuery") {
    myConnection2 @connection(key: "Component_myConnection2") {
        totalResults
        ...ComponentThatHandlesConnection_myConnection2
    }
}

2. 组件内调用：

const Component = (props) => {
  // 处理第一个连接的分页逻辑
  const {data: conn1Data, loadNext: loadNextConn1, isLoadingNext: isLoadingConn1} = usePaginationFragment(
    Component_myConnection1,
    props.viewer
  );
  // 处理第二个连接的分页逻辑
  const {data: conn2Data, loadNext: loadNextConn2, isLoadingNext: isLoadingConn2} = usePaginationFragment(
    Component_myConnection2,
    props.viewer
  );

  // 上层直接获取两个连接的totalResults
  const totalResults1 = conn1Data.myConnection1.totalResults;
  const totalResults2 = conn2Data.myConnection2.totalResults;

  return (
    <>
      <ComponentThatHandlesConnection_myConnection1
        data={conn1Data.myConnection1}
        loadNext={loadNextConn1}
        isLoading={isLoadingConn1}
      />
      <ComponentThatHandlesConnection_myConnection2
        data={conn2Data.myConnection2}
        loadNext={loadNextConn2}
        isLoading={isLoadingConn2}
      />
    </>
  );
};

备选方案（不推荐） #

如果确实需要保留同个fragment下的多个connection声明，可以改用useRefetchableFragment，手动维护两个连接的分页游标、加载状态，自定义分页请求逻辑。该方案需要自行处理参数拼接和缓存更新，维护成本更高，仅适用于有特殊批量请求需求的场景。

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