バージョン: v18.0.0

usePaginationFragment

`usePaginationFragment`

usePaginationFragment を使用して、@connection を使用し、その上でページネーションを行うフラグメントをレンダリングできます

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

const React = require('React');

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

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

function FriendsList(props: Props) {
  const {
    data,
    loadNext,
    loadPrevious,
    hasNext,
    hasPrevious,
    isLoadingNext,
    isLoadingPrevious,
    refetch, // For refetching connection
  } = 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>

      <List items={data.friends?.edges.map(edge => edge.node)}>
        {node => {
          return (
            <div>
              {node.name} - {node.age}
            </div>
          );
        }}
      </List>
      <Button onClick={() => loadNext(10)}>Load more friends</Button>
    </>
  );
}

module.exports = FriendsList;

引数

fragment: graphqlテンプレートリテラルを使用して指定されたGraphQLフラグメント。
- このフラグメントには、接続フィールドに @connection ディレクティブが必要です。そうでない場合は、使用するとエラーがスローされます。
- このフラグメントには @refetchable ディレクティブが必要です。そうでない場合は、使用するとエラーがスローされます。@refetchable ディレクティブは、「リフェッチ可能」なフラグメント、つまり Viewer 型または Query 型、または Node を実装する型 (つまり id を持つ型) で宣言されたフラグメントにのみ追加できます。
  - ページネーションクエリを手動で指定する必要は *ない* ことに注意してください。@refetchable ディレクティブは、指定された queryName でクエリを自動生成します。これにより、生成されたファイル: <queryName>.graphql.js からインポートできるクエリの Flow 型も生成されます。
fragmentReference: *フラグメント参照* は、Relay がストアからフラグメントのデータを読み取るために使用する不透明な Relay オブジェクトです。より具体的には、データが読み取られる特定のオブジェクトインスタンスに関する情報が含まれています。
- フラグメント参照の型は、生成された Flow 型からファイル <fragment_name>.graphql.js からインポートでき、Props の型を宣言するために使用できます。フラグメント参照型の名前は <fragment_name>$key になります。フラグメント参照 prop の型が正しく宣言されていることを強制するために、lint ruleを使用します。

戻り値

次のプロパティを含むオブジェクト

data: Relay ストアから読み取られたデータを含むオブジェクト。オブジェクトは、指定されたフラグメントの形状と一致します。
- データの Flow 型もこの形状と一致し、GraphQL スキーマから派生した型が含まれます。
isLoadingNext: 接続内の *次の* 項目のページネーションリクエスト (インクリメンタルデータペイロードを含む) が現在進行中かどうかを示すブール値。
isLoadingPrevious: 接続内の *前の* 項目のページネーションリクエスト (インクリメンタルデータペイロードを含む) が現在進行中かどうかを示すブール値。
hasNext: 接続の末尾が「前方」方向に到達したかどうかを示すブール値。その方向にクエリする項目がさらに存在する場合は true になり、それ以外の場合は false になります。
hasPrevious: 接続の末尾が「後方」方向に到達したかどうかを示すブール値。その方向にクエリする項目がさらに存在する場合は true になり、それ以外の場合は false になります。
loadNext: 「前方」方向の接続でより多くの項目をフェッチするために使用される関数。
- 引数
  - count: ページネーションリクエストでクエリする項目の数を示す数値。
  - options: *[オプション]* オプションオブジェクト
    - onComplete: リフェッチリクエストが完了するたびに (インクリメンタルデータペイロードを含む) 呼び出される関数。リクエスト中にエラーが発生した場合、onComplete は最初のパラメータとして Error オブジェクトを指定して呼び出されます。
- 戻り値
  - disposable: dispose 関数を含むオブジェクト。disposable.dispose() を呼び出すと、ページネーションリクエストがキャンセルされます。
- 動作
  - loadNext を呼び出しても、コンポーネントが中断される *ことはありません*。代わりに、リクエストが進行中は isLoadingNext 値が true に設定され、ページネーションリクエストからの新しい項目が接続に追加され、コンポーネントが再レンダリングされます。
  - loadNext の呼び出しから開始されたページネーションリクエストは、ページネーション変数 (ページネーションを実行するために変更する必要がある) を *除く*、接続をフェッチするために最初に使用されたものと同じ変数を使用 *常に* します。ページネーション中にページネーション変数以外の変数を変更することは意味がありません。異なる接続に対してクエリを実行することになるからです。
loadPrevious: 「後方」方向の接続でより多くの項目をフェッチするために使用される関数。
- 引数
  - count: ページネーションリクエストでクエリする項目の数を示す数値。
  - options: *[オプション]* オプションオブジェクト
    - onComplete: リフェッチリクエストが完了するたびに (インクリメンタルデータペイロードを含む) 呼び出される関数。リクエスト中にエラーが発生した場合、onComplete は最初のパラメータとして Error オブジェクトを指定して呼び出されます。
- 戻り値
  - disposable: dispose 関数を含むオブジェクト。disposable.dispose() を呼び出すと、ページネーションリクエストがキャンセルされます。
- 動作
  - loadPrevious を呼び出しても、コンポーネントが中断される *ことはありません*。代わりに、リクエストが進行中は isLoadingPrevious 値が true に設定され、ページネーションリクエストからの新しい項目が接続に追加され、コンポーネントが再レンダリングされます。
  - loadPrevious の呼び出しから開始されたページネーションリクエストは、ページネーション変数 (ページネーションを実行するために変更する必要がある) を *除く*、接続をフェッチするために最初に使用されたものと同じ変数を使用 *常に* します。ページネーション中にページネーション変数以外の変数を変更することは意味がありません。異なる接続に対してクエリを実行することになるからです。
refetch: 新しい変数セットを使用して接続フラグメントをリフェッチするために使用される関数。
- 引数
  - variables: @refetchable クエリのフェッチに使用する新しい変数値を格納するオブジェクト。
    - これらの変数は、フラグメント内で参照されている GraphQL 変数と一致する必要があります。
    - ただし、リフェッチリクエストで変更する予定の変数のみを指定する必要があります。この入力から省略されたフラグメントによって参照される変数は、元の親クエリで指定された値を使用します。たとえば、フラグメントを最初にフェッチしたときとまったく同じ変数でリフェッチするには、refetch({}) を呼び出すことができます。
    - 同様に、$id 変数に id 値を渡すのは、フラグメントが別の id でリフェッチする必要がない限り *オプション* です。@refetchable フラグメントをリフェッチする場合、Relay はレンダリングされたオブジェクトの id をすでに認識しています。
  - options: *[オプション]* オプションオブジェクト
    - fetchPolicy: キャッシュされたデータを使用するかどうか、および利用可能なキャッシュデータに基づいてネットワークリクエストを送信するタイミングを決定します。詳細については、フェッチポリシーセクションを参照してください。
    - onComplete: リフェッチリクエストが完了するたびに (インクリメンタルデータペイロードを含む) 呼び出される関数。
- 戻り値
  - disposable: dispose 関数を含むオブジェクト。disposable.dispose() を呼び出すと、リフェッチリクエストがキャンセルされます。
- 動作
  - 新しい変数セットを使用して refetch を呼び出すと、フラグメントが *新たに提供された変数を使用して* 再度フェッチされます。指定する必要がある変数は、フラグメント内で参照されている変数のみであることに注意してください。この例では、lang 変数に新しい値を渡して、現在レンダリングされているコメントの翻訳された本文をフェッチすることを意味します。
  - refetch を呼び出すと、コンポーネントが再レンダリングされ、指定された fetchPolicy と、キャッシュされたデータが利用可能かどうか、またはネットワークリクエストを送信して待機する必要があるかによって、*中断* する可能性があります。リフェッチによってコンポーネントが中断された場合は、このコンポーネントをラップする Suspense バウンダリがあることを確認する必要があります。
  - Suspense の詳細については、「Suspense を使用した読み込み状態」ガイドを参照してください。

動作

コンポーネントはフラグメントデータの更新を自動的にサブスクライブします。この特定の User のデータがアプリ内のどこかで更新された場合 (たとえば、新しいデータをフェッチしたり、既存のデータを変更したりした場合)、コンポーネントは最新の更新されたデータで自動的に再レンダリングされます。
特定のフラグメントのデータが不足しており、そのデータが現在親クエリによってフェッチされている場合、コンポーネントは中断されます。
- Suspense の詳細については、「Suspense を使用した読み込み状態」ガイドを参照してください。
ページネーション (loadNext または loadPrevious) では、コンポーネントが中断される *ことはありません*。

`PaginationContainer` との違い

ページネーションクエリは、@refetchable フラグメントを使用することで Relay によって自動的に生成されるため、この API では指定する必要がなくなりました。
この API は、すぐに使用できる双方向の同時ページネーションをサポートしています。
この API では、PaginationContainer のように、getVariables または getFragmentVariables 構成関数を渡す必要がなくなりました。
- これは、これまで曖昧に定義されていた概念であった、ページネーションにvariablesとfragmentVariablesの区別がなくなったことを意味します。ページネーションリクエストは、ページネーションを実行するために変更が必要なページネーション変数以外は、接続の取得に最初に使用されたものと同じ変数を使用します。ページネーション中にページネーション変数以外の変数を変更することは、異なる接続をクエリすることになるため、意味がありません。
このAPIは、(Pagination Containerのように) directionやgetConnectionFromProps関数のような追加の設定を受け付けなくなりました。これらの値はRelayによって自動的に決定されます。
リフェッチでは、これまで曖昧に定義されていた概念であったvariablesとfragmentVariablesの区別はなくなりました。リフェッチは常に、提供された変数を使用してフラグメントを正しくリフェッチおよびレンダリングします（入力で省略された変数は、親クエリの元の値を使用するようにフォールバックします）。
リフェッチはコンポーネントを明確に更新します。これは、PaginationContainerからrefetchConnectionを呼び出した場合に常に真実だったとは限りませんでした（リフェッチクエリで何をクエリしているか、およびフラグメントが正しいオブジェクトタイプで定義されているかに依存していました）。

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

サイトをより良くするために、いくつかの簡単な質問にお答えください.

usePaginationFragment​

引数​

戻り値​

動作​

PaginationContainer との違い​

`usePaginationFragment`

引数

戻り値

動作

`PaginationContainer` との違い