尝试使用 useMutation 时出现错误 useMutation 在“DecorateProcedure”类型上不存在<MutationProcedure>

Question

我正在使用 NextJS 应用程序路由器。

我正在尝试调用一条非常简单的路线：

import { z } from "zod";

import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";

// doc send user email to waitlist database
export const createEmailRouter = createTRPCRouter({
  postEmail: publicProcedure
    .input(
      z.object({
        email: z.string().email(),
      }),
    )
    .mutation(async ({ input }) => {
      console.log("email", input.email);
      return {
        email: input.email,
      };
    }),
});

比在 root.ts 中添加路线：

export const appRouter = createTRPCRouter({
  post: postRouter,
  storeEmail: createEmailRouter,
});

但是当我尝试在页面中调用此路由的 .useMutation 时，我总是收到以下错误：

有什么解决这个问题的线索吗？网上查不到任何信息。

谢谢！

Answer 1

当你导入 {api} 时，从 ~trpc/react 导入它，而不是 ~trpc/server。