use zod to verify form data types

[SteveSuv]

I used qwikjs for a while before, which use vite as same as remix. it has some features provided good DX. Would remix consider adding some of those features?

for example, it use zod to verify form data types, it has two advantages:

• First, it can automatically verify parameter types, avoiding a lot of judgment logic.
• Second, the incoming parameter data has automatic type hints, and there is no need to manually declare the type.

import {
  routeAction$,
  zod$,
  z,
} from "@builder.io/qwik-city";

export const useFeedbackAction = routeAction$(
  async (data, ev) => {
   // the data param has type hints
    await db.feedback.create({ data });
    await sendFeedback(data);
    return { success: true };
  },
  // no so many if else, just verify data automatically
  zod$({
    title: z.string().min(10).max(30),
    email: z.string().email(),
    content: z.string().max(40),
  }),
);

If remix considering add this feature, maybe can write like this:

export const action = async (args) => {
  const formData = await args.request.formData();
 // the verify function will verify data types automatically and return data with type hints
  const data = verify(Object.fromEntries(formData), {
    title: z.string().min(10).max(30),
    email: z.string().email(),
    content: z.string().max(40),
  });
  await db.feedback.create({ data });
  await sendFeedback(data);
  return { success: true };
};

The closest proposal with this feature I've seen is this: #5383
At that time, it was not promoted because of the compiler, but now that the compiler has been changed to vite, this proposal may be realized. like this:

import { createLoader, createAction, verify, z } from "@remix-run/react";

export const useProjectLoader = createLoader(
  async (args) => {
    return db.getProject(args.params.projectId);
  },
  verify({
    projectId: z.string(),
  }),
);

export const useAddProjectAction = createAction(
  async (args) => {
    const formData = await args.request.formData();
    const data = Object.fromEntries(formData);
    return db.addProject(data);
  },
  verify({
    title: z.string().min(10).max(30),
    content: z.string().max(40),
  }),
);

export default () => {
  const project = useProjectLoader();
  const addProjectAction = useAddProjectAction();

  return (
    <>
      <button
        onClick={() => {
          addProjectAction.submit({
            title: "title",
            content: "content",
          });
        }}
      >
        add
      </button>

      {/* or use Form */}

      {/* 
      <Form action={addProjectAction}>
        <input name="title" required/>
        <input name="content" required/>
        <button type="submit">add</button>
      </Form> 
      */}

      <div>{project.name}</div>
    </>
  );
};

[jrestall]

Related to this, I'm hoping this proposal is considered so that we can have automatic validation and prop binding just by defining a zod schema on the route, without requiring api changes.

With this, your code would be simplified to:

export const schema = z.object({
    title: z.string().min(10).max(30),
    email: z.string().email(),
    content: z.string().max(40),
});

export const action = async ({ data }: DataFunctionArgs<typeof schema>) => {
  await db.feedback.create({ data });
  await sendFeedback(data);
  return { success: true };
};

[sergiodxa]

I doubt the team want to enforce Zod as The Way to validate request bodies instead of allowing teams to use any tool for that.

Also doing Object.fromEntries(formData) may work most of the time but not all the times since FormData could have keys being arrays and keys being files, this is what I do to validate FormData with Zod

export const FormDataEntryValueSchema = z
  .union([z.string(), z.instanceof(File)])
  .nullable();

export function formData() {
  return z.instanceof(FormData).transform((formData) => {
    let entries: Array<[string, FormDataEntryValue | FormDataEntryValue[]]> =
      [];

    for (let key of formData.keys()) {
      let value = formData.getAll(key);
      if (isEmpty(value)) continue;
      if (value.length === 1) entries.push([key, value[0]]);
      else entries.push([key, value]);
    }

    return z
      .array(
        z.tuple([
          z.string(),
          FormDataEntryValueSchema.or(FormDataEntryValueSchema.array()),
        ])
      )
      .transform((entries) => Object.fromEntries(entries))
      .parse(entries);
  });
}

Then I do this:

let body = formData().pipe(schema).parse(await request.formData())