iway1 / react-ts-form

https://react-ts-form.com
MIT License
2.01k stars 33 forks source link

actually parse with zod schema so we can get the .strip() behavior #106

Closed scamden closed 1 year ago

scamden commented 1 year ago

Looks like the zodResolver just validates the form but doesn't pass the result of a zod parse on the data to onSubmit. Would be nice to actually parse before submitting to strip out extra fields that may have come along with say a GQL query that aren't updateble: ala https://github.com/colinhacks/zod#strip

iway1 commented 1 year ago

Hmm I think zodResolver does pass the results of parse? I just tried it in code sandbox, seems to remove extra fields (https://codesandbox.io/s/react-ts-form-example-6gkuyx?file=/src/App.tsx)

Slightly related to this - There is an issue with the lib internally at the moment where it's actually running the validation twice, once via the zodResolver and then again after removing undefined values (see the submit function in createSchemaForm).

I added this as part of a workaround to allow setting values to "undefined" but it does make it seemingly impossible to support schemas who's parsed type is not the same as it's input type (because validation will fail). So this is making it so .transform() etc don't work.

I'm curious how often do you use react-hook-forms APIs directly with this library @scamden?

I'm starting to think it might be better long term to maybe remove the dependency on react-hook-form because it seems to be causing issues over time. For example idk how to even begin to fix this since it's happening because of this library and react-hook-form not playing nicely: https://github.com/iway1/react-ts-form/issues/92

Any thoughts on maybe starting to move off of react-hook-form? could also reduce the bundle size quite a bit

scamden commented 1 year ago

Oh that's odd. I specifically had to add a parse in my submit handler to remove extra fields.. I wonder what I'm missing.

I actually do use the react hook form stuff a fair bit. We use the useWatch and the submitting state. I'll double check what else but those things should be pretty easy to replace I would think. It does seem like hook form is pretty nice apart from the undefined thing tho. Idk wdyt?

scamden commented 1 year ago

Oh sorry lol, just reread and saw the bug you referenced. Maybe there are some other downsides. I did notice that things in general don't always rerender in field value changes without use a useWatch but not sure if that related

iway1 commented 1 year ago

@scamden yeah I totally agree having all the RHF apis are really nice but also IDK if we can fix some of those bugs without doing more hacky stuff as long as we're using it.

I did notice that things in general don't always rerender in field value changes without use a useWatch but not sure if that related

You mean components aren't rerendering on value change sometimes without a useWatch?

scamden commented 1 year ago

You mean components aren't rerendering on value change sometimes without a useWatch?

that's right, the CustomChildComponent specifically. like if i just read values instead of useWatch it doesn't work