useForm with useCustomMutation example

worthy-rose · 2023-11-10T19:42:43.677Z

I need an example of a refine's react-hook-form useForm that on form submit it will call a useCustomMutation to a custom API URL. I'm using refine's strapi data provider

K

kapa.ai•11/10/23, 7:42 PM

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

K

kapa.ai•11/10/23, 7:43 PM

----------------------
Sure, you can use the

useForm

useForm

hook in conjunction with the

useMutation

useMutation

hook to achieve this. Here's an example based on the information provided in the extracts:

import { useForm, useMutation } from "@refinedev/antd";  

const UserCreate: React.FC = () => {  
 const { mutate } = useMutation({  
 resource: "users",  
 action: "create",  
 });  

 const { formProps, saveButtonProps } = useForm({  
 mutation: (values) => mutate({  
 endpoint: "/submit",  
 data: values,  
 }),  
 });  

 // Rest of your component
};

import { useForm, useMutation } from "@refinedev/antd";  

const UserCreate: React.FC = () => {  
 const { mutate } = useMutation({  
 resource: "users",  
 action: "create",  
 });  

 const { formProps, saveButtonProps } = useForm({  
 mutation: (values) => mutate({  
 endpoint: "/submit",  
 data: values,  
 }),  
 });  

 // Rest of your component
};

import { useForm, useMutation } from "@refinedev/antd";  

const UserCreate: React.FC = () => {  
 const { mutate } = useMutation({  
 resource: "users",  
 action: "create",  
 });  

 const { formProps, saveButtonProps } = useForm({  
 mutation: (values) => mutate({  
 endpoint: "/submit",  
 data: values,  
 }),  
 });  

 // Rest of your component
};

import { useForm, useMutation } from "@refinedev/antd";  

const UserCreate: React.FC = () => {  
 const { mutate } = useMutation({  
 resource: "users",  
 action: "create",  
 });  

 const { formProps, saveButtonProps } = useForm({  
 mutation: (values) => mutate({  
 endpoint: "/submit",  
 data: values,  
 }),  
 });  

 // Rest of your component
};

In this example, the

useMutation

useMutation

hook is used to create a custom mutation for the "users" resource. The

useForm

useForm

hook then uses this custom mutation instead of the default one. The

endpoint

endpoint

option in the

mutate

mutate

function is used to specify the custom endpoint ("/submit") for the create action.

Please note that you need to replace the

resource

resource

resource

resource,

action

action

, and

endpoint

endpoint

values with your own. The

resource

resource

resource

resource should be the name of the resource you're working with, the

action

action

should be the action you want to perform (like "create", "update", etc.), and the

endpoint

endpoint

should be the custom API URL you want to call.

You can find more information about the

useForm

useForm

hook in the refine documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

K

kapa.ai•11/10/23, 7:43 PM

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

W

worthy-roseOP•11/10/23, 7:45 PM

@kapa.ai The

mutate

mutate

option does not exists
I'm using

@refinedev/react-hook-form

@refinedev/react-hook-form

@refinedev/react-hook-form

@refinedev/react-hook-form useForm

K

kapa.ai•11/10/23, 7:45 PM

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

K

kapa.ai•11/10/23, 7:45 PM

----------------------
I apologize for the confusion. The

useForm

useForm

hook from

@refinedev/react-hook-form

@refinedev/react-hook-form

@refinedev/react-hook-form

@refinedev/react-hook-form does not have a

mutate

mutate

option. Instead, it provides

createMutationOptions

createMutationOptions

createMutationOptions

createMutationOptions and

updateMutationOptions

updateMutationOptions

updateMutationOptions

updateMutationOptions properties that you can use to pass options to the

useCreate

useCreate

and

useUpdate

useUpdate

hooks respectively.

Here's an example of how you can use

createMutationOptions

createMutationOptions

createMutationOptions

createMutationOptions:

useForm({  
 refineCoreProps: {  
 queryOptions: {  
 retry: 3,  
 },  
 },  
});

useForm({  
 refineCoreProps: {  
 queryOptions: {  
 retry: 3,  
 },  
 },  
});

useForm({  
 refineCoreProps: {  
 queryOptions: {  
 retry: 3,  
 },  
 },  
});

useForm({  
 refineCoreProps: {  
 queryOptions: {  
 retry: 3,  
 },  
 },  
});

In this example,

retry: 3

retry: 3

retry: 3

retry: 3 is passed as an option to the

useCreate

useCreate

hook when the form is in "create" or "clone" mode. Similarly, you can use

updateMutationOptions

updateMutationOptions

updateMutationOptions

updateMutationOptions to pass options to the

useUpdate

useUpdate

hook when the form is in "edit" mode.

Please note that these options are only available when the form is in the corresponding mode. For example,

createMutationOptions

createMutationOptions

createMutationOptions

createMutationOptions is only available when

action: "create"

action: "create"

action: "create"

action: "create" or

action: "clone"

action: "clone"

.

You can find more information about these properties in the refine documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

K

kapa.ai•11/10/23, 7:45 PM

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