typescript 从@trpc/react-query使用`useQuery`时出现意外的返回类型

guykilcj  于 2023-11-20  发布在  TypeScript
关注(0)|答案(1)|浏览(111)

完整的源代码here,供参考。
我是TypeScript的新手,对NextJS(13.4)和tRPC也是全新的。
为了快速了解一下上下文,@trpc/react-query扩展了您的服务器路由定义,它允许您访问useQuery以及许多其他函数。可以作为参数提供给useQuery的选项之一是initialData,它允许您预先填充查询结果。
src/app/_components/UserListClient.tsx中的


悬停在initialData上时在VS代码中看到的内容,在上图中用红色下划线标出



这是我在将鼠标悬停在initialUsers上时看到的,它是作为第一个屏幕截图中initialData的值提供的
查看错误后,我发现useQuery期望提供的数据是用户数组,但它期望的是字符串,而不是期望用户将updatedAtcreatedAt作为日期。
然而,我的服务器路由器对user.list过程的定义清楚地定义了返回类型,使其具有Date类型的日期,而不是字符串,如下面的屏幕截图所示。



问题出在哪里?为什么useQuery知道正确的返回类型,但有一个奇怪的异常,它似乎把Date类型变成了字符串类型?
我试着检查useQuery期望的类型,但是正如我所说的,由于我对TypeScript还很陌生,所以我发现很难追溯类型,以查看useQuery是否在任何时候转换了我的类型,或者类似的事情。不知道如何处理这个问题,也不知道如何调试。

uoifb46i

uoifb46i1#

tRPC使用JSON序列化数据。由于JSON没有Date类型,JSON.stringify会将Date转换为字符串:

JSON.stringify({createdAt: new Date()})
// {"createdAt":"2023-11-14T15:50:32.170Z"}

字符串
如果你真的想使用Date类型而不是字符串表示,可以看看使用superjson的transformers:
https://trpc.io/docs/server/data-transformers#using-superjson

相关问题