drizzle-team / drizzle-orm

Headless TypeScript ORM with a head. Runs on Node, Bun and Deno. Lives on the Edge and yes, it's a JavaScript ORM too 😅
https://orm.drizzle.team
Apache License 2.0
24.55k stars 643 forks source link

[BUG]: React Hook Form doesn't submit when using drizzle-zod to create schemes to use in zodResolver #1448

Closed jacobsamo closed 1 year ago

jacobsamo commented 1 year ago

What version of drizzle-orm are you using?

0.28.6

What version of drizzle-kit are you using?

0.19.13

Describe the Bug

When using drizzle-zod to generate schemas from database schemas and using them in the useForm resolvers the onSubmit won't fire at all for some reason,

So for example:

export const userSchema = createInsertSchema(users);

and then using it in the useForm

const { handleSubmit, register, control, getValues } = useForm<User>({
    resolver: zodResolver(userSchema),
    defaultValues: async () => {
      const res = await fetch(`/api/users/`)
      const user = (await res.json()) as User;
      return user;
    },
  });

  const onSubmit: SubmitHandler<User> = async (data) => {
    console.log(data)

    await fetch('/api/users/updateUser', {
      method: "PUT",
      body: body: JSON.stringify(data),
    })
  };

in this example when you click the Submit from the form it doesn't work at all.

however if you build your own schema using zod it works fine.

For reference this was working about a about a week ago.

No errors show in the browser console or terminal, so i don't know what is up there

I have posted an duplicate issue with the react-hook-form team however I'm not sure which team is that the problem is coming from like to issue: https://github.com/react-hook-form/resolvers/issues/642

To Reproduce Steps to reproduce the behavior:

  1. create a schema using zod
  2. create a zod schema using drizzle-zod and createInsertSchema
  3. import that schema into a useForm resolver
  4. try submitting the form (should not work)

    Codesandbox link very simple application that doesn't seem to submit: https://codesandbox.io/p/sandbox/react-hook-form-zod-resolver-not-working-9c7qn9

Expected behavior

When submitting the form the onSubmit handler is called and all code withing this function runswithin

Environment & setup

Operating systems that is is occuring in:

Browsers:

Versions of packages:

steveninety commented 4 months ago

Please share how you've solved it? I am running into the same issue.

steveninety commented 4 months ago

Please share how you've solved it? I am running into the same issue.

Amateur! You obviously need to pass both the onvalid and oninvalid arguments to useForm().handleSubmit(onvalid, oninvalid). Not providing all required fields from a schema is an invalid submission, hence your onvalid callback won't run...