Edit page - change get and save resource URLs

[w20k]

Hei,

Thank you for an awesome project Dev Team!

I'm was just curious if anyone ever did it and how to (if possible).

I would like to re-use the default crud Edit page, but I've not figure out how to change GET resource url to a custom one, and to save form with a different URL, but the same set of data.

For example, user profile page (using strapi as a backend):

1. Get user profile data from URL: GET${apiUrl}/users/me
2. Edit/fill in data if needed
3. Save form with a different URL: PATCH${apiUrl}/users/me/profile

[omeraplak]

Hey @w20k ,
We had previously discussed offering this as a built-in feature with the core team and had decided it was unnecessary. This is asked from time to time by the community, so perhaps adding it to the FAQ section would be a much better idea. If you want to do this, your PR will be warmly welcomed.

Here is how you can do it:

1. Review this part found in Ant Design's useForm documentation, https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api. In this section, you can find how to change in the form data.
2. Inside this function, call the useCustomMutation hook.

    const { formProps, saveButtonProps, onFinish } = useForm({
         resource: "/users/me",
         id: "", // I am not sure this will work, please let me know if it does not
    });

   const { mutate } = useCustomMutation();
   
    const handleOnFinish = (values) => {
        mutate({
           url: `${API_URL}/users/me/profile`,
           method: "patch",
           values
         });
    };

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
                <Form.Item label="Name" name="name">
                    <Input />
                </Form.Item>
                <Form.Item label="Surname" name="surname">
                    <Input />
                </Form.Item>
            </Form>
        </Edit>
    );

I haven't had a chance to try the code but I believe it will work.

[w20k]

And action for edit | create forms:
"Action property not being set as edit. For detailed information: https://refine.dev/docs/api-reference/core/hooks/useForm/#action"

For example, if you have a page without id, like /users/me (strapi):

const { formProps, saveButtonProps, onFinish } = useForm({
    resource: 'users/me',
    action: 'edit',
    id: '',
  });

Or with id (for dynamic ids, use setId):

 const { formProps, saveButtonProps, onFinish } = useForm({
    resource: 'organizations',
    action: 'edit',
    id: 1
  });

[w20k]

Hey @omeraplak,

Thank you for your suggestion!

For some reason, haven't found the cause yet, but if I specify the URL in useForm, as in the example provided, there is no initial request to a custom resource - URL.

Maybe it's also good to mention that I have a different URL for the User Profile page, in my case it is '/profile' and to change organisation it is '/profile/organisation' (so, to pages with custom form requests).

I will double check with a clean example and will let you know how it went!

Once again, thank you for you help!!!

[omeraplak]

Hey @w20k ,
The 'useForm' was designed not to send a request when the 'id' is undefined in 'edit' mode. This restricts such use cases. @aliemir @BatuhanW , how can we come up with a solution for these types of cases?

[w20k]

Hey @omeraplak,
Doesn't seem to work even with id, for some reason. I will try with a clean project, might give me a hint - 'why' :)

[omeraplak]

It might be stemming from the action property not being set as edit. For detailed information: https://refine.dev/docs/api-reference/core/hooks/useForm/#action

[w20k]

Yeah, great success, thank you very much! :) It was 'action' property, that was not letting me to get a request properly ;)

Empty string - does work :) I guess, it's a hack, more likely)

[w20k]

Thanks a lot for your help, @omeraplak !