useRefetchableFragment

useRefetchableFragment

異なるデータでフラグメントをフェッチして再レンダリングしたい場合は、useRefetchableFragment を使用できます。

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

const React = require('React');

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


type Props = {
  comment: CommentBody_comment$key,
};

function CommentBody(props: Props) {
  const [data, refetch] = useRefetchableFragment(
    graphql`
      fragment CommentBody_comment on Comment
      @refetchable(queryName: "CommentBodyRefetchQuery") {
        body(lang: $lang) {
          text
        }
      }
    `,
    props.comment,
  );

  return (
    <>
      <p>{data.body?.text}</p>
      <Button
        onClick={() => {
          refetch({lang: 'SPANISH'}, {fetchPolicy: 'store-or-network'})
        }}
      >
        Translate Comment
      </Button>
    </>
  );
}

module.exports = CommentBody;

引数

• fragment: graphql テンプレートリテラルを使用して指定された GraphQL フラグメント。このフラグメントには @refetchable ディレクティブがなければなりません。そうでない場合はエラーがスローされます。@refetchable ディレクティブは、「リフェッチ可能」なフラグメント、つまり Viewer または Query 型、または Node を実装する型（つまり、id を持ち、id フィールドでクエリできる機能を持つ型）で宣言されたフラグメントにのみ追加できます。詳細については、GraphQLサーバー仕様セクションを参照してください。
  • リフェッチクエリを手動で指定する必要はありません。@refetchable ディレクティブは、指定された queryName でクエリを自動生成します。これにより、生成されたファイル <queryName>.graphql.js からインポートできる、クエリの Flow 型も生成されます。
• fragmentReference: フラグメント参照は、Relay がストアからフラグメントのデータを読み取るために使用する不透明な Relay オブジェクトです。具体的には、データが読み取られる特定のオブジェクトインスタンスに関する情報が含まれています。
  • フラグメント参照の型は、生成された Flow 型から、ファイル <fragment_name>.graphql.js からインポートでき、Props の型を宣言するために使用できます。フラグメント参照型の名前は <fragment_name>$key になります。フラグメント参照の props の型が正しく宣言されていることを保証するために、lint rule を使用します。

戻り値

以下の値を含むタプル

• [0] data: Relay ストアから読み取られたデータを含むオブジェクト。オブジェクトは、指定されたフラグメントの形状と一致します。
  • データの Flow 型もこの形状に一致し、GraphQL スキーマから派生した型が含まれます。
• [1] refetch: 新しい変数セットでフラグメントをリフェッチするために使用される関数。
  • 引数
    • variables: @refetchable クエリをフェッチするために使用される新しい変数セットを含むオブジェクト。
      • これらの変数は、フラグメント内で参照される GraphQL 変数と一致する必要があります。
      • useRefetchableFragment に渡されたフラグメントキーがオプションの場合、すべての非オプション変数を、場合によってはオブジェクトの ID も含めて渡す必要があります。Relay は再利用する既存の変数を持っていない可能性があるためです。
      • フラグメントキーが非オプションの場合、リフェッチリクエストで変更する変数のみを指定する必要があります。この入力で省略されたフラグメントによって参照される変数は、元の親クエリで指定された値を使用するようにフォールバックします。たとえば、最初にフェッチされたときとまったく同じ変数でフラグメントをリフェッチするには、refetch({}) を呼び出すことができます。
      • 同様に、フラグメントキーが非オプションの場合、フラグメントが異なる id でリフェッチされることを希望する場合を除き、$id 変数の id 値を渡すことはオプションです。非 null の @refetchable フラグメントをリフェッチする場合、Relay はすでにレンダリングされたオブジェクトの id を認識しています。
    • options: [オプション] オプションオブジェクト
      • fetchPolicy: キャッシュされたデータを使用するかどうか、および利用可能なキャッシュデータに基づいてネットワークリクエストを送信するタイミングを決定します。詳細については、フェッチポリシーセクションを参照してください。
      • onComplete: リフェッチリクエストが完了するたびに呼び出される関数。増分データペイロードも含まれます。
  • 戻り値
    • disposable: dispose 関数を含むオブジェクト。disposable.dispose() を呼び出すと、リフェッチリクエストがキャンセルされます。
  • 動作
    • 新しい変数セットを使用して refetch を呼び出すと、新しく提供された変数でフラグメントが再度フェッチされます。提供する必要がある変数は、フラグメント内で参照されている変数のみであることに注意してください。この例では、lang 変数に新しい値を渡すことにより、現在レンダリングされているコメントの翻訳された本文をフェッチすることを意味します。
    • refetch を呼び出すと、コンポーネントが再レンダリングされ、指定された fetchPolicy と、キャッシュされたデータが利用可能かどうか、またはネットワークリクエストを送信して待機する必要があるかどうかによっては、中断する可能性があります。リフェッチによりコンポーネントが中断される場合は、このコンポーネントをラップする Suspense バウンダリがあることを確認する必要があります。
    • Suspense の詳細については、Suspense を使用した読み込み状態ガイドを参照してください。

動作

• コンポーネントは、フラグメントデータの更新を自動的にサブスクライブします。この特定の User のデータがアプリ内のどこかで更新された場合（たとえば、新しいデータのフェッチ、または既存のデータの変更を介して）、コンポーネントは最新の更新されたデータで自動的に再レンダリングされます。
• 特定のフラグメントのデータが欠落していて、親クエリによって現在データがフェッチされている場合、コンポーネントは中断されます。
  • Suspense の詳細については、Suspense を使用した読み込み状態ガイドを参照してください。

RefetchContainer との違い

• @refetchable フラグメントを使用することにより、Relay によって自動的に生成されるため、この API でリフェッチクエリを指定する必要がなくなりました。
• リフェッチには、以前は曖昧に定義されていた概念であった refetchVariables と renderVariables の区別がなくなりました。リフェッチは、提供する変数を使用して常に正しくフラグメントをリフェッチおよびレンダリングします（入力で省略された変数は、親クエリからの元の値の使用にフォールバックします）。
• リフェッチはコンポーネントを明確に更新します。これは、RefetchContainer からリフェッチを呼び出すときは必ずしも当てはまりませんでした（リフェッチクエリで何に対してクエリを実行しているか、フラグメントが正しいオブジェクト型で定義されているかどうかによって異なっていた）。

---

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

より良いサイトにするためにご協力ください。 いくつかの簡単な質問に答えてください.