Drizzle Team•6mo 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 ⚡•6mo 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(),
});

MarvinKROP•6mo 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 ⚡•6mo ago

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

MarvinKROP•6mo ago

Here is my react hook form

message.txt

rphlmr ⚡•6mo ago

So the error is for verified or isBuyer?

MarvinKROP•6mo ago

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

rphlmr ⚡•6mo ago

foundingYear: null, is expected?

MarvinKROP•6mo 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 ⚡•6mo ago

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

MarvinKROP•6mo ago

Ah yeah that was my temporary fix haha.

rphlmr ⚡•6mo 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

MarvinKROP•6mo ago

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

rphlmr ⚡•6mo 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?

MarvinKROP•6mo ago

Yeah!

rphlmr ⚡•6mo 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?~~

rphlmr ⚡•6mo ago

We can do that

const insertUserSchema = createInsertSchema(users).extend({
  name: z.string().optional(),
});

const insertUserSchema = createInsertSchema(users).extend({
  name: z.string().optional(),
});

MarvinKROP•6mo ago

Thanks for the fix! You rock

Gaming

Programming

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