react element as an arg?

Hi team! is it wrong to pass react element as an argument? im getting

[CONVEX A(purchaseOrderFuncs:sendPOAction)] Uncaught Error: Field name $$typeof starts with a '$', which is reserved.

[CONVEX A(purchaseOrderFuncs:sendPOAction)] Uncaught Error: Field name $$typeof starts with a '$', which is reserved.

for doing

    const emailTemplate = createElement(EmailTemplateResetPassword, {
      name: vendor.name,
      resetPasswordLink: "www.google.com",
    })

    await ctx.runAction(internal.email.emailClient.sendEmail, {
      to: vendor.email,
      subject: "hello",
      emailTemplate: emailTemplate, // removing this works 
    })

    const emailTemplate = createElement(EmailTemplateResetPassword, {
      name: vendor.name,
      resetPasswordLink: "www.google.com",
    })

    await ctx.runAction(internal.email.emailClient.sendEmail, {
      to: vendor.email,
      subject: "hello",
      emailTemplate: emailTemplate, // removing this works 
    })

6 Replies

ballingt•16mo ago

Yes it is: arguments to Convex functions need to be serialized into Convex values https://docs.convex.dev/database/types. It's too bad this is a bad error message, but even if the serialization protocol did allow fields to start with $$ (which it could in the future) a React element is not round-trip serializeable, it's not pure JSON

winsoroaksOP•16mo ago

got it! do you think there's a work around i can do?

ballingt•16mo ago

So I'd use an enum-like string to identify the template and then do the templating on the other side of the call so sendEmail() would check arg.emailTemplate and choose the appropriate template based on the string. And any data needed.

winsoroaksOP•16mo ago

ack. that's what i was thinking. thanks!

winsoroaksOP•16mo ago

is there a way to do v.enum? i dont see it in the types link https://docs.convex.dev/database/types

Data Types | Convex Developer Hub

All Convex documents are defined as Javascript objects. These objects can have

lee•16mo ago

you probably want v.union https://docs.convex.dev/database/schemas#unions

Schemas | Convex Developer Hub

Schema validation keeps your Convex data neat and tidy. It also gives you end-to-end TypeScript type safety!

react element as an arg?

Did you find this page helpful?