Custom delete mutation

select-harlequin · 2024-08-29T11:53:59.512Z

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.

K

kapa.ai•8/29/24, 11:54 AM

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•8/29/24, 11:54 AM

----------------------
Yes, you can specify custom delete logic when using the

<DeleteButton />

<DeleteButton />

<DeleteButton />

<DeleteButton /> in refine. The

useDelete

useDelete

useDelete

useDelete hook, which is used internally by the

<DeleteButton />

<DeleteButton />

<DeleteButton />

<DeleteButton />, allows you to customize the mutation logic.

Here is an example of how you can use the

useDelete

useDelete

useDelete

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;

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

mutate

function from

useDelete

useDelete

useDelete

useDelete is called with custom parameters, including

resource

resource

resource

resource,

id

id

,

mutationMode

mutationMode

mutationMode

mutationMode,

onSuccess

onSuccess

, and

onError

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/).

K

kapa.ai•8/29/24, 11:54 AM

If you want to use the

<DeleteButton />

<DeleteButton />

<DeleteButton />

<DeleteButton /> component directly but still need custom logic, you can override the

onConfirm

onConfirm

onConfirm

onConfirm prop of the

<Popconfirm />

<Popconfirm />

<Popconfirm />

<Popconfirm /> component used internally by

<DeleteButton />

<DeleteButton />

<DeleteButton />

<DeleteButton />. However, this approach requires more in-depth customization and understanding of the internal implementation of the

<DeleteButton />

<DeleteButton />

<DeleteButton />

<DeleteButton />.

For more information on how the

<DeleteButton />

<DeleteButton />

<DeleteButton />

<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

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

K

kapa.ai•8/29/24, 11:54 AM

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