CODEWITHSUNDEEP
reactjstrpc
Juan Andrade
Juan Andrade

Reputation: 336

How to type my component props from a trpc type

I'm experimenting with a React Native + React Query and tRPC + Prisma setup and finding some problems with the typo workflow between tRPC and react

I'm querying my data on one screen

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

and then navigating to a details screen that receives the data highline as props

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

To type this parameter I'm doing

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

but highline get the type of Highline | undefined. Is this the correct way of doing this inference? I want highline to be typed specifically Highline

Upvotes: 0

Views: 674

Answers (1)

danzel artamadja
danzel artamadja

Reputation: 153

Which highline? The data highline from trpc query?

Let's see what trpc.highline.getById.useQuery return as data.

I assume you're using prisma findUnique which returns null (undefined) if not found.

You can try Output Validation or simply handling the undefined highline before navigating in the client side.

The highline parameter for details screen should be inferred just okay with your method. If it is inferred then typescript should raise an error because of the possible undefined from data highline.

Upvotes: 0

Related Questions