完整的源代码here,供参考。
我是TypeScript的新手,对NextJS(13.4)和tRPC也是全新的。
为了快速了解一下上下文,@trpc/react-query
扩展了您的服务器路由定义,它允许您访问useQuery
以及许多其他函数。可以作为参数提供给useQuery
的选项之一是initialData
,它允许您预先填充查询结果。src/app/_components/UserListClient.tsx
中的
悬停在initialData上时在VS代码中看到的内容,在上图中用红色下划线标出
的
这是我在将鼠标悬停在initialUsers上时看到的,它是作为第一个屏幕截图中initialData的值提供的
查看错误后,我发现useQuery
期望提供的数据是用户数组,但它期望的是字符串,而不是期望用户将updatedAt
和createdAt
作为日期。
然而,我的服务器路由器对user.list
过程的定义清楚地定义了返回类型,使其具有Date
类型的日期,而不是字符串,如下面的屏幕截图所示。
的
问题出在哪里?为什么useQuery
知道正确的返回类型,但有一个奇怪的异常,它似乎把Date
类型变成了字符串类型?
我试着检查useQuery
期望的类型,但是正如我所说的,由于我对TypeScript还很陌生,所以我发现很难追溯类型,以查看useQuery
是否在任何时候转换了我的类型,或者类似的事情。不知道如何处理这个问题,也不知道如何调试。
1条答案
按热度按时间uoifb46i1#
tRPC使用JSON序列化数据。由于JSON没有
Date
类型,JSON.stringify会将Date
转换为字符串:字符串
如果你真的想使用
Date
类型而不是字符串表示,可以看看使用superjson的transformers:https://trpc.io/docs/server/data-transformers#using-superjson