createTRPCQueryUtils

useUtilsと同様に、createTRPCQueryUtilsは、@trpc/react-query経由で実行するクエリのキャッシュデータを管理するためのヘルパーにアクセスできる関数です。これらのヘルパーは、実際には@tanstack/react-queryのqueryClientメソッドの薄いラッパーです。ここで提供するよりも詳細なuseUtilsヘルパーのオプションと使用方法のパターンについては、それぞれの@tanstack/react-queryドキュメントにリンクしているので、適宜参照してください。

{/* SVGアイコンは翻訳不要 */}注記

useUtilsとcreateTRPCQueryUtilsの違いは、useUtilsは内部でuseQueryClientを使用するReactフックであるということです。これは、Reactコンポーネント内でより適切に動作できることを意味します。 createTRPCQueryUtilsの使用例は、Reactコンポーネントの外部でヘルパーを使用する必要がある場合、たとえばreact-routerのローダーなどです。

{/* SVGアイコンは翻訳不要 */}注意

ReactコンポーネントではcreateTRPCQueryUtilsの使用は避けるべきです。代わりに、内部でuseCallbackとuseQueryClientを実装するReactフックであるuseUtilsを使用してください。

使用方法

createTRPCQueryUtilsは、ルーターにあるすべての使用可能なクエリを含むオブジェクトを返します。 trpcクライアントオブジェクトと同じ方法で使用します。クエリに到達すると、クエリヘルパーにアクセスできます。たとえば、allクエリを持つpostルーターがあるとします。

コンポーネントで、createTRPCQueryUtilsが提供するオブジェクトをナビゲートしてpost.allクエリに到達すると、クエリヘルパーにアクセスできます。

MyPage.tsx
tsx
import { QueryClient } from '@tanstack/react-query';
import { createTRPCQueryUtils, createTRPCReact } from '@trpc/react-query';
import { useLoaderData } from 'react-router-dom';
import type { AppRouter } from './server';
const trpc = createTRPCReact<AppRouter>();
const queryClient = new QueryClient();
const clientUtils = createTRPCQueryUtils({ queryClient, client: trpc });
// This is a react-router loader
export async function loader() {
  const allPostsData = await clientUtils.post.all.ensureData(); // Fetches data if it doesn't exist in the cache
  return {
    allPostsData,
  };
}
// This is a react component
export function Component() {
  const loaderData = useLoaderData() as Awaited<ReturnType<typeof loader>>;
  const allPostQuery = trpc.post.all.useQuery({
    initialData: loaderData.allPostsData, // Uses the data from the loader
  });
  return (
    <div>
      {allPostQuery.data.posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

MyPage.tsx
tsx
import { QueryClient } from '@tanstack/react-query';
import { createTRPCQueryUtils, createTRPCReact } from '@trpc/react-query';
import { useLoaderData } from 'react-router-dom';
import type { AppRouter } from './server';
const trpc = createTRPCReact<AppRouter>();
const queryClient = new QueryClient();
const clientUtils = createTRPCQueryUtils({ queryClient, client: trpc });
// This is a react-router loader
export async function loader() {
  const allPostsData = await clientUtils.post.all.ensureData(); // Fetches data if it doesn't exist in the cache
  return {
    allPostsData,
  };
}
// This is a react component
export function Component() {
  const loaderData = useLoaderData() as Awaited<ReturnType<typeof loader>>;
  const allPostQuery = trpc.post.all.useQuery({
    initialData: loaderData.allPostsData, // Uses the data from the loader
  });
  return (
    <div>
      {allPostQuery.data.posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

{/* SVGアイコンは翻訳不要 */}注記

Remix RunまたはSSRを使用している場合は、リクエストごとに同じqueryClientを再利用しません。代わりに、リクエストごとに新しいqueryClientを作成して、リクエスト間のデータリークが発生しないようにします。

ヘルパー

useUtilsと同様に、createTRPCQueryUtilsは同じヘルパーセットへのアクセスを提供します。唯一の違いは、queryClientオブジェクトとclientオブジェクトを渡す必要があることです。

useUtilsページで確認できます。