Only send edited data

Hello, I'm new to refine and was just testing it out by connecting it to my FeathersJS server. The issue I was running against is that refine sends the entire resource in the PATCH request. So lets say I have a company that I want to just change the name of. When I press send, refine sends everything including fields I didn't change. This causes Feathers to throw an error that I am requesting to change fields I am not allowed to change. Any solutions?
11 Replies
harsh-harlequin
harsh-harlequin16mo ago
FAQ | refine
How can I change the form data before submitting it to the API?
conscious-sapphire
conscious-sapphire16mo ago
I will give this a shot, I am on Chakra UI if it matters. Im thinking I do a compare against the original values and see how that goes. Thanks! Im actually unsure how to do this in Chakra
harsh-harlequin
harsh-harlequin16mo ago
Hey @hego555 A similar issue is descirbed here. I suggest a review this link. https://discord.com/channels/837692625737613362/1047868385767207003/1047875459326693486
conscious-sapphire
conscious-sapphire16mo ago
The only thing confusing me is the auto generated chkra code doesn't have a <form> it has just <Edit> wrapping the whole thing.
harsh-harlequin
harsh-harlequin16mo ago
Yes <form> does not exist. Edit component does submit operation. Then you can follow a path;
const {
refineCore: { formLoading, queryResult, onFinish },
register,
resetField,
handleSubmit,
formState: { errors },
} = useForm();

// ....

const handleSubmitPostEdit = (values: any) => {
onFinish(values);
};

// ...

<Edit
isLoading={formLoading}
saveButtonProps={{
onClick: () => {
handleSubmit(handleSubmitPostEdit)();
},
}}
>
const {
refineCore: { formLoading, queryResult, onFinish },
register,
resetField,
handleSubmit,
formState: { errors },
} = useForm();

// ....

const handleSubmitPostEdit = (values: any) => {
onFinish(values);
};

// ...

<Edit
isLoading={formLoading}
saveButtonProps={{
onClick: () => {
handleSubmit(handleSubmitPostEdit)();
},
}}
>
conscious-sapphire
conscious-sapphire16mo ago
Will try that. Appreciate the patience Ok seems to make sense so far, dirtyFields seems to have all the properties that were edited. But they could still technically have the same value and it would consider them dirty. Will have to familiarize myself with how react hook form works. But much appreciated! One funny thing I just noticed, the code inferrer makes a block like this for a number input
<FormControl mb="3" isInvalid={!!(errors as any)?.outstanding_amount}>
<FormLabel>Outstanding Amount</FormLabel>
<Input
type="number"
{...register("outstanding_amount", {
required: "This field is required"
})}
/>
<FormErrorMessage>
{(errors as any)?.outstanding_amount?.message as string}
</FormErrorMessage>
</FormControl>
<FormControl mb="3" isInvalid={!!(errors as any)?.outstanding_amount}>
<FormLabel>Outstanding Amount</FormLabel>
<Input
type="number"
{...register("outstanding_amount", {
required: "This field is required"
})}
/>
<FormErrorMessage>
{(errors as any)?.outstanding_amount?.message as string}
</FormErrorMessage>
</FormControl>
When you edit the value it returns a string type. You have to add valueAsNumber: true to the register function options for this all to work correctly. Not sure if this is indented
Omer
Omer16mo ago
Wow, you're right! Can you create an issue? @hego555 💯
conscious-sapphire
conscious-sapphire16mo ago
Will do, also a similar issue with checkbox's have required set so it complains if the checkbox is not selected.
Omer
Omer16mo ago
I'm not sure if this behavior is incorrect. We are giving the values as 'initialValue' for editing, this might make them 'dirty' immediately. Do you think there's an error in our code here: https://github.com/refinedev/refine/blob/next/packages/react-hook-form/src/useForm/index.ts#L94?
GitHub
refine/index.ts at next · refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/index.ts at next · refinedev/refine
conscious-sapphire
conscious-sapphire16mo ago
I would have to debug a bit to find the issue, but out of personal experience. Validating required against a checkbox never goes well. The generator maybe shouldnt be adding it in there.
conscious-sapphire
conscious-sapphire16mo ago
https://github.com/refinedev/refine/issues/3550 The issue as requested. Thanks again for the help, I got what I wanted working like this in case anyone stumbles upon this
const handleSubmitPostEdit = (values: any) => {
const modifiedValues = Object.keys(dirtyFields).reduce((acc, field) => {
acc[field] = values[field];
return acc;
}, {} as Record<string, any>);
if (Object.keys(modifiedValues).length > 0) onFinish(modifiedValues);
};
return (
<Edit
isLoading={formLoading}
saveButtonProps={{
...saveButtonProps,
onClick: () => {
handleSubmit(handleSubmitPostEdit)();
},
}}
>
...
const handleSubmitPostEdit = (values: any) => {
const modifiedValues = Object.keys(dirtyFields).reduce((acc, field) => {
acc[field] = values[field];
return acc;
}, {} as Record<string, any>);
if (Object.keys(modifiedValues).length > 0) onFinish(modifiedValues);
};
return (
<Edit
isLoading={formLoading}
saveButtonProps={{
...saveButtonProps,
onClick: () => {
handleSubmit(handleSubmitPostEdit)();
},
}}
>
...
GitHub
[BUG] ChakraUIEditInferencer treats number fields as strings when e...
Describe the bug An example of the generated code is &lt;FormControl mb=&quot;3&quot; isInvalid={!!(errors as any)?.outstanding_amount}&gt; &lt;FormLabel&gt;Outstanding Amou...