plain-purple•3y 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•3y 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•3y ago

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

plain-purpleOP•3y ago

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

kapa.ai•3y 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•3y ago

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

useForm with useCustomMutation example

Did you find this page helpful?