Add intent as a discriminator for union schemas with conditional fields.

[titong0]

I'm not sure if there is already a way of achieving this withing the library but I will share my approach here:

Usecase:
Imagine a single page shows a 'create post' Form and multiple posts, each of them being with two diferent interactions: like and report.

I think the standard approach right now is something like this:

const createPostSchema = z.object({
  content: z.string(),
});
const reportPostSchema = z.object({
  postId: z.string(),
  reason: z.union([z.literal("spam"), z.literal("offensive")]),
});
const likePostSchema = z.object({ postId: z.string() });

export const action = async ({ request, params }: ActionFunctionArgs) => {
  const formData = await request.formData();

  switch (formData.get(conform.INTENT)) {
    case "create-post":
      const createPostSubmission = parse(formData, {
        schema: createPostSchema,
      });
      createPost(createPostSubmission.value?.content);
      break;
    case "report-post":
      const reportPostSubmission = parse(formData, {
        schema: reportPostSchema,
      });
      reportPost(reportPostSubmission.value?.reason);
      break;
    case "like-post":
      const likePostSubmission = parse(formData, {
        schema: likePostSchema,
      });
      likePost(likePostSubmission.value?.postId)
      break;
  }
};

what I would like better is the schema to be a discriminated union with the different intents and their respective fields.

An api like this:

const schema = z
  .object({
    intent: z.literal("create-post"),
    content: z.string(),
  })
  .or(
    z.object({
      intent: z.literal("report-post"),
      postId: z.string(),
      reason: z.union([z.literal("spam"), z.literal("offensive")]),
    })
  )
  .or(z.object({ intent: z.literal("like-post"), postId: z.string() }));

export const action = async ({ request, params }: ActionFunctionArgs) => {
  const formData = await request.formData();
  const submission = parseWithIntent(formData, { schema });
  if (!submission.value || submission.intent === "submit") {
    return json({ submission });
  }

  switch (submission.value.intent) {
    case "create-post":
      createPost(submission.value.content);
      break;
    case "report-post":
      reportPost(submission.value.reason, submission.value.postId);
      break;
    case "like-post":
      likePost(submission.value.postId);
      break;
  }
};

I think this approach is better because it keeps the intent and the field together. Making it impossible to confuse the relation between the different fields and their intents.

My implementation of the parseWithIntent function looks like this and seems to be inferring the types correctly:

export const parseWithIntent = <Schema extends ZodTypeAny>(
  formData: FormData,
  config: { schema: Schema }
) => {
  const intent = formData.get(conform.INTENT);
  const incorrectlySetIntent = formData.get("intent");
  if (!intent && incorrectlySetIntent) {
    const msg = `no ${conform.INTENT} property in formData but intent property has value of ${incorrectlySetIntent}`;
    throw new Error(msg);
  }
  if (!intent) {
    throw new Error(
      "No intent present in formData, use conventional parse instead"
    );
  }
  formData.set("intent", intent);
  return parse(formData, {
    schema: config.schema,
  });
};

However, it does not correctly implement the "config" parameter which means you can't parse asyncronously and other options that the config parameter would allow you to tweak.

[edmundhung]

Thanks for sharing your approach here! I think we have similar ideas on this. What you missed is the discriminatedUnion API from zod. You can also find an example I shared here.

[titong0]

Thanks for the reply!

I think using z.object().or(z.object()) is the same as using z.discriminatedUnion([z.object(), z.object()].

Still, I did consider giving an intent value to the submitting button, I just thought it'd be nicer to have the conform.INTENT as the single source of truth, rather than having both a name="intent" input and another with name={conform.INTENT}

Not really sure there though, what is the point of setting conform.INTENT if not to separate different form intents?