带有useQuery的tRPC不会收到我的查询输入

Question

我是tRPC和的新手。我一直在测试.query ( BE )和useQuery ( FE )，我试图将来自FE的数据传递给BE。但是，由于TS是一种静态类型，所以虽然代码工作正常，但我还是会得到编译错误(如果我切换到JS，它会很顺利地工作)。

这是我的生活

export const appRouter = trpc
  .router()
  .query("greet", {
    input: z
      .object({
        name: z.string().nullish(),
      })
      .default({ name: "World" }),
    resolve({ input }) {
      return {
        message: `Hello ${input.name?.toUpperCase()}!`,
      };
    },
  })

我的FE是这么说的

const greet = trpc.useQuery(["greet", { name: "Maria" }]);

编译错误出现在{ name："Maria“}部件上。

它写着"Type '{ name: string；}‘不能分配给输入'null \未定’. is (2322)“。我不知道为什么useQuery类型定义就像这样。，我认为它根本不能传递任何参数(？)

请帮帮忙，我不知道。(谢谢你阅读并回答我的问题:)

Answer 1

有一点更新，我已经解决了这个问题，通过移动到一个新的回购，lol。

我认为这个问题可能是由

可能性1："trpc“中未定义的createReactQueryHooks，因此您需要指定const trpc = new createReactQueryHooks<AppRouter>();，AppRouter是您从BE导出的appRouter类型。不要使用“任何”类型的const trpc = new createReactQueryHooks();。

可能性2:您的javascript和type typescript包重叠，因此编译器可能会错误地检测到javascript (其中大多数没有指定类型)。

Answer 2

尝试删除.nullish部件并在“解决”之后添加“：”，如下所示：

​

export const appRouter = trpc
  .router()
  .query("greet", {
    input: z
      .object({
        name: z.string().,
      })
      .default({ name: "World" }),
    resolve: async ({ input }) => {
      return {
        message: `Hello ${input.name?.toUpperCase()}!`,
      };
    },
  })

​

我对trpc也很陌生，所以如果这没有帮助的话，我很抱歉。

Answer 3

我只是有一个类似的问题，并一直戳和刺激了两天。

当您在strict下的tsconfig.json中将tsconfig.json设置为compilerOptions时，它就消失了。

TypeScript工具链的脆弱性从未停止让我吃惊。