undefined fields return as "undefined" string after getValidatedFormData

[peternguyen777]

const schema = z.object({
  id: z.string().optional(),
  content: z.string().min(1, { message: 'Company context required' }),
})

type FormData = z.infer<typeof schema>

const resolver = zodResolver(schema)

export const action = async (args: ActionFunctionArgs) => {
  const {
    errors,
    data,
    receivedValues: defaultValues,
  } = await getValidatedFormData<FormData>(args.request, resolver)
  if (errors) {
    return { defaultValues, errors }
  }

 // at this point data.id === "undefined"
}

I have the following schema, however after validation, why is data.id coming out as a string called "undefined" rather than undefined?

[alexwhb]

@peternguyen777 I believe I can answer that... my understanding is that remix-hook-form basically stringifies everything by default when it sends data back to the server. Then on the server side... zod will cast back to the value types you defined them as... so in your case id: z.string().optional() because it's a z.string() it will stringify undefined. I think it would actually be null though and not a stringified null. One possible workaround is setting stringifyAllValues: false

like this:

    const {
        handleSubmit,
        formState: {errors, isSubmitting},
        register,
        setValue
    } = useRemixForm<FormData>({
        mode: "onSubmit",
        resolver,
        stringifyAllValues: false
    })

[peternguyen777]

thanks @alexwhb. Unfortunately adding stringifyAllValues: false still causes data.id === "undefined".

Currently I'm using a work around by coercing undefined values to an empty string '' (and therefore removing .optional() from the schema) but I feel this is not the intended react-hook-form/zod pattern.

[alexwhb]

@peternguyen777 Ya I'm with ya... that does not feel very idiomatic. Hmmm... I'll let ya know if I think of any other suggestions.

[alexwhb]

@peternguyen777 I think it has something todo with this method: https://github.com/Code-Forge-Net/remix-hook-form/blob/main/src/utilities/index.ts#L21

I don't know enough about the inner workings of this library to fully understand, but it seems like it's doing some sort of string conversion from the form data.

[alexwhb]

Wait... I just realized that everything has to be converted to form data. It's not JSON. 99% sure form data is extremely simple and is just strings unless you do some sort of Base64 encoding or something.

[THOUSAND-SKY]

I'm dealing with empty/undefined values in forms too. Adding shouldUnregister: true to useRemixForm helps unmounted inputs disappear, but empty ones still complicate things.

Would prefer removing all empty/undefined values.

Also, { a: undefined, b: "thing" } turns into { a: "undefined", b: '"thing"' }, which is tricky with the double quotes at b. I would like to understand what the use case is, on paper it looks it's happening because stringifyAllValues: true by default.