高级分页

在本节中，我们将介绍如何实现比usePaginationFragment默认情况下涵盖的更高级的分页用例。

跨多个连接进行分页

如果您需要在同一组件中对多个连接进行分页，您可以多次使用usePaginationFragment

import type {CombinedFriendsListComponent_user$key} from 'CombinedFriendsListComponent_user.graphql';
import type {CombinedFriendsListComponent_viewer$key} from 'CombinedFriendsListComponent_viewer.graphql';

const React = require('React');

const {graphql, usePaginationFragment} = require('react-relay');

type Props = {
  user: CombinedFriendsListComponent_user$key,
  viewer: CombinedFriendsListComponent_viewer$key,
};

function CombinedFriendsListComponent(props: Props) {

  const {data: userData, ...userPagination} = usePaginationFragment(
    graphql`
      fragment CombinedFriendsListComponent_user on User {
        name
        friends
          @connection(
            key: "CombinedFriendsListComponent_user_friends_connection"
          ) {
          edges {
            node {
              name
              age
            }
          }
        }
      }
    `,
    props.user,
  );

  const {data: viewerData, ...viewerPagination} = usePaginationFragment(
    graphql`
      fragment CombinedFriendsListComponent_user on Viewer {
        actor {
          ... on User {
            name
            friends
              @connection(
                key: "CombinedFriendsListComponent_viewer_friends_connection"
              ) {
              edges {
                node {
                  name
                  age
                }
              }
            }
          }
        }
      }
    `,
    props.viewer,
  );

  return (...);
}

但是，我们建议尝试在每个组件中保持单个连接，以使组件更容易理解。

双向分页

在分页部分中，我们介绍了如何使用usePaginationFragment在一个"向前"方向上进行分页。但是，连接还允许在相反的"向后"方向上进行分页。"向前"和"向后"方向的含义将取决于连接中项目的排序方式，例如，"向前"可能意味着最近，而"向后"可能意味着不太最近。

无论方向的语义含义如何，Relay 还提供相同的 API 在相反方向上进行分页，使用usePaginationFragment，只要before和last连接参数也与after和first一起使用。

import type {FriendsListComponent_user$key} from 'FriendsListComponent_user.graphql';

const React = require('React');
const {Suspense} = require('React');

const {graphql, usePaginationFragment} = require('react-relay');

type Props = {
  userRef: FriendsListComponent_user$key,
};

function FriendsListComponent(props: Props) {
  const {
    data,
    loadPrevious,
    hasPrevious,
    // ... forward pagination values
  } = usePaginationFragment(
    graphql`
      fragment FriendsListComponent_user on User {
        name
        friends(after: $after, before: $before, first: $first, last: $last)
          @connection(key: "FriendsListComponent_user_friends_connection") {
          edges {
            node {
              name
              age
            }
          }
        }
      }
    `,
    userRef,
  );

  return (
    <>
      <h1>Friends of {data.name}:</h1>
      <List items={data.friends?.edges.map(edge => edge.node)}>
        {node => {
          return (
            <div>
              {node.name} - {node.age}
            </div>
          );
        }}
      </List>

      {hasPrevious ? (
        <Button onClick={() => loadPrevious(10)}>
          Load more friends
        </Button>
      ) : null}

      {/* Forward pagination controls can go simultaneously here */}
    </>
  );
}

• "向前"和"向后"的 API 完全相同，只是名称不同。当向前分页时，将使用after和first连接参数，当向后分页时，将使用before和last连接参数。
• 请注意，"向前"和"向后"分页的基元都是从对usePaginationFragment的一次调用中公开的，因此"向前"和"向后"分页可以在同一组件中同时执行。

自定义连接状态

默认情况下，当使用usePaginationFragment和@connection时，Relay 将在"向前"分页时将新页面的项目追加到连接中，并在"向后"分页时将新页面的项目预先追加到连接中。这意味着您的组件将始终渲染完整的连接，包括通过分页累积的所有项目，或者通过突变或订阅添加或删除的项目。

但是，您可能需要不同的行为来合并和累积分页结果（或对连接的其他更新），或者从对连接的更改派生本地组件状态。以下是一些示例

• 跟踪连接的不同可见切片或窗口。
• 在视觉上将每个项目的页面分开。这需要了解已获取的每个页面内确切的项目集。
• 同时显示同一连接的不同端，同时跟踪它们之间的 "间隙"，并能够在执行间隙之间的分页时合并结果。例如，想象一下渲染一个评论列表，其中最旧的评论显示在顶部，然后是一个可以交互的 "间隙" 用于分页，然后底部显示一个部分，其中显示由用户或实时订阅添加的最新评论。

为了解决这些更复杂的用例，Relay 仍在努力寻找解决方案

待定

刷新连接

待定

预取连接的页面

待定

一次渲染一页项目

待定

---

此页面有用吗？

通过以下方式帮助我们改进网站 回答几个简短的问题.