How to properly infer type or add typings of a returned model with relationship in a component props

getCart.tsx

  const session = await getSession();

  let cart = await db.query.carts.findFirst({
    where: (model, { eq }) => eq(model.userId, session.uuid),
    with: {
      items: {
        with: {
          product: true,
        },
      },
    },
  });

  return cart;

  const session = await getSession();

  let cart = await db.query.carts.findFirst({
    where: (model, { eq }) => eq(model.userId, session.uuid),
    with: {
      items: {
        with: {
          product: true,
        },
      },
    },
  });

  return cart;

page.tsx

const cart = await getCart();
<CartSummary cart={cart} />

const cart = await getCart();
<CartSummary cart={cart} />

cart-summary.tsx

  export default async function CartSummary({ cart }) {
  }

  export default async function CartSummary({ cart }) {
  }

4 Replies

nk•4mo ago

Make a standalone function Eg. getCart

Eco 🌤•4mo ago

I do have that and currently I'm just using getCart also on CartSummary since it can be cached. but I wanna know how to add typings on a prop way.

rafar•4mo ago

I don’t know if this is useful but I use the returned db function to define the schema - it has a method called $inferSelect which gives you the select model. you can do typeof dbTable.$inferSelect

Eco 🌤•4mo ago

I have tried that and it only works if no eager loaded relationship is returned on the query.

with: {
      items: {
        with: {
          product: true,
        },
      },
    },

with: {
      items: {
        with: {
          product: true,
        },
      },
    },

Gaming

Programming

How to properly infer type or add typings of a returned model with relationship in a component props