Discriminated union of another discriminated union

[ayush-seth]

Consider this use case where I have a requirement to make a validation schema for a complex form. User can either choose to fill the details of the form manually or upload a csv instead of filling the form.

import { z } from "zod";

const SolarEnergySchema = z.object({
  type: z.literal("Solar"),
  solarField1: z.string(),
  solarField2: z.string(),
  uploadCsv: z.literal(false)
});

const WindEnergySchema = z.object({
  type: z.literal("Wind"),
  windField1: z.string(),
  windField2: z.string(),
  uploadCsv: z.literal(false)
});

const WaterEnergySchema = z.object({
  type: z.literal("Water"),
  waterField1: z.string(),
  waterField2: z.string(),
  uploadCsv: z.literal(false)
});

const EnergyUnionSchema = z.discriminatedUnion("type", [
  SolarEnergySchema,
  WindEnergySchema,
  WaterEnergySchema
]);

const CSVSchema = z.object({
  uploadCsv: z.literal(true),
  csvFile: z.instanceof(File)
});

// Form Fields can be either of type EnergyUnionSchema or CSVSchema
const FormSchema = z.discriminatedUnion("uploadCsv", [
  EnergyUnionSchema, // type error
  CSVSchema
]);

The form itself is complex and has dependent fields based on a Select input for which I can make a discriminated union with the value of Select being the discriminator. Now I have a discriminated zod union which I want to combine with a schema for uploading the csv file but I when trying to do that I get these type errors. How do I achieve my required schema for this use case? I have attached a sandbox link with a simplified version of my schema requirements

Sandbox link: https://codesandbox.io/s/weathered-darkness-6okw7n?file=/src/index.ts

I have tried using union instead of discriminated union but that doesn't work for my use case because I have using react-hook-form with zod as resolver. If I mark upload option to be true, I still get errors reported for the form details even though the user doesn't need to fill them. Ideally, if the upload option is true, other form fields should not be validated at all

[JacobWeisenburger]

Everything seems to be working fine when I use z.union. Seems like a problem with react-hook-form zod resolver.

const SolarEnergySchema = z.object( {
    type: z.literal( 'Solar' ),
    solarField1: z.string(),
    solarField2: z.string(),
    uploadCsv: z.literal( false )
} )

const WindEnergySchema = z.object( {
    type: z.literal( 'Wind' ),
    windField1: z.string(),
    windField2: z.string(),
    uploadCsv: z.literal( false )
} )

const WaterEnergySchema = z.object( {
    type: z.literal( 'Water' ),
    waterField1: z.string(),
    waterField2: z.string(),
    uploadCsv: z.literal( false )
} )

const EnergyUnionSchema = z.discriminatedUnion( 'type', [
    SolarEnergySchema,
    WindEnergySchema,
    WaterEnergySchema
] )

const CSVSchema = z.object( {
    uploadCsv: z.literal( true ),
    csvFile: z.instanceof( File )
} )

const FormSchema = z.union( [
    EnergyUnionSchema,
    CSVSchema
] )

console.log(
    FormSchema.parse( {
        type: 'Solar',
        solarField1: 'solarField1',
        solarField2: 'solarField2',
        uploadCsv: false
    } ),
)
// {
//     type: 'Solar',
//     solarField1: 'solarField1',
//     solarField2: 'solarField2',
//     uploadCsv: false
// }

Perhaps you can post a codesandbox with the react-hook-form code also?

[jamesarosen]

This works for me: z.union([ EnergyUnionSchema, CSVSchema ])

But this doesn't: z.discriminatedUnion('uploadCsv', [ EnergyUnionSchema, CSVSchema ])

I would expect the latter to work, but I get a TypeError:

Type 'ZodDiscriminatedUnion<"type", [ZodObject<{ uploadCsv: ZodLiteral<false>; type: ZodLiteral<'sola"">; solarField1: ZodString; }, "strip", ZodTypeAny, { ...; }, { ...; }>, ZodObject<...>]>' is missing the following properties from type 'ZodObject<{ type: ZodTypeAny; } & ZodRawShape, UnknownKeysParam, ZodTypeAny, { [x: string]: any; }, { [x: string]: any; }>': _cached, _getCached, shape, strict, and 14 more.ts(2345

I thought I might be able to fix that with this:

const EnergyUnionSchema = z.object({ uploadCsv: z.literal(false) }).pipe(
  z.discriminatedUnion('type', [SolarEnergySchema, WindEnergySchema, WaterEnergySchema]),
)

in the hopes that the first z.object would give zod enough type information. Sadly, the .pipe turns it into a ZodPipeline that loses the necessary types.

[jamesarosen]

See https://github.com/colinhacks/zod/pull/2136/files#diff-009862f97a560e2822341c5cc87a42d978fb47f9bbbaafa5ed1e704d3844d766R269

[ayush-seth]

Yes, I did some more research and it is indeed an issue with react-hook-form. The error object I get from the hook contains errors for all fields in the form and I guess that's just how the zod resolver for hook form works. I will probably have to add custom logic to ignore the other error messages when uploadCsv is checked and the other errors are irrelevant. Sorry for wasting your time.