usePreloadedQuery

usePreloadedQuery

loadQuery、もしくはuseQueryLoaderによる、事前の呼び出しでフェッチされたデータにアクセスするためのHook。これは「レンダーアズユーフェッチ」パターンを実装します。

• useQueryLoaderから返されたloadQueryコールバックを呼び出します。 これにより、クエリの参照がReactの状態に保存されます。
  • インポートされたloadQueryを直接呼び出すこともできます。これはクエリの参照を返します。 その場合は、項目を状態またはReactのrefに保存し、使用しなくなったときに値に対してdispose()を呼び出します。
• 次に、レンダリングメソッドで、usePreloadedQuery()を使用してクエリの参照を使用します。 この呼び出しは、クエリがまだ保留中の場合は中断し、失敗した場合はエラーをスローし、それ以外の場合はクエリ結果を返します。
• レンダリングをブロックすることなく、より早くデータのフェッチを開始できるため、このパターンはuseLazyLoadQuery()よりも推奨されます。

詳細については、クエリをレンダリングするガイドを参照してください。

import type {AppQueryType} from 'AppQueryType.graphql';

const React = require('React');

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

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

type Props = {
  initialQueryRef: PreloadedQuery<AppQueryType>,
};

function NameLoader(props) {
  const [queryReference, loadQuery] = useQueryLoader(
    AppQuery,
    props.initialQueryRef, /* e.g. provided by router */
  );

  return (<>
    <Button
      onClick={() => loadQuery({id: '4'})}
      disabled={queryReference != null}
    >
      Reveal your name!
    </Button>
    <Suspense fallback="Loading...">
      {queryReference != null
        ? <NameDisplay queryReference={queryReference} />
        : null
      }
    </Suspense>
  </>);
}

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

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

引数

• query: graphqlテンプレートリテラルを使用して指定されたGraphQLクエリ。
• preloadedQueryReference: useQueryLoaderから、またはloadQuery()を呼び出すことによって取得できる、PreloadedQueryクエリの参照。

戻り値

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

---

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

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