ページネーション

実際にコネクションをページネーションするには、usePaginationFragmentで利用可能なloadNext関数を用いて次のページのアイテムを読み取ります

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の境界があることを確認する必要があります。

多くの場合、読み込めるアイテムが他にもあるかどうかについての情報にもアクセスが必要です。これは、usePaginationFragmentで利用可能なhasNext値を使用すると実現できます

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は、そのコネクションに読み込めるアイテムがまだあるかどうかを示すbooleanです。この情報は、別のUIコントロールをレンダリングする必要があるかどうかを判断するのに役立ちます。具体的には、Buttonはコネクションにもっと多くの友達がいる場合にのみレンダリングされます。

---

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

このサイトを改善するお手伝いをお願いします 簡単な質問に答えてください.