求助：无Viewer的Relay Modern客户端GraphQL分页实现问题

首先给你吃个定心丸：你完全没必要纠结viewer字段——Relay官方确实明确说了它不是必需的，直接在Query根节点上实现分页是完全可行的，你的方向没走错，只是几个细节需要调整。

你的当前写法问题分析 #

你现在把片段定义在Query类型上并使用@connection指令，这个思路是对的，但可能忽略了几个关键细节：

• 缺少分页必需的游标参数（比如after，这是加载下一页的核心）
• 客户端组件如何正确绑定这个分页片段的逻辑
• 服务端是否严格返回符合Relay规范的Connection结构

正确的实现步骤 #

1. 修正GraphQL查询与片段 #

首先调整你的查询和片段，确保包含完整的分页参数，并且@connection的key保持唯一（避免和其他分页逻辑冲突）：

query RoutesOrdersQuery($first: Int, $after: String) {
  ...Order_order
}

fragment Order_order on Query {
  orders(first: $first, after: $after) @connection(key: "Order_order") {
    edges {
      node {
        id
        # 这里添加你需要的其他订单字段
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

这里要注意：

• 必须传递after变量（加载下一页时会自动传入当前页的endCursor），first控制每页数据数量
• 一定要请求pageInfo字段，Relay依赖它判断是否还有下一页，以及获取下一页的游标

2. 客户端组件使用usePaginationFragment #

在React组件里，用Relay的usePaginationFragment Hook来处理分页逻辑，完全不需要额外的viewer层：

import { usePaginationFragment } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';

const OrdersList = ({ data }) => {
  const {
    orders,
    loadNext,
    hasNextPage,
    isLoadingNext,
  } = usePaginationFragment(
    graphql`
      fragment Order_order on Query {
        orders(first: $first, after: $after) @connection(key: "Order_order") {
          edges {
            node {
              id
              # 你的订单字段
            }
          }
          pageInfo {
            hasNextPage
            endCursor
          }
        }
      }
    `,
    data
  );

  return (
    <div>
      <ul>
        {orders.edges.map(({ node }) => (
          <li key={node.id}>{node.id}</li>
        ))}
      </ul>
      {hasNextPage && (
        <button onClick={() => loadNext(10)} disabled={isLoadingNext}>
          {isLoadingNext ? '加载中...' : '加载更多'}
        </button>
      )}
    </div>
  );
};

// 在父组件中用useLazyLoadQuery获取初始数据
import { useLazyLoadQuery } from 'react-relay';

const OrdersPage = () => {
  const queryData = useLazyLoadQuery(
    graphql`
      query RoutesOrdersQuery($first: Int, $after: String) {
        ...Order_order
      }
    `,
    { first: 10, after: null }
  );

  return <OrdersList data={queryData} />;
};

3. 服务端确保返回规范的Connection结构 #

你的服务端GraphQL API必须返回符合Relay Connection规范的结构，比如orders字段的返回要包含：

• edges数组：每个元素包含node（你的订单数据）和cursor（分页游标）
• pageInfo对象：包含hasNextPage（布尔值，标识是否还有下一页）、endCursor（当前页最后一条数据的游标）

示例服务端返回结构：

{
  "data": {
    "orders": {
      "edges": [
        {
          "node": { "id": "order_001" },
          "cursor": "YXJyYXljb25uZWN0aW9uOjA="
        },
        {
          "node": { "id": "order_002" },
          "cursor": "YXJyYXljb25uZWN0aW9uOjE="
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "endCursor": "YXJyYXljb25uZWN0aW9uOjE="
      }
    }
  }
}

关键注意事项 #

• @connection的key必须唯一：如果你的应用里有多个针对orders的分页（比如不同筛选条件的订单列表），要给key加上区分标识，比如@connection(key: "Order_order_active")
• 变量命名要符合Relay预期：first/after用于向前分页（加载下一页），last/before用于向后分页（加载上一页），不要自定义变量名
• 确保服务端游标生成逻辑正确：游标要能唯一标识数据的位置，通常可以用Base64编码的ID或偏移量

这样调整后，你就能在没有viewer字段的情况下，完美实现Relay Modern的分页功能了。

内容的提问来源于stack exchange，提问作者Хангелды Илебаев