Render conditional fields with zod discriminatedUnion

[hauptrolle]

Hey,

I can't get my head around how to render conditional fields with a zod discriminatedUnion in v1.
@edmundhung Any help is appreciated 😄

Let's say we have a schema like that:

const schema = z.object({
  deliveryPaused: z.boolean().optional(),
  name: z.string({ required_error: "validations.required" }),
  type: z.discriminatedUnion("$case", [
    z.object({
      $case: z.literal("pollWeb"),
      pollWeb: z.object({
        token: z.string({ required_error: "validations.required" }),
      }),
    }),
    z.object({
      $case: z.literal("pushWeb"),
      pushWeb: z.object({
        endpoint: z.string({ required_error: "validations.required" }),
      }),
    }),
  ]),
});

With const typeFieldset = fields.type.getFieldset(); I only get the $case field. How can I render the pollWeb.token and pushWeb.endpoint field 🤔

[edmundhung]

If it is now showing, it's likely a type inference bug 😅 you can cast the type manually and continue to use it the way you expect. It will work.

[hauptrolle]

How would you cast the type manually and any ideas if you can get this fixed? 🤔

[edmundhung]

I am sure it supports discriminatedUnion at the top level (at some point). But it might be either a regression on v1 types or something wrong with nested types that I will need to check.

For now, you can cast it to FieldMetadata manually like this:

const schema = z.object({
  deliveryPaused: z.boolean().optional(),
  name: z.string({ required_error: "validations.required" }),
  type: z.discriminatedUnion("$case", [
    z.object({
      $case: z.literal("pollWeb"),
      pollWeb: pollWebSchema,
    }),
    z.object({
      $case: z.literal("pushWeb"),
      pushWeb: pushWebSchema,
    }),
  ]),
});

const pollWebSchema = z.object({
  token: z.string({ required_error: "validations.required" }),
});

const pushWebSchema = z.object({
  endpoint: z.string({ required_error: "validations.required" }),
});


// In the component:
const typeFieldset = fields.type.getFieldset();
const pollWeb = typeFieldset.pollWeb as FieldMetadata<z.input<typeof pollWebSchema>>;
const pushWeb = typeFieldset.pushWeb as FieldMetadata<z.input<typeof pushWebSchema>>;

[hauptrolle]

Thank you for your fast response time. I appreciate it very much!

I have tried it this way, but typescript still complains about that pollWeb and pushWeb does not exists on the typeFieldset 😢

[edmundhung]

You can add a comment above to silent it for now. This is a pure type inference issue and shouldn't impact the functionality.

// @ts-expect-error
const pollWeb = typeFieldset.pollWeb as FieldMetadata<z.input<typeof pollWebSchema>>;

[hauptrolle]

Alright, this works for now. Thanks again for your quick help. ✌️

Looking forward to see this issue fixed in an upcoming release 🙈