高度なページネーション

このセクションでは、`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 は `after` と `first` と共に `before` と `last` 接続引数も使用されている限り、`usePaginationFragment` を使用して反対方向にページネーションを行うための同じ API を提供します。

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 はまだソリューションに取り組んでいます。

未定

接続の更新

未定

接続のページのプリフェッチ

未定

一度に1ページの項目をレンダリングする

未定

---

このページは役に立ちましたか？

いくつかの簡単な質問に答えることで、サイトの改善にご協力ください。 .