useQueries()

useQueriesフックは、1回のフック呼び出しで複数のクエリを同時に取得するために使用できます。

このフックの主なユースケースは、通常は同じタイプの複数のクエリを取得できることです。たとえば、TODO IDのリストを取得する場合、useQueriesフックでそれらをマップして、各TODOの詳細を取得するbyIdエンドポイントを呼び出すことができます。

注記

useQueriesフックで複数の型を取得することは可能ですが、suspenseオプションを使用しない限り、複数のuseQuery呼び出しを使用するのと比べて大きな利点はありません。useQueriesはサスペンスを並列にトリガーできますが、複数のuseQuery呼び出しはウォーターフォール方式になります。

使い方

useQueriesフックは、@tanstack/query useQueriesと同じです。唯一の違いは、オブジェクトパラメータ内のクエリの配列ではなく、クエリの配列を返す関数を渡すことです。

ヒント

httpBatchLinkまたはwsLinkを使用している場合、以下はサーバーへの1回のHTTP呼び出しになります。さらに、基になるプロシージャが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,
);