Refine•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>
  );
}

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

PUT

request instead of

PATCH

PATCH

PATCH

PATCH?

kapa.ai•2/19/24, 1:02 PM

Hi @Chrystian Ferreira. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•2/19/24, 1:02 PM

----------------------
To change the HTTP request method of

useForm

useForm

when clicking the save button, you can use the useCustomMutationuseCustomMutation 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, handleOnFinishhandleOnFinish is a function that calls mutatemutate from useCustomMutationuseCustomMutation with the desired URL and method. This function is then passed to the onFinishonFinish prop of StoreFormStoreForm.

Please note that you need to replace "/your-endpoint""/your-endpoint" with the actual endpoint you want to send the

PUT

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

----------------------

kapa.ai•2/19/24, 1:02 PM

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

managerial-maroonOP•2/19/24, 1:04 PM

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

kapa.ai•2/19/24, 1:04 PM

Let me check the knowledge base for you. One moment!

kapa.ai•2/19/24, 1:05 PM

----------------------
Based on the information provided in the extracts, the

useForm

useForm

hook in Refine does not directly support changing the HTTP method. The default HTTP method for updates is

PATCH

PATCH

.

However, you can customize the HTTP method used for each data provider method by passing a

method

method

property in the

meta

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

useUpdate

hook is used to update a post, and the HTTP method is set to

PUT

PUT

by passing { method: "put" }{ method: "put" } to the

meta

meta

parameter.

However, this approach is not directly applicable to the

useForm

useForm

hook. The

useForm

useForm

hook does not accept a

meta

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

useForm

hook, you would need to use another hook such as useCustomMutationuseCustomMutation, 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

----------------------

kapa.ai•2/19/24, 1:05 PM

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

managerial-maroonOP•2/19/24, 2:14 PM

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

put

put

by default.