foreign-sapphire•11mo ago

useForm with useCustomMutation example

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

5 Replies

kapa.ai•11mo ago

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. :wave: ---------------------- Sure, you can use the useForm hook in conjunction with the 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
};

In this example, the useMutation hook is used to create a custom mutation for the "users" resource. The useForm hook then uses this custom mutation instead of the default one. The endpoint option in the mutate function is used to specify the custom endpoint ("/submit") for the create action. Please note that you need to replace the resource, action, and endpoint values with your own. The resource should be the name of the resource you're working with, the action should be the action you want to perform (like "create", "update", etc.), and the endpoint should be the custom API URL you want to call. You can find more information about the 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 :speech_balloon: ----------------------

kapa.ai•11mo ago

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

foreign-sapphire•11mo ago

@kapa.ai The mutate option does not exists I'm using @refinedev/react-hook-form useForm

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. The useForm hook from @refinedev/react-hook-form does not have a mutate option. Instead, it provides createMutationOptions and updateMutationOptions properties that you can use to pass options to the useCreate and useUpdate hooks respectively. Here's an example of how you can use createMutationOptions:

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

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

In this example, retry: 3 is passed as an option to the useCreate hook when the form is in "create" or "clone" mode. Similarly, you can use updateMutationOptions to pass options to the 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 is only available when action: "create" or 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 :speech_balloon: ----------------------

kapa.ai•11mo ago

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