ratty-blush
ratty-blush3y ago

How to transform form data before passing it to data provider?

I have an edit page that should only send changed fields to the server instead of the whole form data. Therefore I need a way to transform the form data before passing it to data provider. What's the best way to do that? I'm using React.js with react-hook-form integration.
2 Replies
deep-jade
deep-jade3y ago
Hey @amirhhashemi You have to add dirtyFields under formState in useForm hook. You can then get the changed keys in the handleSubmit form.
const {
refineCore: { onFinish, formLoading, queryResult },
register,
handleSubmit,
resetField,
formState: { errors, dirtyFields },
} = useForm();

---

const handleSubmitPostCreate = (values: any) => {
console.log(values);
console.log(dirtyFields, isDirty);

onFinish({
...values
});
};


----

<form onSubmit={handleSubmit(handleSubmitPostCreate)}>
const {
refineCore: { onFinish, formLoading, queryResult },
register,
handleSubmit,
resetField,
formState: { errors, dirtyFields },
} = useForm();

---

const handleSubmitPostCreate = (values: any) => {
console.log(values);
console.log(dirtyFields, isDirty);

onFinish({
...values
});
};


----

<form onSubmit={handleSubmit(handleSubmitPostCreate)}>
ratty-blush
ratty-blushOP3y ago
Hey @yildirayunlu . Thank you for the help.