分页

为了真正对连接进行分页，我们需要使用 `loadNext` 函数来获取下一页项目，它可从 `usePaginationFragment` 获取。

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

const React = require('React');

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

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

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

function FriendsListComponent(props: Props) {
  const {data, loadNext} = usePaginationFragment(
    graphql`
      fragment FriendsListComponent_user on User
      @refetchable(queryName: "FriendsListPaginationQuery") {
        name
        friends(first: $count, after: $cursor)
        @connection(key: "FriendsList_user_friends") {
          edges {
            node {
              name
              age
            }
          }
        }
      }
    `,
    props.user,
  );

  return (
    <>
      <h1>Friends of {data.name}:</h1>
      <div>
        {(data.friends?.edges ?? []).map(edge => {
          const node = edge.node;
          return (
            <Suspense fallback={<Glimmer />}>
              <FriendComponent user={node} />
            </Suspense>
          );
        })}
      </div>

      <Button
        onClick={() => {
          loadNext(10)
        }}>
        Load more friends
      </Button>
    </>
  );
}

module.exports = FriendsListComponent;

让我们总结一下这里发生的事情。

• `loadNext` 接受一个计数参数，以指定从服务器获取更多连接项目数。在这种情况下，当调用 `loadNext` 时，我们将获取当前渲染的 `User` 的朋友列表中的下一个 10 个朋友。
• 当获取下一个项目的请求完成时，连接将自动更新，并且组件将使用连接中的最新项目重新渲染。在我们的例子中，这意味着 `friends` 字段将始终包含我们到目前为止获取的所有朋友。默认情况下，**Relay 将在分页请求完成时自动将新项目追加到连接中**，并将它们提供给您的片段组件。如果您需要不同的行为，请查看我们的 高级分页用例 部分。
• `loadNext` 可能导致组件或新的子组件挂起（如 使用 Suspense 的加载状态 中所述）。这意味着您需要确保在组件上方有一个 `Suspense` 边界。

通常，您还需要访问有关是否有更多项目可供加载的信息。为此，您可以使用 `hasNext` 值，它也来自 `usePaginationFragment`。

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

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

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

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

function FriendsListComponent(props: Props) {
  // ...
  const {
    data,
    loadNext,
    hasNext,
  } = usePaginationFragment(
    graphql`...`,
    props.user,
  );

  return (
    <>
      <h1>Friends of {data.name}:</h1>
      {/* ... */}

      {/* Only render button if there are more friends to load in the list */}
      {hasNext ? (
        <Button
          onClick={/* ... */}>
          Load more friends
        </Button>
      ) : null}
    </>
  );
}

module.exports = FriendsListComponent;

• `hasNext` 是一个布尔值，指示连接中是否有更多可用的项目。此信息对于确定是否应渲染不同的 UI 控件很有用。在我们的具体情况下，只有在连接中还有更多朋友可用时，我们才会渲染 `Button`。

---

此页面是否有用？

通过以下方式帮助我们改进网站： 回答几个快速问题.