unwilling-turquoise•2y ago

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

optimistic-gold•2y ago

Hey @hego555 Check out this doc https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api

FAQ | refine

How can I change the form data before submitting it to the API?

unwilling-turquoiseOP•2y 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

optimistic-gold•2y ago

Hey @hego555 A similar issue is descirbed here. I suggest a review this link. https://discord.com/channels/837692625737613362/1047868385767207003/1047875459326693486

unwilling-turquoiseOP•2y 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.

optimistic-gold•2y 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)();
        },
    }}
>

unwilling-turquoiseOP•2y 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•2y ago

Wow, you're right! Can you create an issue? @hego555 💯

unwilling-turquoiseOP•2y ago

Will do, also a similar issue with checkbox's have required set so it complains if the checkbox is not selected.

Omer•2y 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

unwilling-turquoiseOP•2y 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.

unwilling-turquoiseOP•2y 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 <FormControl mb="3" isInvalid={!!(errors as any)?.outstanding_amount}> <FormLabel>Outstanding Amou...

Only send edited data

Did you find this page helpful?