What would be a good practice for writing types for components that get passed a trpc query?

lets say a query looks like this:
const item = await prisma.business.findFirst({
where: { id: input.id },
include: {
business_hours: {
include: {
dayOfWeek: true,
},
},
address: true,
services: true,
socialMedia: true,
businessImages: true,
events: {
include: {
attendees: true,
},
},
eventReservations: {
where: {
status: 'PENDING',
},
select: {
Service: {
include: {
category: true,
},
},
reservationEndDate: true,
date: true,
},
},
},
})
const item = await prisma.business.findFirst({
where: { id: input.id },
include: {
business_hours: {
include: {
dayOfWeek: true,
},
},
address: true,
services: true,
socialMedia: true,
businessImages: true,
events: {
include: {
attendees: true,
},
},
eventReservations: {
where: {
status: 'PENDING',
},
select: {
Service: {
include: {
category: true,
},
},
reservationEndDate: true,
date: true,
},
},
},
})
i call it from root component, and i get my typesafe query, all is cool, but now i need to pass the query somewhere else. for that, i need to specify the type
root.tsx


const profile = trpc.listings.singleListing.useQuery({
id: parseInt(id, 10),
})
...
<Profile profileData={profile.data.items} />
profile.tsx
type Props = {
profileData: what type?
}
root.tsx


const profile = trpc.listings.singleListing.useQuery({
id: parseInt(id, 10),
})
...
<Profile profileData={profile.data.items} />
profile.tsx
type Props = {
profileData: what type?
}
3 Replies
HonestCode
HonestCode2y ago
one way i go around this, is type inference,
type Props = {
profileData: IBusinessWithRelatedData
}

export type IBusinessWithRelatedData = Prisma.BusinessGetPayload<{
include: {
business_hours: {
include: {
dayOfWeek: true
}
}
address: true
services: true
socialMedia: true
businessImages: true
events: {
include: {
attendees: true
}
}
eventReservations: {
where: {
status: 'PENDING'
}
select: {
Service: {
include: {
category: true
}
}
reservationEndDate: true
date: true
}
}
}
}>
type Props = {
profileData: IBusinessWithRelatedData
}

export type IBusinessWithRelatedData = Prisma.BusinessGetPayload<{
include: {
business_hours: {
include: {
dayOfWeek: true
}
}
address: true
services: true
socialMedia: true
businessImages: true
events: {
include: {
attendees: true
}
}
eventReservations: {
where: {
status: 'PENDING'
}
select: {
Service: {
include: {
category: true
}
}
reservationEndDate: true
date: true
}
}
}
}>
` but that kinda sucks
rocawear
rocawear2y ago
You can take the type from routeroutouts type
rocawear
rocawear2y ago
Inferring Types | tRPC
It is often useful to wrap functionality of your @trpc/client or @trpc/react-query api within other functions. For this purpose, it's necessary to be able to infer input types and output types generated by your @trpc/server router.
Want results from more Discord servers?
Add your server