absent-sapphire•2d ago

useUpdate

In the refine documentation about useUpdate, it says there is an onSuccess inside mutationOptions, but I am unable to use this method. Is there a way to execute an action only if the mutate returns a success? I am using useUpdate as follows: const { mutate: updateIvr } = useUpdate(); const handleSaveButton = (e: React.MouseEvent<HTMLButtonElement>) => { const ivr = { ivr: record.id, ivr_tree: record.ivr_tree, }; updateIvr({ resource: "updateIvrDev", id: ivr.ivr, values: ivr, }); };

2 Replies

kapa.ai•2d ago

Hi @Silvio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you are trying to execute an action only if the mutate function from useUpdate returns a success. According to the refine documentation, you can indeed use the onSuccess method inside mutationOptions to handle actions after a successful mutation. However, there are some nuances to be aware of. From the knowledge sources, it appears that the onSuccess handler might be omitted in some cases, as seen in the GitHub issue #5888 (https://github.com/refinedev/refine/issues/5888). However, you can still achieve your goal by using the successNotification prop or by using mutateAsync. Here is how you can use the successNotification prop to execute an action after a successful mutation:

const { mutate } = useUpdate();

const handleSaveButton = (e: React.MouseEvent<HTMLButtonElement>) => {
    const ivr = {
        ivr: record.id,
        ivr_tree: record.ivr_tree,
    };

    mutate({
        resource: "updateIvrDev",
        id: ivr.ivr,
        values: ivr,
        successNotification: (data, values, resource) => {
            // Your custom action on success
            console.log("Mutation successful!", data);
            return {
                message: `${data.title} Successfully updated.`,
                description: "Success with no errors",
                type: "success",
            };
        },
    });
};

const { mutate } = useUpdate();

const handleSaveButton = (e: React.MouseEvent<HTMLButtonElement>) => {
    const ivr = {
        ivr: record.id,
        ivr_tree: record.ivr_tree,
    };

    mutate({
        resource: "updateIvrDev",
        id: ivr.ivr,
        values: ivr,
        successNotification: (data, values, resource) => {
            // Your custom action on success
            console.log("Mutation successful!", data);
            return {
                message: `${data.title} Successfully updated.`,
                description: "Success with no errors",
                type: "success",
            };
        },
    });
};

Alternatively, you can use mutateAsync to handle the success case:

const { mutateAsync } = useUpdate();

const handleSaveButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
    const ivr = {
        ivr: record.id,
        ivr_tree: record.ivr_tree,
    };
try {
        const data = await mutateAsync({
            resource: "updateIvrDev",
            id: ivr.ivr,
            values: ivr,
        });
        // Your custom action on success
        console.log("Mutation successful!", data);
    } catch (error) {
        // Handle error
        console.error("Mutation failed", error);
    }
};

const { mutateAsync } = useUpdate();

const handleSaveButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
    const ivr = {
        ivr: record.id,
        ivr_tree: record.ivr_tree,
    };
try {
        const data = await mutateAsync({
            resource: "updateIvrDev",
            id: ivr.ivr,
            values: ivr,
        });
        // Your custom action on success
        console.log("Mutation successful!", data);
    } catch (error) {
        // Handle error
        console.error("Mutation failed", error);
    }
};

These approaches should help you execute an action only if the mutate function returns a success. For more details, you can refer to the refine documentation on useUpdate (https://refine.dev/docs/data/hooks/use-update/#properties) and successNotification (https://refine.dev/docs/data/hooks/use-update/#successnotification). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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