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

foolish-indigo · 2022-12-01T13:34:51.620Z

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.

S

skinny-azure•12/1/22, 2:02 PM

Hey @amirhhashemi You have to add

dirtyFields

dirtyFields

dirtyFields

dirtyFields under

formState

formState

formState

formState in useForm hook. You can then get the changed keys in the

handleSubmit

handleSubmit

form.

S

skinny-azure•12/1/22, 2:03 PM

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)}>

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)}>

F

foolish-indigoOP•12/1/22, 3:21 PM

Hey @yildirayunlu . Thank you for the help.