useCustom callback on success

developed-pink · 2023-11-10T08:27:17.821Z

How can I use onSuccess function when it will be deprecated. I would like to trigger a function when a successfull request has been done. I would love to do this without the need of an useEffect.

K

kapa.ai•11/10/23, 8:27 AM

Hi @thejorge4666. 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, 8:27 AM

----------------------
The

onSuccess

onSuccess

onSuccess

onSuccess function is a prop that can be used in various hooks and components in Refine to execute a function after a successful request. It is not mentioned in the extracts that

onSuccess

onSuccess

onSuccess

onSuccess will be deprecated. Here are some examples of how you can use it:

In the
```
DeleteButton
```
DeleteButton
```
DeleteButton
```
DeleteButton
component, you can use
```
onSuccess
```
onSuccess
```
onSuccess
```
onSuccess
to execute a function after a successful delete request. Here's an example:

import { DeleteButton } from "@refinedev/antd";  
  
const MyDeleteComponent = () => {  
 return (  
 <DeleteButton  
 resourceNameOrRouteName="posts"  
 recordItemId="1"  
 onSuccess={(value) => {  
 console.log(value);  
 }}  
 />  
 );  
};

import { DeleteButton } from "@refinedev/antd";  
  
const MyDeleteComponent = () => {  
 return (  
 <DeleteButton  
 resourceNameOrRouteName="posts"  
 recordItemId="1"  
 onSuccess={(value) => {  
 console.log(value);  
 }}  
 />  
 );  
};

import { DeleteButton } from "@refinedev/antd";  
  
const MyDeleteComponent = () => {  
 return (  
 <DeleteButton  
 resourceNameOrRouteName="posts"  
 recordItemId="1"  
 onSuccess={(value) => {  
 console.log(value);  
 }}  
 />  
 );  
};

import { DeleteButton } from "@refinedev/antd";  
  
const MyDeleteComponent = () => {  
 return (  
 <DeleteButton  
 resourceNameOrRouteName="posts"  
 recordItemId="1"  
 onSuccess={(value) => {  
 console.log(value);  
 }}  
 />  
 );  
};

Source (https://refine.dev/docs/api-reference/antd/components/buttons/delete-button/)

In the
```
useForm
```
useForm
```
useForm
```
useForm
hook, you can use
```
onSuccess
```
onSuccess
```
onSuccess
```
onSuccess
to execute a function after a successful form submission. Here's an example:

const { onFinish, mutationResult } = useForm({
    onFinish: async (values) => {
        // Your custom logic before submitting the form
        const data = {
            ...values,
            products: tableData,
            finalPrice: finalPrice,
        };

        await onFinish(data);
    },
    onSuccess: (response) => {
        console.log("Success response:", response);
    },
    onError: (error) => {
        console.log("Error response:", error);
    },
});

const { onFinish, mutationResult } = useForm({
    onFinish: async (values) => {
        // Your custom logic before submitting the form
        const data = {
            ...values,
            products: tableData,
            finalPrice: finalPrice,
        };

        await onFinish(data);
    },
    onSuccess: (response) => {
        console.log("Success response:", response);
    },
    onError: (error) => {
        console.log("Error response:", error);
    },
});

const { onFinish, mutationResult } = useForm({
    onFinish: async (values) => {
        // Your custom logic before submitting the form
        const data = {
            ...values,
            products: tableData,
            finalPrice: finalPrice,
        };

        await onFinish(data);
    },
    onSuccess: (response) => {
        console.log("Success response:", response);
    },
    onError: (error) => {
        console.log("Error response:", error);
    },
});

const { onFinish, mutationResult } = useForm({
    onFinish: async (values) => {
        // Your custom logic before submitting the form
        const data = {
            ...values,
            products: tableData,
            finalPrice: finalPrice,
        };

        await onFinish(data);
    },
    onSuccess: (response) => {
        console.log("Success response:", response);
    },
    onError: (error) => {
        console.log("Error response:", error);
    },
});

Source (ask-any-questionuseForm onFinish response)

In the
```
useDrawerForm
```
useDrawerForm
```
useDrawerForm
```
useDrawerForm
hook, you can use
```
onSuccess
```
onSuccess
```
onSuccess
```
onSuccess
in
```
deleteButtonProps
```
deleteButtonProps
```
deleteButtonProps
```
deleteButtonProps
and
```
saveButtonProps
```
saveButtonProps
```
saveButtonProps
```
saveButtonProps
to execute a function after a successful delete or save operation. Here's an example:

const { deleteButtonProps } = useDrawerForm({  
 action: "delete",  
});  

deleteButtonProps.onSuccess();

const { deleteButtonProps } = useDrawerForm({  
 action: "delete",  
});  

deleteButtonProps.onSuccess();

const { deleteButtonProps } = useDrawerForm({  
 action: "delete",  
});  

deleteButtonProps.onSuccess();

const { deleteButtonProps } = useDrawerForm({  
 action: "delete",  
});  

deleteButtonProps.onSuccess();

Source (ask-any-questionCalling Refetch() when Edit Call is Complete?)

K

kapa.ai•11/10/23, 8:27 AM

Please note that the

onSuccess

onSuccess

onSuccess

onSuccess function is not deprecated according to the information provided in the extracts. If you have heard otherwise, I recommend checking the official Refine documentation or contacting their support for the most accurate information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

K

kapa.ai•11/10/23, 8:27 AM

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