sensitive-blue•9mo ago

useCustom callback on success

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.

2 Replies

kapa.ai•9mo ago

Hi @thejorge4666. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The 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 will be deprecated. Here are some examples of how you can use it: 1. In the DeleteButton component, you can use 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);  
 }}  
 />  
 );  
};

Source (https://refine.dev/docs/api-reference/antd/components/buttons/delete-button/) 2. In the useForm hook, you can use 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);
    },
});

Source (https://discord.com/channels/837692625737613362/1112583949735174154) 3. In the useDrawerForm hook, you can use onSuccess in deleteButtonProps and 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();

Source (https://discord.com/channels/837692625737613362/1133462012647702618) Please note that the 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 :speech_balloon: ----------------------

kapa.ai•9mo ago

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