useQueries()

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

useQueriesフックを使用すると、単一のフック呼び出しで可変数のクエリを同時に取得できます。

このフックの主な用途は、通常同じタイプの複数のクエリを取得することです。例えば、TODOアイテムのIDリストを取得した後、useQueriesフック内で各IDをマップ処理し、各TODOの詳細を取得するbyIdエンドポイントを呼び出すことができます。

注記

useQueriesフックで複数のタイプを取得することは可能ですが、suspenseオプションを使用しない限り、複数のuseQuery呼び出しと比べて大きな利点はありません。useQueriesはサスペンスを並列でトリガーできるのに対し、複数のuseQuery呼び出しは連鎖的に処理されるためです。

使用方法

useQueriesフックの機能は、@tanstack/query useQueries と同一です。唯一の違いは、オブジェクトパラメータ内にクエリの配列を直接渡す代わりに、クエリの配列を返す関数を渡す点です。

ヒント

httpBatchLinkまたはwsLinkを使用している場合、以下の処理はサーバーへのHTTPリクエストを1回だけにまとめます。さらに、基盤となるプロシージャがPrismaのfindUnique()のようなものを使用している場合、自動的にバッチ処理され、データベースクエリも厳密に1回だけ実行されます。

tsx
const Component = (props: { postIds: string[] }) => {
  const postQueries = trpc.useQueries((t) =>
    props.postIds.map((id) => t.post.byId({ id })),
  );
  return <>{/* [...] */}</>;
};

tsx
const Component = (props: { postIds: string[] }) => {
  const postQueries = trpc.useQueries((t) =>
    props.postIds.map((id) => t.post.byId({ id })),
  );
  return <>{/* [...] */}</>;
};

個々のクエリへのオプション指定

また、配列内の各クエリ呼び出しに対して、第2引数としてenabled、suspense、refetchOnWindowFocusなどの通常のクエリオプションを渡すことも可能です。利用可能なオプションの完全な概要については、tanstack useQuery のドキュメントを参照してください。

tsx
const Component = () => {
  const [post, greeting] = trpc.useQueries((t) => [
    t.post.byId({ id: '1' }, { enabled: false }),
    t.greeting({ text: 'world' }),
  ]);
  const onButtonClick = () => {
    post.refetch();
  };
  return (
    <div>
      <h1>{post.data && post.data.title}</h1>
      <p>{greeting.data.message}</p>
      <button onClick={onButtonClick}>Click to fetch</button>
    </div>
  );
};

tsx
const Component = () => {
  const [post, greeting] = trpc.useQueries((t) => [
    t.post.byId({ id: '1' }, { enabled: false }),
    t.greeting({ text: 'world' }),
  ]);
  const onButtonClick = () => {
    post.refetch();
  };
  return (
    <div>
      <h1>{post.data && post.data.title}</h1>
      <p>{greeting.data.message}</p>
      <button onClick={onButtonClick}>Click to fetch</button>
    </div>
  );
};

コンテキスト

オプションでReact Queryコンテキストを渡し、デフォルトを上書きすることもできます。

tsx
const [post, greeting] = trpc.useQueries(
  (t) => [t.post.byId({ id: '1' }), t.greeting({ text: 'world' })],
  myCustomContext,
);

tsx
const [post, greeting] = trpc.useQueries(
  (t) => [t.post.byId({ id: '1' }), t.greeting({ text: 'world' })],
  myCustomContext,
);