createTRPCQueryUtils

与 useUtils 类似，createTRPCQueryUtils 是一个函数，它允许您访问帮助程序，这些帮助程序让您能够管理通过 @trpc/react-query 执行的查询的缓存数据。这些帮助程序实际上是 @tanstack/react-query 的 queryClient 方法的薄包装器。如果您想了解有关 useUtils 帮助程序的选项和使用模式的更深入的信息，而不是我们在此提供的，我们将链接到它们各自的 @tanstack/react-query 文档，以便您可以相应地参考它们。

注意

useUtils 和 createTRPCQueryUtils 之间的区别在于 useUtils 是一个 React 钩子，它在幕后使用 useQueryClient。这意味着它能够在 React 组件中更好地工作。createTRPCQueryUtils 的用例是在您需要在 React 组件之外使用帮助程序时，例如在 react-router 的加载程序中。

警告

您应该避免在 React 组件中使用 createTRPCQueryUtils。相反，请使用 useUtils，它是一个 React 钩子，在幕后实现了 useCallback 和 useQueryClient。

用法

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>
  );
}

注意

如果您使用的是 Remix Run 或 SSR，您不会为每个请求重复使用相同的 queryClient。相反，您将为每个请求创建一个新的 queryClient，以防止跨请求数据泄漏。

帮助程序

与 useUtils 非常相似，createTRPCQueryUtils 使您可以访问相同的帮助程序集。唯一的区别是您需要传入 queryClient 和 client 对象。

您可以在 useUtils 页面上看到它们。