genetic-orange•2w ago

Custom delete mutation

Is there a way to specify what mutation is executed when clicking on the DeleteButton. I want to have custom delete logic on the backend.

2 Replies

kapa.ai•2w ago

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can specify custom delete logic when using the <DeleteButton /> in refine. The useDelete hook, which is used internally by the <DeleteButton />, allows you to customize the mutation logic. Here is an example of how you can use the useDelete hook to implement custom delete logic:

import { useDelete } from "@refinedev/core";
import { Button } from "@refinedev/antd"; // or "@refinedev/mui", "@refinedev/chakra-ui", "@refinedev/mantine" based on your UI framework

const CustomDeleteButton = ({ recordItemId }) => {
    const { mutate } = useDelete();

    const handleDelete = () => {
        mutate({
            resource: "your-resource-name",
            id: recordItemId,
            mutationMode: "undoable", // or "pessimistic", "optimistic"
            onSuccess: (response) => {
                // Custom success logic
                console.log("Delete successful", response);
            },
            onError: (error) => {
                // Custom error logic
                console.error("Delete failed", error);
            },
        });
    };

    return <Button onClick={handleDelete}>Delete</Button>;
};

export default CustomDeleteButton;

import { useDelete } from "@refinedev/core";
import { Button } from "@refinedev/antd"; // or "@refinedev/mui", "@refinedev/chakra-ui", "@refinedev/mantine" based on your UI framework

const CustomDeleteButton = ({ recordItemId }) => {
    const { mutate } = useDelete();

    const handleDelete = () => {
        mutate({
            resource: "your-resource-name",
            id: recordItemId,
            mutationMode: "undoable", // or "pessimistic", "optimistic"
            onSuccess: (response) => {
                // Custom success logic
                console.log("Delete successful", response);
            },
            onError: (error) => {
                // Custom error logic
                console.error("Delete failed", error);
            },
        });
    };

    return <Button onClick={handleDelete}>Delete</Button>;
};

export default CustomDeleteButton;

In this example, the mutate function from useDelete is called with custom parameters, including resource, id, mutationMode, onSuccess, and onError. This allows you to define custom logic for handling the delete operation. For more detailed information, you can refer to the useDelete documentation (https://refine.dev/docs/data/hooks/use-delete/#mutation-parameters-1) and the mutation mode documentation (https://refine.dev/docs/advanced-tutorials/mutation-mode/). If you want to use the <DeleteButton /> component directly but still need custom logic, you can override the onConfirm prop of the <Popconfirm /> component used internally by <DeleteButton />. However, this approach requires more in-depth customization and understanding of the internal implementation of the <DeleteButton />. For more information on how the <DeleteButton /> works internally, you can refer to the refine blog post (https://refine.dev/blog/refine-react-invoice-generator-4/#refine-ant-design-deletebutton-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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