useLazyLoadQuery

useLazyLoadQuery

レンダリング中にGraphQLクエリをフェッチするために使用されるフックです。このフックは、注意せずに使用すると、複数のネストされたラウンドトリップやウォーターフォールラウンドトリップを引き起こす可能性があり、データのフェッチを開始するためにレンダリングまで待機するため（通常はレンダリングよりもずっと早く開始できます）、パフォーマンスが低下します。代わりに、usePreloadedQueryを使用することをお勧めします。

const React = require('React');

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

function App() {
  const data = useLazyLoadQuery(
    graphql`
      query AppQuery($id: ID!) {
        user(id: $id) {
          name
        }
      }
    `,
    {id: 4},
    {fetchPolicy: 'store-or-network'},
  );

 return <h1>{data.user?.name}</h1>;
}

引数

• query: graphqlテンプレートリテラルを使用して指定されたGraphQLクエリ。
• variables: クエリをフェッチするための変数値を格納するオブジェクト。これらの変数は、クエリ内で宣言されたGraphQL変数と一致する必要があります。
• options: [オプション] オプションオブジェクト
  • fetchPolicy: キャッシュされたデータを使用するかどうか、およびRelayストアで現在利用可能なキャッシュされたデータに基づいてネットワークリクエストを送信するタイミングを決定します（詳細については、フェッチポリシーおよびガベージコレクションガイドを参照してください）。
    • "store-or-network": （デフォルト）ローカルにキャッシュされたデータを再利用し、クエリのデータが不足している場合にのみネットワークリクエストを送信します。クエリが完全にキャッシュされている場合、ネットワークリクエストは送信されません。
    • "store-and-network": ローカルにキャッシュされたデータを再利用し、ローカルキャッシュにデータが不足しているかどうかに関係なく、常にネットワークリクエストを送信します。
    • "network-only": ローカルにキャッシュされたデータを再利用せず、Relayにローカルでキャッシュされている可能性のあるデータを無視して、常にネットワークリクエストを送信してクエリをフェッチします。
    • "store-only": ローカルにキャッシュされたデータのみを再利用し、クエリをフェッチするためにネットワークリクエストを送信しません。この場合、クエリをフェッチする責任は呼び出し側にありますが、このポリシーを使用して、完全にローカルであるデータを読み取って操作することもできます。
  • fetchKey: コンポーネントが再レンダリングするときに、変数が変更されていない場合でも、またはコンポーネントが再マウントされていない場合でも、現在のクエリと変数の再評価を強制するためにfetchKeyを渡すことができます（Reactコンポーネントに別のkeyを渡すと再マウントされるのと同様です）。fetchKeyが前のレンダリングで使用されたものと異なる場合、現在のクエリはストアに対して再評価され、現在のfetchPolicyとキャッシュの状態に応じて、再フェッチされる可能性があります。
  • networkCacheConfig: [オプション] デフォルト値：{force: true}。ネットワークレイヤーのキャッシュ設定オプションを含むオブジェクト。ネットワークレイヤーには、同一のクエリに対するネットワーク応答を再利用する追加のクエリ応答キャッシュが含まれる場合があることに注意してください。このキャッシュを完全にバイパスしたい場合（これがデフォルトの動作です）、このオプションの値として{force: true}を渡します。

戻り値

• data: Relayストアから読み取られたデータを含むオブジェクト。オブジェクトは、指定されたクエリの形状と一致します。
  • データのFlow型もこの形状と一致し、GraphQLスキーマから派生した型が含まれます。たとえば、上記のdataの型は、{| user: ?{| name: ?string |} |}です。

動作

• useLazyLoadQueryは、正しいRelay環境にアクセスするために、RelayEnvironmentProviderの下にレンダリングされていることが期待されます。そうでない場合、エラーがスローされます。
• useLazyLoadQueryを呼び出すと、このクエリのデータがフェッチおよびレンダリングされます。また、指定されたfetchPolicy、キャッシュされたデータが利用可能かどうか、またはネットワークリクエストを送信して待機する必要があるかどうかによっては、ネットワークリクエストが処理中である間、中断する可能性があります。useLazyLoadQueryによってコンポーネントが中断される場合は、適切なローディング状態を表示するために、このコンポーネントをラップするSuspense祖先があることを確認する必要があります。
  • Suspenseの詳細については、Suspenseを使用したローディング状態ガイドを参照してください。
• コンポーネントは、クエリデータの更新に自動的にサブスクライブされます。このクエリのデータがアプリのどこかで更新されると、コンポーネントは自動的に最新の更新データで再レンダリングされます。
• useLazyLoadQueryを使用するコンポーネントがコミットされた後、コンポーネントを再レンダリング/更新しても、クエリが再度フェッチされることはありません。
  • コンポーネントが異なるクエリ変数で再レンダリングされた場合、新しい変数でクエリが再度フェッチされ、異なるデータで再レンダリングされる可能性があります。
  • コンポーネントがアンマウントおよび再マウントされた場合、現在のクエリと変数が（fetchPolicyとキャッシュの状態に応じて）再フェッチされます。

QueryRendererとの違い

• useLazyLoadQueryは、パラメータとしてRelay環境を受け取らなくなったため、QueryRendererが行っていたように、Reactコンテキストに環境を設定することもなくなりました。代わりに、useLazyLoadQueryは、コンテキストにRelay環境を設定するRelayEnvironmentProviderの子孫として使用する必要があります。通常、アプリケーション全体に単一のRelay環境を設定するために、アプリケーションの最上位で単一のRelayEnvironmentProviderをレンダリングする必要があります。
• useLazyLoadQueryは、Suspenseを使用して、開発者がSuspense境界を使用してローディング状態をレンダリングできるようにし、ネットワークエラーが発生した場合はエラーをスローします。これは、エラー境界でキャッチしてレンダリングできます。これは、エラーオブジェクトやnullプロップをQueryRendererレンダー関数に提供して、エラー状態またはローディング状態を示すのとは対照的です。
• useLazyLoadQueryは、ネットワーク応答キャッシュのみに依存するのではなく、Relayストアにキャッシュされたデータを再利用するために、フェッチポリシーを完全にサポートします。
• useLazyLoadQueryは、返されるデータに対してより優れた型安全性の保証を備えています。これは、レンダラーAPIでデータの型をパラメータ化できなかったため、QueryRendererでは不可能でした。

---

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

いくつかの簡単な質問に答えて サイトをさらに改善するためにご協力ください.