Support application/json in parseWithZod

[islami00]

Hello,

I recently started working with conform and one thing I kept hitting is not being able to send JSON to my actions due to the limitation of only working with formData or URLSearchParams. My current use case is saving the value of a rich text editor as JSON.

To do that, I am directly submitting the form with fetcher.submit, and using conform to reset the editor when the request succeeds.

I tried to adopt parseWithZod to JSON following this guide https://www.jacobparis.com/content/conform-json-formdata, but I soon hit the limit as those functions imported are internal to conform. So, I am making a formal request to consider allowing this use-case of submitting JSON to actions.

Thank you!

This is the code I used (I had to dig into conform as I need to be able to reset the form, which the guide does not include):

import { formatPaths, type Submission } from '@conform-to/dom';
import {
  createSubmission,
  getSubmissionContext,
} from '@conform-to/dom/submission';
import { parseWithZod } from '@conform-to/zod';
import type { ZodError, ZodTypeAny, input, output, z } from 'zod';

type SubmissionFromSchema<Schema extends ZodTypeAny> = Submission<
  input<Schema>,
  string[],
  output<Schema>
>;

export async function parseRequest<Schema extends ZodTypeAny>(
  request: Request,
  { schema }: { schema: Schema }
): Promise<SubmissionFromSchema<Schema>> {
  const type = request.headers.get('content-type');
  if (type === 'application/json') {
    const payload = (await request.json()) as Record<string, unknown>;
    const result = await schema.safeParseAsync(payload);
    return parseJSONWithZod(payload, result);
  }
  const formData = await request.formData();
  return parseWithZod(formData, { schema });
}

/**
 *
 * @description Mimic parseWithZod by taking a few shortcuts:
 * - no use of submissionContext, we assume you don't submit via conform
 */
function parseJSONWithZod(
  payload: Record<string, unknown>,
  result: z.SafeParseReturnType<unknown, unknown>
) {
  // Create a default Submission
  const ctx = getSubmissionContext(new FormData());
  if (result.success) {
    return createSubmission({ ...ctx, payload: payload, value: result.data });
  }
  return createSubmission({
    ...ctx,
    payload: payload,
    error: getError(result.error),
  });
}

/**
 * @description getError. Same function that conform uses, only modified to exclude:
 * - custom formatError as we only want one
 * - zodMessage as we don't use coersion
 */
function getError(zodError: ZodError): Record<string, string[] | null> {
  const result: Record<string, z.ZodIssue[] | null> = {};
  for (const issue of zodError.errors) {
    const name = formatPaths(issue.path);
    // We don't need to handle conform error messages as there is no coersion
    const _issues = result[name];
    if (_issues !== null) {
      if (_issues) {
        result[name] = _issues.concat(issue);
      } else {
        result[name] = [issue];
      }
    }
  }
  // Format the error to a format zod expects
  return Object.entries(result).reduce<Record<string, string[] | null>>(
    (item, _ref) => {
      const [name, issues] = _ref;
      item[name] = issues ? formatError(issues) : null;
      return item;
    },
    {}
  );
}
function formatError(issues: z.ZodIssue[]): string[] {
  return issues.map((each) => each.message);
}

[devnomic]

Same issue