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
K
kapa.ai165d 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: ----------------------
K
kapa.ai165d ago
<@1092168769641660437> kapa.ai is still learning and improving, please let us know how it did by reacting below
S
spiritual-aqua165d ago
@kapa.ai The mutate option does not exists I'm using @refinedev/react-hook-form useForm
K
kapa.ai165d 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: ----------------------
K
kapa.ai165d ago
<@1092168769641660437> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
How can i POST to a custom endpoint with refine core's useForm hook?I need to configure a creation form to send a POST request to a custom endpoint. I'm using refine's useForm `mutationError` property instead of `onMutationError` function?In the `useForm` hook, there is an `onMutationError` prop. There is also an `errorNotification` proDate picker in mantine UIHi, I see that refine is using an older version of mantine so the DatePicker does not exist. Is theruseCustom callback on successHow can I use onSuccess function when it will be deprecated. I would like to trigger a function whenuseAutocomplete hook with refineiam using autocomple and useAutocomplete hook,and iam passing a filter to the useautocomplete hookclear filter when f5 reload page?`getList: async ({ resource, pagination, filters, sorters, meta }) => {}` The filter still saves itsHey, do anyone knows how to customizeHey, do anyone knows how to customize graphql mutations that refine sends to backend?How to customize a form graphql mutation?Hi, my app has a graphql backend so i'm using refine's graphql data provider In the backend, my graHow to render a Creation Form with a graphql data providerI'm trying to render an inferenced creation form for the resource `users` but i get an error (i'm usRedirect On ClickHi! I have a delete button for which I want to implement the onSuccess for. How could I redirect tInvalidate getOneHow can I invalidate a getOne query?How to add Zod validation to Create ressource pageHi everyone! I'm using Refine with Next.js, MUI and a custom express API as a dataprovider. and I nHow to Update two or more fields in strap using logical operations in refineHi everyone, I´m new here, I want to update Hi everyone, I´m new here developing web apps and in jaHow to pass a parameter in useCustomMutation hook?I want to pass certain parameter in url endpoint while performing a custom mutation. For example: Generic model the refine wayHello ! I have a generic model document, but it could be an order, a delivery note, and other typesFor local testing with Auth0, what should the callback url be?I wasn't able to find it in the docs, but have tried the following redirect url's (on the Auth0 proj