メインコンテンツにスキップ
バージョン: v18.0.0

loadQuery

loadQuery

この関数は、usePreloadedQuery()フックと共に使用して「レンダーアズユーフェッチ」を実装するために設計されています。

loadQueryから返されたクエリ参照は、参照されなくなった後に.dispose()が呼び出されない場合、Relayストアにデータをリークします。そのため、可能な限りuseQueryLoaderを呼び出すことをお勧めします。これにより、クエリ参照が確実に破棄されます。

より完全な例については、usePreloadedQueryのドキュメントを参照してください。

const MyEnvironment = require('MyEnvironment');
const {loadQuery} = require('react-relay');

const query = graphql`
query AppQuery($id: ID!) {
user(id: $id) {
name
}
}
`;

// Note: you should generally not call loadQuery at the top level.
// Instead, it should be called in response to an event (such a route navigation,
// click, etc.).
const queryReference = loadQuery(
MyEnvironment,
query,
{id: '4'},
{fetchPolicy: 'store-or-network'},
);

// later: pass queryReference to usePreloadedQuery()
// Note that query reference should have .dispose() called on them,
// which is missing in this example.

引数

  • environment: リクエストを実行するRelay環境インスタンス。Reactコンポーネント内からこのリクエストを開始する場合、useRelayEnvironmentを使用して取得した環境を使用することをお勧めします。
  • query: フェッチするGraphQLクエリ。graphqlテンプレートリテラル、またはプリロード可能な具象リクエストを使用して指定します。これは、ファイル<クエリ名>$Parameters.graphqlをrequireすることで取得できます。Relayは、クエリに@preloadableアノテーションが付けられている場合にのみ、$Parametersファイルを生成します。
  • variables: クエリをフェッチするための変数値を含むオブジェクト。これらの変数は、クエリ内で宣言されたGraphQL変数と一致する必要があります。
  • options: [オプション] オプションオブジェクト
    • fetchPolicy: キャッシュされたデータを使用するかどうか、およびRelayストアで現在利用可能なキャッシュされたデータに基づいてネットワークリクエストを送信するかどうかを決定します(詳細については、フェッチポリシーおよびガベージコレクションガイドを参照してください)
      • "store-or-network": (デフォルト) ローカルにキャッシュされたデータを再利用*し*、クエリのデータが不足している場合に*のみ*ネットワークリクエストを送信します。クエリが完全にキャッシュされている場合、ネットワークリクエストは*行われません*。
      • "store-and-network": ローカルにキャッシュされたデータを再利用*し*、ローカルキャッシュからデータが不足しているかどうかに関係なく、*常に*ネットワークリクエストを送信します。
      • "network-only": ローカルにキャッシュされたデータを再利用*せず*、Relayにローカルにキャッシュされている可能性のあるデータを無視して、クエリをフェッチするために*常に*ネットワークリクエストを送信します。
    • networkCacheConfig: * *[オプション]* * デフォルト値:{force: true}。*ネットワーク層*のキャッシュ設定オプションを含むオブジェクト。ネットワーク層には、同一のクエリに対するネットワーク応答を再利用する*追加の*クエリ応答キャッシュが含まれている場合があります。このキャッシュを完全にバイパスする場合(デフォルトの動作)、このオプションの値として{force: true}を渡します。
  • environmentProviderOptions: [オプション] オプションオブジェクト
    • prepareSurfaceEntryPoint.jsで使用されるenvironmentProviderに渡されるオプション。

戻り値

以下のプロパティを持つクエリ参照

  • dispose: ストアによるクエリ参照の保持を解除するメソッド。これにより、クエリ参照によって参照されるデータがガベージコレクションされる可能性があります。

戻り値の正確な形式は*不安定であり、変更される可能性が非常に高い*です。戻り値の他のプロパティを使用しないことを強くお勧めします。そのようなコードは、Relayの将来のバージョンにアップグレードするときに破損する可能性が非常に高いためです。代わりに、loadQuery()の結果をusePreloadedQuery()に渡します。

動作

  • loadQuery()は、クエリが渡された場合はデータ、プリロード可能な具象リクエストが渡された場合はデータとクエリをフェッチします。クエリとデータの両方が利用可能になると、クエリからのデータがストアに書き込まれます。これは、クエリがusePreloadedQueryに渡された場合にのみデータをストアに書き込むpreloadQuery_DEPRECATEDの動作とは異なります。
  • loadQueryから返されたクエリ参照はRelayストアによって保持され、データがガベージコレクションされるのを防ぎます。クエリ参照で.dispose()を呼び出すと、ガベージコレクションされる可能性があります。
  • loadQuery()は、Reactのレンダーフェーズ中に呼び出されるとエラーをスローします。

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

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