conscious-sapphire•2y ago

Change HTTP request method of useForm

Here's a snippet of my code:

export default function StoreEdit() {
  const { formProps, formLoading, saveButtonProps, onFinish } = useForm();

  return (
    <Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <StoreForm
        formProps={formProps}
        formLoading={formLoading}
        onFinish={onFinish}
      />
    </Edit>
  );
}

export default function StoreEdit() {
  const { formProps, formLoading, saveButtonProps, onFinish } = useForm();

  return (
    <Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <StoreForm
        formProps={formProps}
        formLoading={formLoading}
        onFinish={onFinish}
      />
    </Edit>
  );
}

How do I make it so that clicking the save button on this form makes a PUT request instead of PATCH?

6 Replies

kapa.ai•2y ago

Hi @Chrystian Ferreira. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the HTTP request method of useForm when clicking the save button, you can use the useCustomMutation hook. This hook allows you to customize the request, including the URL and method. Here's an example of how you can do it:

import { useCustomMutation, useForm } from "@pankod/refine";

export default function StoreEdit() {
  const { formProps, formLoading, saveButtonProps, onFinish } = useForm();
  const { mutate } = useCustomMutation();

  const handleOnFinish = (values) => {
    mutate({
      url: "/your-endpoint",
      method: "put",
      values
    });
  };

  return (
    <Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <StoreForm
        formProps={formProps}
        formLoading={formLoading}
        onFinish={handleOnFinish}
      />
    </Edit>
  );
}

import { useCustomMutation, useForm } from "@pankod/refine";

export default function StoreEdit() {
  const { formProps, formLoading, saveButtonProps, onFinish } = useForm();
  const { mutate } = useCustomMutation();

  const handleOnFinish = (values) => {
    mutate({
      url: "/your-endpoint",
      method: "put",
      values
    });
  };

  return (
    <Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <StoreForm
        formProps={formProps}
        formLoading={formLoading}
        onFinish={handleOnFinish}
      />
    </Edit>
  );
}

In this example, handleOnFinish is a function that calls mutate from useCustomMutation with the desired URL and method. This function is then passed to the onFinish prop of StoreForm. Please note that you need to replace "/your-endpoint" with the actual endpoint you want to send the PUT request to. For more information, you can refer to the 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) and the useCustomMutation documentation (https://refine.dev/docs/api-reference/hooks/mutation/useCustomMutation). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphireOP•2y ago

@kapa.ai Do I need to use another hook such as useCustomMutation or are there any other ways to do this without using just useForm?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the extracts, the useForm hook in Refine does not directly support changing the HTTP method. The default HTTP method for updates is PATCH. However, you can customize the HTTP method used for each data provider method by passing a method property in the meta parameter when calling a hook. Here's an example:

import { useUpdate } from "@refinedev/core";  
  
const { mutate } = useUpdate();  
  
mutate({  
 resource: "posts",  
 id: 1,  
 values: {  
 title: "New title",  
 },  
 meta: {  
 method: "put",  
 },  
});

import { useUpdate } from "@refinedev/core";  
  
const { mutate } = useUpdate();  
  
mutate({  
 resource: "posts",  
 id: 1,  
 values: {  
 title: "New title",  
 },  
 meta: {  
 method: "put",  
 },  
});

In this example, the useUpdate hook is used to update a post, and the HTTP method is set to PUT by passing { method: "put" } to the meta parameter. However, this approach is not directly applicable to the useForm hook. The useForm hook does not accept a meta parameter, and there is no direct way to change the HTTP method. Therefore, if you want to change the HTTP method when using the useForm hook, you would need to use another hook such as useCustomMutation, as shown in the previous example. For more information, you can refer to the Simple REST documentation (https://refine.dev/docs/data/packages/simple-rest#default-http-methods-and-customizing-them) and the useCustomMutation documentation (https://refine.dev/docs/data/hooks/use-custom-mutation#method-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphireOP•2y ago

I made this work by changing my data provider's update method to use put by default.

Change HTTP request method of useForm

Did you find this page helpful?