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
useForm hook in conjunction with the useMutation hook to achieve this. Here's an example based on the information provided in the extracts: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.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.useForm hook in the refine documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/).mutate option does not exists@refinedev/react-hook-form useFormuseForm 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. createMutationOptions: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.createMutationOptions is only available when action: "create" or action: "clone".resourceresource@refinedev/react-hook-form@refinedev/react-hook-formcreateMutationOptionscreateMutationOptionscreateMutationOptionsupdateMutationOptionsupdateMutationOptionsretry: 3action: "create"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
}; useForm({
refineCoreProps: {
queryOptions: {
retry: 3,
},
},
});