Can a nullable text column be made editable in a typed way in a React form?

[febeling]

Full question: Can a nullable text column be made editable in a typed way in a form, by way of a Zod schema derived from the Drizzle table schema?

Problem: the text field has a type mismatch and can't handle null values potentially coming from the database.

I have a minimal example app repo here. The problem is that the schema (createInsertSchema from drizzle-zod) types the column with 'string | null | undefined' but the form field component accepts no null. undefined is ok though.

This shows up in the editor's intellisense, or when tsc runs.

SQL Schema (users):
https://github.com/febeling/nextjs14-shadcnui-zod-rhf-drizzle-testcase/blob/e60d74413837276c7a248db1330490f612770007/src/lib/schema.ts#L5-L15

Use in form:
https://github.com/febeling/nextjs14-shadcnui-zod-rhf-drizzle-testcase/blob/e60d74413837276c7a248db1330490f612770007/src/app/new/page.tsx#L63-L79

The warning:
https://github.com/febeling/nextjs14-shadcnui-zod-rhf-drizzle-testcase/blob/e60d74413837276c7a248db1330490f612770007/README.md?plain=1#L23-L38

There is a longer explanation in the README.

It includes this workaround, which can be applied per each input component:
https://github.com/febeling/nextjs14-shadcnui-zod-rhf-drizzle-testcase/blob/e60d74413837276c7a248db1330490f612770007/README.md?plain=1#L48-L56

Other components in the app are: Shadcn/ui form, react-hook-form, @hookform/resolvers, and others, but I believe the key parts are Zod and Drizzle ORM here.

Questions:

Is there a better solution than this workaround?

Can the drizzle-zod schema be "patched," so that in transforms the database type on the way from db to form, e.g. from null to undefined? (I do have found the refine to transform on the way from form to db.)

[laurent512]

up