メインコンテンツへスキップ
バージョン: 11.x

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 { useLoaderData } from 'react-router-dom';
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({
    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 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({
    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も同じヘルパーセットへのアクセスを提供します。唯一の違いはqueryClientとclientオブジェクトを渡す必要がある点です。

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