0

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

Bodok
  • 336
  • 2
  • 13

1 Answers1

0

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.

danzel artamadja
  • 102
  • 2
  • 10