跳至主内容
版本：11.x

类型推断

非官方测试版翻译

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

除了 @trpc/server 提供的类型推断功能（参见此处）外，本集成还专门为 React 使用场景提供了额外的类型推断辅助工具。

基于路由器推断 React Query 配置​

在为 tRPC 过程创建自定义钩子时，有时需要从路由器自动推断配置项的类型。您可以通过 @trpc/react-query 导出的 inferReactQueryProcedureOptions 辅助工具实现这一需求。

trpc.ts
ts
import {
  createTRPCReact,
  type inferReactQueryProcedureOptions,
} from '@trpc/react-query';
import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
import type { AppRouter } from './server';
 
// infer the types for your router
export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;
 
export const trpc = createTRPCReact<AppRouter>();
trpc.ts
ts
import {
  createTRPCReact,
  type inferReactQueryProcedureOptions,
} from '@trpc/react-query';
import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
import type { AppRouter } from './server';
 
// infer the types for your router
export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;
 
export const trpc = createTRPCReact<AppRouter>();
usePostCreate.ts
ts
import {
  trpc,
  type ReactQueryOptions,
  type RouterInputs,
  type RouterOutputs,
} from './trpc';
 
type PostCreateOptions = ReactQueryOptions['post']['create'];
 
function usePostCreate(options?: PostCreateOptions) {
  const utils = trpc.useUtils();
 
  return trpc.post.create.useMutation({
    ...options,
    onSuccess(post, variables, onMutateResult, context) {
      // invalidate all queries on the post router
      // when a new post is created
      utils.post.invalidate();
      options?.onSuccess?.(post, variables, onMutateResult, context);
    },
  });
}
usePostCreate.ts
ts
import {
  trpc,
  type ReactQueryOptions,
  type RouterInputs,
  type RouterOutputs,
} from './trpc';
 
type PostCreateOptions = ReactQueryOptions['post']['create'];
 
function usePostCreate(options?: PostCreateOptions) {
  const utils = trpc.useUtils();
 
  return trpc.post.create.useMutation({
    ...options,
    onSuccess(post, variables, onMutateResult, context) {
      // invalidate all queries on the post router
      // when a new post is created
      utils.post.invalidate();
      options?.onSuccess?.(post, variables, onMutateResult, context);
    },
  });
}
usePostById.ts
ts
import { ReactQueryOptions, RouterInputs, trpc } from './trpc';
 
type PostByIdOptions = ReactQueryOptions['post']['byId'];
type PostByIdInput = RouterInputs['post']['byId'];
 
function usePostById(input: PostByIdInput, options?: PostByIdOptions) {
  return trpc.post.byId.useQuery(input, options);
}
usePostById.ts
ts
import { ReactQueryOptions, RouterInputs, trpc } from './trpc';
 
type PostByIdOptions = ReactQueryOptions['post']['byId'];
type PostByIdInput = RouterInputs['post']['byId'];
 
function usePostById(input: PostByIdInput, options?: PostByIdOptions) {
  return trpc.post.byId.useQuery(input, options);
}

从"路由器工厂"推断抽象类型​

如果在应用中多次创建相似的路由器接口工厂，您可能希望在不同工厂实现间共享客户端代码。@trpc/react-query/shared 导出了若干类型工具，可用于生成路由器工厂的抽象类型，并构建接收路由器作为属性的通用 React 组件。

api/factory.ts
tsx
import { z } from 'zod';
import { t, publicProcedure } from './trpc';
 
// @trpc/react-query/shared exports several **Like types which can be used to generate abstract types
import { RouterLike, UtilsLike } from '@trpc/react-query/shared';
 
const ThingRequest = z.object({ name: z.string() });
const Thing = z.object({ id: z.string(), name: z.string() });
const ThingQuery = z.object({ filter: z.string().optional() });
const ThingArray = z.array(Thing);
 
// Factory function written by you, however you need,
// so long as you can infer the resulting type of t.router() later
export function createMyRouter() {
  return t.router({
    createThing: publicProcedure
      .input(ThingRequest)
      .output(Thing)
      .mutation(({ input }) => ({ id: '1', ...input })),
    listThings: publicProcedure
      .input(ThingQuery)
      .output(ThingArray)
      .query(() => []),
  })
}
 
// Infer the type of your router, and then generate the abstract types for use in the client
type MyRouterType = ReturnType<typeof createMyRouter>
export type MyRouterLike = RouterLike<MyRouterType>
export type MyRouterUtilsLike = UtilsLike<MyRouterType>
api/factory.ts
tsx
import { z } from 'zod';
import { t, publicProcedure } from './trpc';
 
// @trpc/react-query/shared exports several **Like types which can be used to generate abstract types
import { RouterLike, UtilsLike } from '@trpc/react-query/shared';
 
const ThingRequest = z.object({ name: z.string() });
const Thing = z.object({ id: z.string(), name: z.string() });
const ThingQuery = z.object({ filter: z.string().optional() });
const ThingArray = z.array(Thing);
 
// Factory function written by you, however you need,
// so long as you can infer the resulting type of t.router() later
export function createMyRouter() {
  return t.router({
    createThing: publicProcedure
      .input(ThingRequest)
      .output(Thing)
      .mutation(({ input }) => ({ id: '1', ...input })),
    listThings: publicProcedure
      .input(ThingQuery)
      .output(ThingArray)
      .query(() => []),
  })
}
 
// Infer the type of your router, and then generate the abstract types for use in the client
type MyRouterType = ReturnType<typeof createMyRouter>
export type MyRouterLike = RouterLike<MyRouterType>
export type MyRouterUtilsLike = UtilsLike<MyRouterType>
api/server.ts
tsx
export type AppRouter = typeof appRouter;
 
// Export your MyRouter types to the client
export type { MyRouterLike, MyRouterUtilsLike } from './factory';
api/server.ts
tsx
export type AppRouter = typeof appRouter;
 
// Export your MyRouter types to the client
export type { MyRouterLike, MyRouterUtilsLike } from './factory';
frontend/usePostCreate.ts
tsx
import type { MyRouterLike, MyRouterUtilsLike } from './factory';
 
type MyGenericComponentProps = {
  route: MyRouterLike;
  utils: MyRouterUtilsLike;
};
 
function MyGenericComponent(props: MyGenericComponentProps) {
  const { route } = props;
  const thing = route.listThings.useQuery({
    filter: 'qwerty',
  });
 
  const mutation = route.doThing.useMutation({
    onSuccess() {
      props.utils.listThings.invalidate();
    },
  });
 
  function handleClick() {
    mutation.mutate({
      name: 'Thing 1',
    });
  }
 
  return null; /* ui */
}
 
function MyPageComponent() {
  const utils = useUtils();
 
  return (
    <MyGenericComponent
      route={trpc.deep.route.things}
      utils={utils.deep.route.things}
    />
  );
}
 
function MyOtherPageComponent() {
  const utils = useUtils();
 
  return (
    <MyGenericComponent
      route={trpc.different.things}
      utils={utils.different.things}
    />
  );
}
frontend/usePostCreate.ts
tsx
import type { MyRouterLike, MyRouterUtilsLike } from './factory';
 
type MyGenericComponentProps = {
  route: MyRouterLike;
  utils: MyRouterUtilsLike;
};
 
function MyGenericComponent(props: MyGenericComponentProps) {
  const { route } = props;
  const thing = route.listThings.useQuery({
    filter: 'qwerty',
  });
 
  const mutation = route.doThing.useMutation({
    onSuccess() {
      props.utils.listThings.invalidate();
    },
  });
 
  function handleClick() {
    mutation.mutate({
      name: 'Thing 1',
    });
  }
 
  return null; /* ui */
}
 
function MyPageComponent() {
  const utils = useUtils();
 
  return (
    <MyGenericComponent
      route={trpc.deep.route.things}
      utils={utils.deep.route.things}
    />
  );
}
 
function MyOtherPageComponent() {
  const utils = useUtils();
 
  return (
    <MyGenericComponent
      route={trpc.different.things}
      utils={utils.different.things}
    />
  );
}

更完整的可运行示例请参阅此处