Stripe GraphCms typescript Insert Order Property 'metadata' does not exist on type 'string'

Question

I'm working on a 'clone' of ecommerce example from Graphcms using typescript so in the web hook I want to insert an order like

const order = {
        email: session.customer_email,
        total: session.amount_total,
        stripeCheckoutId: session.id,
        orderItems: {
            create: line_items!.data.map((item) => ({
                quantity: item.quantity,
                total: item.amount_total,
                product: {
                    connect: {
                        id: item.price?.product.metadata.productId
                    }
                }
            }))
        }
    };

but in this line,

id: item.price?.product.metadata.productId

I've got this error

Property 'metadata' does not exist on type 'string | Product | DeletedProduct'. Property 'metadata' does not exist on type 'string'.

If I print the line I can see the prop metadata how can I fix it?

WORKED IT OUT WITH

id: (item.price?.product as Stripe.Product).metadata.productId

Answer 1

Metadata seems to be a dynamic type, so you need to add type safety to allow TypeScript to statically analyse the logic paths:

const product = item.price?.product;
let connectId = product;
// Note: I've not handled cases for Product | DeletedProduct
if (typeof product !== 'string') {
  connectId = product.metadata.productId
}

const order = {
        email: session.customer_email,
        total: session.amount_total,
        stripeCheckoutId: session.id,
        orderItems: {
            create: line_items!.data.map((item) => ({
                quantity: item.quantity,
                total: item.amount_total,
                product: {
                    connect: {
                        id: connectId
                    }
                }
            }))
        }
    };