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

Question

我是tRPC和react-query的新手。我一直在努力测试.query(BE)和useQuery(FE)，我试图将数据从FE传递到BE。但是，由于 TS 是静态类型，尽管代码正常工作，但我会收到编译错误(如果我更改为 JS，它会顺利运行)。

这是我的 BE

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" }]);

编译错误位于 { 名称："玛丽亚" } 部分。

它说"类型'{名称：字符串;}'不能分配给类型'null | undefined'.ts(2322)"。我不知道为什么使用查询类型定义 是这样的。我认为我根本无法传递任何参数(？

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

Answer 1

尝试删除 .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 2

我刚刚遇到了类似的问题，并戳了两天。

事实证明，一旦您将strict设置为truetsconfig.json，它就会消失compilerOptions

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

Answer 3

一点更新，我已经通过移动到一个新的存储库解决了这个问题，哈哈。

我认为问题可能是由以下原因引起的

可能性 1：在 "trpc" 中未定义的 createReactQueryHooks，因此您需要指定const trpc = new createReactQueryHooks<AppRouter>();，其中 AppRouter 是您从 BE 导出的应用路由器类型。不要使用"任何"类型进行const trpc = new createReactQueryHooks();。

可能性2：你的javascript和typescript包重叠，所以编译器可能会错误地检测到大多数没有指定类型的javascript。

Answer 4

在VSCODE上遇到了这个问题。退出VS代码并重新打开项目解决了这个问题(然后它也正确地显示了任何潜在的问题)。