Help Needed: Hard time understanding Discriminated Union

[alveshelio]

I'm having a hard time understanding how discriminated union work.

I have this schema bellow and I have a couple of conditions:
One is for the workStatus this is required. The user has 3 options, "Full Time", "Contract" and "Both"
Now based on what the user selects we must display the appropriate fields
=> User selects "Full Time" then we need to request for fullTimeCompensation and contractCompensation should be undefined
=> User selects 'Contract" then we need to request for 'contractCompensationandfullTimeCompensationshould be undefined => User selects 'Both" then we need to request forfullTimeCompensation and 'contractCompensation

The other condition is workLocationType, this is a required field and the user has two options, either "Remote" or "Flexible"
If the user selects "Flexible" we need to as for field acceptableTravelTime, if user selects "Remote" then acceptableTravelTime should be undefined.

This is how I've defined my schemas

  const workStatusEnumSchema = z.nativeEnum(Work_Status_Types_Enum, {
    errorMap: () => ({ message: formValidationMessages.format('fieldRequired') }),
  })
  const workLocationEnumSchema = z.nativeEnum(Work_Location_Types_Enum, {
    errorMap: (issue, _ctx) => {
      console.warn('issue', issue)
      console.warn('context', _ctx)
      return { message: formValidationMessages.format('fieldRequired') }
    },
  })
  const workVacationEnumSchema = z.nativeEnum(Work_Vacation_Durations_Enum, {
    errorMap: () => ({ message: formValidationMessages.format('fieldRequired') }),
  })
  const baseSchema = z.object({
    workStatus: workStatusEnumSchema,
    workLocationType: workLocationEnumSchema,
    vacationDuration: workVacationEnumSchema,
    address: z.string(),
    latitude: z.number(),
    longitude: z.number(),
    drivingToWork: z.boolean(),
    occasionallyTravelOffice: z.boolean(),
    relocateForWork: z.boolean(),
    visaSponsorShip: z.array(visaSponsorshipSchema),
    spokenLanguages: z.array(optionSchema),
  })

  const fullTimeSchema = baseSchema.extend({
    workStatus: z.literal(Work_Status_Types_Enum.FullTime),
    fullTimeCompensation: z.string({
      required_error: formValidationMessages.format('fieldRequired'),
    }),
    contractCompensation: z.undefined(),
  })

  const contractSchema = baseSchema.extend({
    workStatus: z.literal(Work_Status_Types_Enum.Contract),
    contractCompensation: z.string({
      required_error: formValidationMessages.format('fieldRequired'),
    }),
    fullTimeCompensation: z.undefined(),
  })

  const fullTimeContractSchema = baseSchema.extend({
    workStatus: z.literal(Work_Status_Types_Enum.FullTimeOrContract),
    contractCompensation: z.string({
      required_error: formValidationMessages.format('fieldRequired'),
    }),
    fullTimeCompensation: z.string({
      required_error: formValidationMessages.format('fieldRequired'),
    }),
  })

  const workStatusSchema = z.union([fullTimeSchema, contractSchema, fullTimeContractSchema])

  const flexibleSchema = baseSchema.extend({
    workLocationType: z.literal(Work_Location_Types_Enum.Flexible),
    acceptableTravelTime: z.string({
      required_error: formValidationMessages.format('fieldRequired'),
    }),
  })

  const remoteSchema = baseSchema.extend({
    workLocationType: z.literal(Work_Location_Types_Enum.Remote),
    acceptableTravelTime: z.undefined(),
  })

  const workLocationSchema = z.union([flexibleSchema, remoteSchema])

  const schema = z.union([baseSchema, workLocationSchema, workStatusSchema])

  type FormData = z.infer<typeof schema>

const methods = useForm<FormData>({
    mode: 'onBlur',
    reValidateMode: 'onBlur',
    defaultValues: {
      vacationDuration: '' as Work_Vacation_Durations_Enum,
      workLocationType: '' as Work_Location_Types_Enum,
      workStatus: '' as Work_Status_Types_Enum,
      address: '',
      drivingToWork: false,
      occasionallyTravelOffice: false,
      relocateForWork: false,
      visaSponsorShip: [],
      spokenLanguages: [
        buildSpokenLanguageOption(router.locale as string, spokenLanguagesMessages),
      ],
    },
    resolver: zodResolver(schema),
  })

At this point I have no errors in the schema nor in the default values.
However, in my onSubmit function which is defined as follow:

const onSubmit = async ({
    vacationDuration,
    workLocationType,
    workStatus,
    fullTimeCompensation,
    contractCompensation,
    acceptableTravelTime,
    address,
    latitude,
    longitude,
    drivingToWork,
    relocateForWork,
    visaSponsorShip,
    occasionallyTravelOffice,
    spokenLanguages,
  }: FormData): Promise<void> => {
    ...
}

But this clearly doesn't work. If a user selects 'Full Time" then I get an error "Expeted 'CONTRACT', received 'FULL_TIME'", and in fullTimeCompensation if the user enters a value he get's an error "Expected undefined, received 'string'". Same thing if the user selects 'CONTRACT' and same behaviour for workLocationType if user selects something else other than "REMOTE" he will get the same error.

I'm not sure how to create the schema for my use case :(

Any help would be greatly appreciated.

[scotttrinh]

@alveshelio

I'm not sure I understand your final union here:

const schema = z.union([baseSchema, workLocationSchema, workStatusSchema])

I think you're trying to make an intersection where different parts of the resultant model are defined by unions rather than by intersections.

Does this work:

const schema = z.intersection([workLocationSchema, workStatusSchema]);

—?

---

I would also avoid doing destructuring in your onSubmit handler. TypeScript is getting better at using union discriminants in control structures (like switch and if), but I don't think it's fully there and there are likely edge cases. I would instead suggest doing something like:

const onSubmit = async (formData: FormData) => {
  switch (formData.workStatus) {
    case Work_Status_Types_Enum.FullTime:
      // TypeScript knows we are in that case now
      break;
  }
};

(or use if/else if or even type guards!)

Feel free to submit a CodeSandbox if you need a bit more assistance with this and I can help when I get a chance. You can use my Zod Template to help get a minimal repro.

[alveshelio]

Hi @scotttrinh,

Sorry for the long silence, I had some health issues.

I went ahead and created this codesandbox: https://codesandbox.io/s/zod-union-types-ez6yu

I've updated the schema but it's still not working, this is what I have now:

const baseSchema = z.object({
    workStatus: workStatusEnumSchema,
    workLocationType: workLocationEnumSchema,
    vacationDuration: workVacationEnumSchema,
    address: z.string(),
    latitude: z.number(),
    longitude: z.number(),
    drivingToWork: z.boolean(),
    occasionallyTravelOffice: z.boolean(),
    relocateForWork: z.boolean(),
    visaSponsorShip: z.array(visaSponsorshipSchema),
    spokenLanguages: z.array(optionSchema),
  })

  const fullTimeSchema = baseSchema.extend({
    workStatus: z.literal(Work_Status_Types_Enum.FullTime),
    fullTimeCompensation: z.string().nonempty({
      message: 'fullTimeSchema field required',
    }),
    contractCompensation: z.string().length(0, { message: 'contractCompensation must be empty' }),
  })

  const contractSchema = baseSchema.extend({
    workStatus: z.literal(Work_Status_Types_Enum.Contract),
    contractCompensation: z.string().nonempty({
      message: 'contract type required',
    }),
    fullTimeCompensation: z.string().length(0, { message: 'fullTimeCompensation must be empty' }),
  })

  const fullTimeContractSchema = baseSchema.extend({
    workStatus: z.literal(Work_Status_Types_Enum.FullTimeOrContract),
    contractCompensation: z.string().nonempty({
      message: 'contractCompensation required',
    }),
    fullTimeCompensation: z.string().nonempty({
      message: 'fullTime required',
    }),
  })

  const workStatusSchema = z.union([fullTimeSchema, contractSchema, fullTimeContractSchema])

  const flexibleSchema = baseSchema.extend({
    workLocationType: z.literal(Work_Location_Types_Enum.Flexible),
    acceptableTravelTime: z.string().nonempty({
      message: 'acceptableTravelTime required',
    }),
  })

  const remoteSchema = baseSchema.extend({
    workLocationType: z.literal(Work_Location_Types_Enum.Remote),
    acceptableTravelTime: z.string().length(0, { message: 'acceptableTravelTime must be empty' }),
  })

  const workLocationSchema = z.union([flexibleSchema, remoteSchema])

  const schema = z.intersection(workLocationSchema, workStatusSchema)

I'm not destructuring formData in onSubmit anymore.

Here are a couple of scenarios:
I try to submit the form without filling any field:

I select What kind of work are you looking for, How many weeks of vacation per year are you looking for and Work site preferences (which are all 3 enums) without filling any other field:

Another example with different selections for What kind of work are you looking for and Work site preferences

I'm not sure why, no mater which option I chose in What kind of work are you looking for and Work site preferences, I'm always receiving an error that is expect another option.

I don't know what I'm missing or doing wrong. I've tried many things but none of them worked. I've noticed that I was getting errors on invalid types but this is because I was initializing input fields with an empty string '' but in my initial schema I was expecting it to be undefined. The reason I'm initializing it with an empty trying is because I don't want the component from being uncontrolled then wen passing a string for it to be controlled, it will start throwing errors in the console. So now I say that it's a string and I'm using .nonempty(), however, I've checked the docs and it says that nonempty is deprecated, so I'm not sure if I should use min(1) as suggested.

Any help would be greatly appreciated :)

Thank you