Drizzle Team•5mo 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 ⚡•5mo 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•5mo 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 ⚡•5mo ago

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

MarvinKROP•5mo ago

Here is my react hook form

message.txt

rphlmr ⚡•5mo ago

So the error is for verified or isBuyer?

MarvinKROP•5mo ago

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

rphlmr ⚡•5mo ago

foundingYear: null, is expected?

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

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

MarvinKROP•5mo ago

Ah yeah that was my temporary fix haha.

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

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

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

Yeah!

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

We can do that

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

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

MarvinKROP•5mo ago

Thanks for the fix! You rock

Gaming

Programming

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