useDelete

useDelete is a modified version of react-query's useMutation for delete mutations.

It uses deleteOne method as mutation function from the dataProvider which is passed to <Refine>.

Features

• Shows notifications after the mutation succeeds, fails or gets canceled.

• Automatically invalidates list queries after mutation is succesfully run. Refer to React Query docs for detailed information →

• Supports mutation mode.

Usage

Let's say that we have a resource named categories.

https://api.fake-rest.refine.dev/categories

{
    [
        {
            id: 1,
            title: "E-business",
        },
        {
            id: 2,
            title: "Virtual Invoice Avon",
        },
    ];
}

import { useDelete } from "@pankod/refine-core";

const { mutate } = useDelete();

mutate({
    resource: "categories",
    id: 2,
});

tip

mutate can also accept lifecycle methods like onSuccess and onError.

mutate(
    {
        resource: "categories",
        id: 2,
    },
    {
        onError: (error, variables, context) => {
            // An error happened!
        },
        onSuccess: (data, variables, context) => {
            // Let's celebrate!
        },
    },
);

Refer to react-query docs for further information. →

After the mutation runs categories will be updated as below:

https://api.fake-rest.refine.dev/categories

{
    [
        {
            id: 1,
            title: "E-business",
        },
    ];
}

note

Queries that use /categories endpoint will be automatically invalidated to show the updated data. For example, data returned from useList will be automatically updated.

tip

useDelete returns react-query's useMutation result. This result includes a lot of properties, one of which being mutate.

caution

Variables passed to mutate must have these types.

{
    id: BaseKey;
    resource: string;
    values: TVariables = {};
    mutationMode?: MutationMode;
    undoableTimeout?: number;
    onCancel?: (cancelMutation: () => void) => void;
}

Mutation mode

Mutation mode determines the mode which the mutation runs with.

import { useDelete } from "@pankod/refine-core";

const { mutate } = useDelete();

mutate({
    resource: "categories",
    id: 2,
    mutationMode: "optimistic",
});

Refer to mutation mode docs for further information. →

Creating a custom method for cancelling mutations

You can pass a custom cancel callback to useUpdate. This callback is triggered instead of the default one when undo button is clicked when mutationMode = "undoable".

caution

Default behaviour on undo action includes notifications. If a custom callback is passed this notification will not appear.

danger

Passed callback will receive a function that actually cancels the mutation. Don't forget to run this function to cancel the mutation on the undoable mode.

import { useDelete } from "@pankod/refine-core";

const customOnCancel = (cancelMutation: () => void) => {
    cancelMutation();
    // rest of custom cancel logic...
};

const { mutate } = useDelete();

mutate({
    resource: "categories",
    id: 1,
    mutationMode: "undoable",
    undoableTimeout: 7500,
    onCancel: customOnCancel,
});

After 7.5 seconds the mutation will be executed. The mutation can be cancelled within that 7.5 seconds. If cancelled customOnCancel will be executed and the request will not be sent.

API

Properties

Property	Description	Type	Default
resource Required	Resource name for API data interactions	string
id Required	id for mutation function	BaseKey
mutationMode	Determines when mutations are executed	"pessimistic | "optimistic | "undoable"	"pessimistic"*
undoableTimeout	Duration to wait before executing the mutation when mutationMode = "undoable"	number	5000ms*
onCancel	Callback that runs when undo button is clicked on mutationMode = "undoable"	(cancelMutation: () => void) => void
successNotification	Successful Mutation notification	SuccessErrorNotification	"Successfully deleted a resource"
errorNotification	Unsuccessful Mutation notification	SuccessErrorNotification	"Error (status code: status"
metaData	Metadata query for dataProvider	MetaDataQuery	{}
dataProviderName	If there is more than one dataProvider, you should use the dataProviderName that you will use.	string	default
invalidates	You can use it to manage the invalidations that will occur at the end of the mutation.	all, resourceAll, list, many, detail, false	["list", "many"]

*: These props have default values in RefineContext and can also be set on <Refine> component. useDelete will use what is passed to <Refine> as default but a local value will override it.

Type Parameters

Property	Desription	Type	Default
TData	Result data of the mutation. Extends BaseRecord	BaseRecord	BaseRecord
TError	Custom error object that extends HttpError	HttpError	HttpError
TVariables	Values for mutation function	{}	{}

Return value

Description	Type
Result of the react-query's useMutation	UseMutationResult< { data: TData }, TError, { id: BaseKey; }, DeleteContext>