createTRPCQueryUtils

createTRPCQueryUtils 的用例是当你需要在 React 组件之外使用辅助程序时，例如在 react-router 加载器中。

¥The use case for createTRPCQueryUtils is when you need to use the helpers outside of a React Component, for example in react-routers loaders.

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

¥Similar to useUtils, createTRPCQueryUtils is a function that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useUtils helpers than what we provide here, we will link to their respective @tanstack/react-query docs so you can refer to them accordingly.

useUtils 和 createTRPCQueryUtils 之间的区别在于 useUtils 是一个在后台使用 useQueryClient 的反应钩子。这意味着它能够在 React Components 中更好地工作。

¥The difference between useUtils and createTRPCQueryUtils is that useUtils is a react hook that uses useQueryClient under the hood. This means that it is able to work better within React Components.

如果你需要直接访问客户端，则可以使用在创建期间传递给 createTRPCQueryUtils 的 client 对象。

¥If you need access to the client directly, you can use the client object that you passed to createTRPCQueryUtils during creation.

提醒

你应该避免在 React Components 中使用 createTRPCQueryUtils。相反，使用 useUtils，它是一个 React 钩子，在后台实现 useCallback 和 useQueryClient。

¥You should avoid using createTRPCQueryUtils in React Components. Instead, use useUtils which is a React hook that implements useCallback and useQueryClient under the hood.

用法

¥Usage

createTRPCQueryUtils 返回一个对象，其中包含路由中所有可用的查询。使用它的方式与 trpc 客户端对象相同。到达查询后，你将可以访问查询助手。例如，假设你有一个带有 all 查询的 post 路由：

¥createTRPCQueryUtils returns an object with all the available queries you have in your routers. You use it the same way as your trpc client object. Once you reach a query, you'll have access to the query helpers. For example, let's say you have a post router with an all query:

现在在我们的组件中，当我们导航 createTRPCQueryUtils 给我们的对象并到达 post.all 查询时，我们将可以访问我们的查询助手！

¥Now in our component, when we navigate the object createTRPCQueryUtils gives us and reach the post.all query, we'll get access to our query helpers!

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，这样就不会发生跨请求数据泄漏。

¥If you were using Remix Run or SSR you wouldn't re-use the same queryClient for every request. Instead, you would create a new queryClient for every request so that there's no cross-request data leakage.

辅助程序

¥Helpers

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

¥Much like useUtils, createTRPCQueryUtils gives you access to same set of helpers. The only difference is that you need to pass in the queryClient and client objects.

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

¥You can see them on the useUtils-page.