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

HonestCodeOP•2y 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•2y ago

You can take the type from routeroutouts type

rocawear•2y ago

https://trpc.io/docs/server/infer-types#inference-helpers

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.

Gaming

Programming

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