How to deal with null values in forms?

[verheyenkoen]

I have a drizzle schema that has an optional/nullable varchar-field. When I load a record from the database and try to bind the optional value to an <input>, Typescript complains because the value prop doesn't allow null-values. It does however allow for undefined values. So is there a way to have a record loaded and the null-values automatically converted to undefined so they can be directly bound to form fields without having to run them through a conversion function.

I know I can also make the field .notNull() with an empty string default but that does feel like the wrong way to fix this.

[mgaebler]

@verheyenkoen I have just asked myself exactly the same question. Have you been able to solve the problem for yourself?

[verheyenkoen]

Sorry, I've since abandoned this project and don't really know anymore what this was about. That was also my only Drizzle project so can't really help you any further.

[mgaebler]

No problem. My approach is now to transform 'null' values to 'undefined' on service layer.

function transformNullToUndefined<T extends object>(data: T): T {
  // unpack the object into an array of key-value pairs
  const entries = Object.entries(data).map(([key, value]) => {
    // replace null values with undefined
    if (value === null) {
      return [key, undefined]
    } else {
      return [key, value]
    }
  })
  return Object.fromEntries(entries) as T
}