createTRPCQueryUtils

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

createTRPCQueryUtils 的使用场景是当您需要在 React 组件外部使用辅助工具时，例如在 react-router 的加载器中。

与 useUtils 类似，createTRPCQueryUtils 是一个函数，它提供访问辅助工具的权限，这些工具可帮助您管理通过 @trpc/react-query 执行的查询缓存数据。这些辅助工具实际上是 @tanstack/react-query 的 queryClient 方法的轻量封装。如果您需要关于 useUtils 辅助工具的选项说明和使用模式的更深入信息，我们会链接到相应的 @tanstack/react-query 文档供您参考。

useUtils 和 createTRPCQueryUtils 的区别在于：useUtils 是一个 React Hook，底层使用 useQueryClient 实现。这意味着它在 React 组件内工作时效果更佳。

如果您需要直接访问客户端，可以使用创建 createTRPCQueryUtils 时传入的 client 对象。

注意

应避免在 React 组件中使用 createTRPCQueryUtils。请改用 useUtils，这是一个底层实现了 useCallback 和 useQueryClient 的 React Hook。

用法

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 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 页面查看这些工具。