Invalid type error with discriminatedUnion and or

[standuprey]

I have the following type:

const productItemBase = z.object({
  type: z.literal("product"),
  title: z.string(),
});

const productItem = productItemBase
  .extend({ url: z.string() })
  .or(productItemBase.extend({ description: z.string() }));

const contentItem = z.object({
  type: z.literal("content"),
  title: z.string(),
  url: z.string(),
  imageUrl: z.string(),
});

const documentItem = z.object({
  type: z.literal("document"),
  title: z.string(),
  url: z.string(),
  documentType: z.string(),
});

export const schema = z.object({
  items: z.array(
    z.discriminatedUnion("type", [productItem, contentItem, documentItem])
  ),
});

Expected:
No type error

Actual:
Type error on the productItem inside the discriminatedUnion. (The type error disappears if I replace it with productItemBase, of course)

[JacobWeisenburger]

Is this what you are looking for?

export const schema = z.object( {
    items: z.array(
        z.discriminatedUnion( 'type', [
            ...productItem.options,
            contentItem,
            documentItem
        ] )
    ),
} )

Here's the full example:

const productItemBase = z.object( {
    type: z.literal( 'product' ),
    title: z.string(),
} )

const productItem = productItemBase
    .extend( { url: z.string() } )
    .or( productItemBase.extend( { description: z.string() } ) )

const contentItem = z.object( {
    type: z.literal( 'content' ),
    title: z.string(),
    url: z.string(),
    imageUrl: z.string(),
} )

const documentItem = z.object( {
    type: z.literal( 'document' ),
    title: z.string(),
    url: z.string(),
    documentType: z.string(),
} )

export const schema = z.object( {
    items: z.array(
        z.discriminatedUnion( 'type', [
            ...productItem.options,
            contentItem,
            documentItem
        ] )
    ),
} )

[standuprey]

Seemed like a magic solution at first, but then I got this error: Discriminator property type has duplicate value product
But my schema is also a bit different actually:

const productItemBase = z.object({
  type: z.literal('product'),
  title: requiredString(),
})

const productItemDetails = z.object({
  imageUrl: requiredString(),
})

const productItem = productItemBase
  .extend({
    url: requiredString('At least one URL required.'),
    product: productItemDetails,
  })
  .or(
    productItemBase.extend({
      product: productItemDetails.extend({
        amazonUrl: requiredString('At least one URL required.'),
      }),
    })
  )

So product is in both alternative but with a different schema

[JacobWeisenburger]

this schema seems to be working fine. What problem are you having?

[rogue-kitten]

@standuprey did you figure out a way to tackle the case where product is in both the schemas? Stuck with a similar issue at the moment

[standuprey]

Yes, so I didn't try to solve this at this level, my ProductItem has both fields optional, but I am wrapping the discriminatedUnion with a productHasAtLeastOneUrl that does the check:

const productHasAtLeastOneUrl = (productObject: z.ZodTypeAny) =>
  productObject.refine(
    (val) =>
      val?.type === 'product' ? !!val.url || !!val.product.amazonUrl : true,
    { message: 'Please add at least one URL.', path: ['product', 'amazonUrl'] }
  )

const productItem = z.object({
  type: z.literal('product'),
  title: requiredString(),

  url: asOptionalField(validUrl('Please enter a URL or remove it completely.')),
  product: z.intersection(
    itemImageProps.nullish(),
    checkPromoCode(
      z
        .object({
          amazonUrl: asOptionalField(
            validUrl('Please enter a URL or remove it completely.').regex(
              /amazon.com|a.co|amzn.to/,
              {
                message: 'Please only use Amazon links in this field',
              }
            )
          ),
          promoCodeCode: asOptionalField(z.string()),
          promoCodeDiscount: asOptionalField(z.string()),
        })
        .nullish()
    )
  ),
})


export const getItListItemSchema = () =>
  productHasAtLeastOneUrl(
    z.discriminatedUnion('type', [
      productItem,
      contentItem,
      documentItem,
      textItem,
      voiceTipItem,
      imageItem,
    ])
  )

[christensena]

This is marked as answered but I don't think it is.

The types validate but when you run the schema (parse) it complains of duplicate values for the discriminator with Discriminator property type has duplicate value.

I expect this is because of the union within the values passed to discriminatedUnion results in multiple actual entries.

Because this can be expressed easily in typescript types it seems like a limitation in zod?

A more complete example. Is there a way to express this in zod?:

type Product = {
  type: "product";
} & (
  | {
      weight: number;
    }
  | {
      quantity: number;
    }
);

type Category = {
  id: number;
  type: "category";
} & ({ title: string } | { parentId: number; subtitle: string });

type UnionOfTypes = Category | Product;

[davidoort]

Having the same issue! @JacobWeisenburger doesn't seem like you completely answered the question...

[Jun-Xiang]

I did a workaround based on the example above, thought it would help others who would want to achieve the same behavior.
What I did was making the type any and manually parsing using superRefine. To still get the type inference, I use union to create the actualItemSchema to use in transform.

const actualItemSchema = z.union( [
    productItem,
    contentItem,
    documentItem,
] )
type ActualItemSchema = z.infer<typeof actualItemSchema>
const itemSchemas = {
    product: productItem,
    content: contentItem,
    document: documentItem,
}

export const schema = z.object({
  items: z.array(
    z
      .any()
      .transform(item => item as ActualItemSchema)
      .superRefine((item, ctx) => {
        const itemType = item.type;
        const schema = itemSchemas[itemType];
        const result = schema.safeParse(item);
        if (!result.success) {
          result.error.issues.forEach(issue => {
            ctx.addIssue(issue);
          });
        }
      })
  ),
});

Full example:

const productItemBase = z.object( {
    type: z.literal( 'product' ),
    title: z.string(),
} )

const productItem = productItemBase
    .extend( { url: z.string() } )
    .or( productItemBase.extend( { description: z.string() } ) )

const contentItem = z.object( {
    type: z.literal( 'content' ),
    title: z.string(),
    url: z.string(),
    imageUrl: z.string(),
} )

const documentItem = z.object( {
    type: z.literal( 'document' ),
    title: z.string(),
    url: z.string(),
    documentType: z.string(),
} )
const actualItemSchema = z.union( [
    productItem,
    contentItem,
    documentItem,
] )
type ActualItemSchema = z.infer<typeof actualItemSchema>
const itemSchemas = {
    product: productItem,
    content: contentItem,
    document: documentItem,
}
export const schema = z.object({
  items: z.array(
    z
      .any()
      .transform(item => item as ActualItemSchema)
      .superRefine((item, ctx) => {
        const itemType = item.type;
        const schema = itemSchemas[itemType];
        const result = schema.safeParse(item);
        if (!result.success) {
          result.error.issues.forEach(issue => {
            ctx.addIssue(issue);
          });
        }
      })
  ),
});