進階分頁

在本節中，我們將介紹如何實作比 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 在單一的「向前」方向進行分頁。但是，連線也允許在相反的「向後」方向進行分頁。「向前」和「向後」方向的意義將取決於連線中項目的排序方式，例如「向前」可能表示較新的，而「向後」可能表示較舊的。

無論方向的語義意義如何，只要同時使用 before 和 last 連線參數以及 after 和 first，Relay 也會提供相同的 API 來在相反的方向進行分頁，使用 usePaginationFragment。

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 仍在開發解決方案

待定

重新整理連線

待定

預先載入連線頁面

待定

一次渲染一個項目頁面

待定

---

此頁面是否實用？

請協助我們透過 回答幾個快速問題來讓網站更好.