バージョン: v18.0.0

useQueryLoader

`useQueryLoader`

クエリの安全なロードと保持を容易にするために使用されるフック。クエリ参照を状態に保存し、コンポーネントが破棄されたとき、または状態からアクセスできなくなったときに破棄します。

このフックは、「render-as-you-fetch」パターンを実装するためにusePreloadedQueryと組み合わせて使用するように設計されています。詳細については、レンダリングのためのクエリのフェッチガイドを参照してください。

import type {PreloadedQuery} from 'react-relay';

const {useQueryLoader, usePreloadedQuery} = require('react-relay');

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

function QueryFetcherExample() {
  const [
    queryReference,
    loadQuery,
    disposeQuery,
  ] = useQueryLoader(
    AppQuery,
  );

  if (queryReference == null) {
    return (
      <Button onClick={() => loadQuery({})}> Click to reveal the name </Button>
    );
  }

  return (
    <>
      <Button onClick={disposeQuery}>
        Click to hide the name and dispose the query.
      </Button>
      <React.Suspense fallback="Loading">
        <NameDisplay queryReference={queryReference} />
      </React.Suspense>
    </>
  );
}

function NameDisplay({ queryReference }) {
  const data = usePreloadedQuery(AppQuery, queryReference);

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

引数

query: graphqlテンプレートリテラルを使用して指定されたGraphQLクエリ。
initialQueryRef: [オプション] 状態に保存され、useQueryLoaderによって返されるqueryReferenceの初期値として使用される初期PreloadedQuery。

戻り値

次の値を含むタプル

queryReference: クエリ参照、またはnull。
loadQuery: 実行するとクエリをロードし、queryReferenceとしてアクセスできるようになるコールバック。以前のクエリがロードされた場合は破棄します。Reactのレンダリングフェーズ中に呼び出すべきではありません。
- パラメータ
  - variables: クエリがロードされる変数。
  - options: LoadQueryOptions。オプションのオプションオブジェクトで、次のキーが含まれます。
    - fetchPolicy: [オプション] キャッシュされたデータを使用するかどうか、およびRelayストアで現在利用可能なキャッシュデータに基づいてネットワークリクエストを送信するタイミングを決定します（詳細については、フェッチポリシーおよびガベージコレクションガイドを参照してください）。
      - "store-or-network": (デフォルト) ローカルにキャッシュされたデータを再利用し、クエリのデータが欠落している場合にのみネットワークリクエストを送信します。クエリが完全にキャッシュされている場合、ネットワークリクエストは送信されません。
      - "store-and-network": ローカルにキャッシュされたデータを再利用し、ローカルキャッシュにデータが欠落しているかどうかに関係なく、常にネットワークリクエストを送信します。
      - "network-only": ローカルにキャッシュされたデータを再利用せず、Relayにローカルにキャッシュされている可能性のあるデータを無視して、クエリをフェッチするために常にネットワークリクエストを送信します。
    - networkCacheConfig: [オプション] デフォルト値: {force: true}。ネットワークレイヤーのキャッシュ設定オプションを含むオブジェクト。ネットワークレイヤーには、同一のクエリに対するネットワーク応答を再利用する追加のクエリ応答キャッシュが含まれる場合があることに注意してください。このキャッシュを完全にバイパスしたい場合（これはデフォルトの動作です）、このオプションの値として{force: true}を渡します。
disposeQuery: 実行するとqueryReferenceをnullに設定し、その上で.dispose()を呼び出すコールバック。型は() => voidです。Reactのレンダリングフェーズ中に呼び出すべきではありません。

動作

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

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

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

useQueryLoader​

引数​

戻り値​

動作​

`useQueryLoader`

引数

戻り値

動作