createTRPCQueryUtils

非公式ベータ版翻訳

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

createTRPCQueryUtilsが必要になるのは、Reactコンポーネントの外部（例: react-routerのローダー内）でヘルパーを使用する場合です。

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

useUtilsとcreateTRPCQueryUtilsの違いは、useUtilsが内部でuseQueryClientを使用するReactフックである点です。これによりReactコンポーネント内でより適切に動作します。

クライアントに直接アクセスする必要がある場合は、createTRPCQueryUtilsの作成時に渡したclientオブジェクトを使用できます。

注意

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

使用方法

createTRPCQueryUtilsはルーター内の全利用可能クエリを含むオブジェクトを返します。これはtrpcクライアントオブジェクトと同じ方法で使用します。クエリにアクセスすると、クエリヘルパーが利用可能になります。例えばpostルーターにallクエリがある場合：

ルートローダー内でcreateTRPCQueryUtilsから取得したオブジェクトを操作しpost.allクエリにアクセスすると、クエリヘルパーが利用可能になります！

MyPage.tsx
tsx
import { QueryClient } from '@tanstack/react-query';
import { createTRPCQueryUtils, createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';
 
const trpc = createTRPCReact<AppRouter>();
const trpcClient = trpc.createClient({ links: [] });
 
const queryClient = new QueryClient();
 
const clientUtils = createTRPCQueryUtils({ queryClient, client: trpcClient });
 
// 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(undefined, {
    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 type { AppRouter } from './server';
 
const trpc = createTRPCReact<AppRouter>();
const trpcClient = trpc.createClient({ links: [] });
 
const queryClient = new QueryClient();
 
const clientUtils = createTRPCQueryUtils({ queryClient, client: trpcClient });
 
// 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(undefined, {
    initialData: loaderData.allPostsData, // Uses the data from the loader
  });
 
  return (
    <div>
      {allPostQuery.data.posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

注記

Remix RunやSSRを使用する場合、同じqueryClientを全リクエストで再利用すべきではありません。代わりにリクエストごとに新しいqueryClientを作成し、リクエスト間のデータ漏洩を防ぐ必要があります。

ヘルパー

useUtilsと同様に、createTRPCQueryUtilsからもqueryOptionsやinfiniteQueryOptionsを含む同じヘルパーセットにアクセスできます。唯一の違いは、queryClientとclientオブジェクトを渡す必要がある点です。

これらはuseUtilsページで確認できます。