如何从trpc类型输入我的组件道具

Question

我正在试验React Native + React Query和tRPC + Prisma设置，并发现tRPC和React之间的打字工作流程存在一些问题

我在一个屏幕上查询我的数据

const { data: highline, isFetchedAfterMount } = trpc.highline.getById.useQuery(
highlitedMarker.id
);

，然后导航到接收数据highline作为道具的详细信息屏幕

navigation.navigate('Details', { highline });

输入这个参数，我正在做

highline: RouterOutput['highline']['createHighline'];

，但highline得到Highline | undefined的类型。这是进行推理的正确方法吗?我想把highline输入Highline

Answer 1

哪条高线?数据高线从TRPC查询?

让我们看看trpc.highline.getById.useQuery返回什么作为数据

我假设你使用prisma findUnique，它返回null(未定义)，如果没有找到。

您可以尝试Output Validation或在客户端导航之前简单地处理未定义的highline。

highline参数具体来说，screen应该可以通过你的方法推断出来。如果它是推断出来的，那么typescript应该抛出一个错误，因为可能没有定义from data highline。