Drizzle Team•2mo ago

Error Handling for Null Values in Drizzle-Zod + Shadcn Form (React-Hook-Form)

The error message indicates that the value property of the field object can be null, but the Input, Checkbox components value prop do not accept null as a valid type. It only accepts string, number, readonly string[], or undefined.

17 Replies

rphlmr ⚡•2mo ago

👋 Yes, without .notNull the default for the DB is null. Maybe you can try to override your zod schema?:

const insertUserSchema = createInsertSchema(users, {
  soemthing: (schema) => schema.soemthing.string().optional(),
});

const insertUserSchema = createInsertSchema(users, {
  soemthing: (schema) => schema.soemthing.string().optional(),
});

MarvinKR•2mo ago

I did this but it's not changing the error:

// Schema for inserting a company - can be used to validate API requests
export const insertCompanySchema = createInsertSchema(companies, {
  email: (schema) => schema.email.email(),
  websiteUrl: (schema) => schema.websiteUrl.optional(),
  foundingYear: (schema) => schema.foundingYear.optional(),
  description: (schema) => schema.description.optional(),
  logoUrl: (schema) => schema.logoUrl.optional(),
  phone: (schema) => schema.phone.optional(),
  address: (schema) => schema.address.optional(),
  country: (schema) => schema.country.optional(),
  city: (schema) => schema.city.optional(),
  score: (schema) => schema.score.optional(),
}).omit({
  id: true,
  createdAt: true,
});

// Schema for inserting a company - can be used to validate API requests
export const insertCompanySchema = createInsertSchema(companies, {
  email: (schema) => schema.email.email(),
  websiteUrl: (schema) => schema.websiteUrl.optional(),
  foundingYear: (schema) => schema.foundingYear.optional(),
  description: (schema) => schema.description.optional(),
  logoUrl: (schema) => schema.logoUrl.optional(),
  phone: (schema) => schema.phone.optional(),
  address: (schema) => schema.address.optional(),
  country: (schema) => schema.country.optional(),
  city: (schema) => schema.city.optional(),
  score: (schema) => schema.score.optional(),
}).omit({
  id: true,
  createdAt: true,
});

rphlmr ⚡•2mo ago

Do you have some default/initial values somewhere that come from a query? (that you set in react hook form)

MarvinKR•2mo ago

Here is my react hook form

message.txt

rphlmr ⚡•2mo ago

So the error is for verified or isBuyer?

MarvinKR•2mo ago

All fields that don't have notNull() in my db schema

rphlmr ⚡•2mo ago

foundingYear: null, is expected?

MarvinKR•2mo ago

and the Phone component surprisingly isn't having an issue despite phone not having notNull() in my db Yeah if the user doesn't mention the founding year in the form we store it as null

rphlmr ⚡•2mo ago

because value={field.value ?? undefined} This is what I do too, ?? undefined 😬

MarvinKR•2mo ago

Ah yeah that was my temporary fix haha.

rphlmr ⚡•2mo ago

I don't know if there is a better solution. We are mixing 2 worlds: front-end that wants undefined as nullable value and db that only knows null

MarvinKR•2mo ago

The beauty of "full-stack", I suppose haha.

rphlmr ⚡•2mo ago

yeah .. I am a Remix Run user, so close to what html expect and I always have to remap my 'models' or deal with ?? undefined could be cool to have an option somewhere to transform null to undefined is it Tan query behind the scene?

MarvinKR•2mo ago

Yeah!

rphlmr ⚡•2mo ago

I wonder if there is something that could transform that ~~Just an idea. in your schema override, can you try to add a .default(undefined) in one of the fields?~~

Gaming

Programming

Error Handling for Null Values in Drizzle-Zod + Shadcn Form (React-Hook-Form)