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.tsxtsx
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 loaderexport async function loader() {const allPostsData = await clientUtils.post.all.ensureData(); // Fetches data if it doesn't exist in the cachereturn {allPostsData,};}// This is a react componentexport 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.tsxtsx
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 loaderexport async function loader() {const allPostsData = await clientUtils.post.all.ensureData(); // Fetches data if it doesn't exist in the cachereturn {allPostsData,};}// This is a react componentexport 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 页面上看到它们。