跳至主要内容
版本:11.x

createTRPCQueryUtils

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

注意

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

警告

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

用法

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 使您可以访问相同的帮助程序集。唯一的区别是您需要传入 queryClientclient 对象。

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