Null, Undefined, <form><input>, Zod validation and query result type mismatches.
I have a problem that seems complex to me, and can't figure out an elegant and scalable solution:
I use Zod, Prisma, mySQL and React.
I define my Zod schemas, that are 2-3 layers deep with .optional() properties in each layers.
.optional() in zod translates to the undefined type in typescript.
I'm connecting my data in the mySQL database with foreign keys.
I have created a react-hook-form, an HTML form with input fields and select fields, that match the zod schema, validated the input data, and prisma mutates my database with the data just fine.
The problem comes, when I query said data with prisma.
All the fields, that were optional() in the zod schema and the form, and were validated as for example string | undefined, now com back as string | null
and since the object are several layers deep, I can't simply transform them recursively to sap out all the null values to undefined.
This results in me having to duplicate the zod schemas, one for the inputs, and one for the queried data for the same entity. The schema for input uses optional(), and the schema for the query data validation and type definitions use nullable().
How should I handle this in a more elegant and scalable way?
0 Replies