useDeleteMany
useDeleteMany
is a modified version of react-query
's useMutation
for multiple delete mutations.
It uses deleteMany
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
.
{
[
{
id: 1,
title: "E-business",
},
{
id: 2,
title: "Virtual Invoice Avon",
},
{
id: 3,
title: "Specialist Avon Steel",
},
];
}
import { useDeleteMany } from "@pankod/refine";
const { mutate } = useDeleteMany();
mutate({
resource: "categories",
ids: ["2", "3"],
});
mutate
can also accept lifecycle methods like onSuccess
and onError
.
Refer to react-query docs for further information. →
After mutation runs categories
will be updated as below:
{
[
{
id: 1,
title: "E-business",
},
];
}
Queries that use /categories
endpoint will be automatically invalidated to show the updated data. For example, data returned from useList
will be automatically updated.
useDeleteMany
returns react-query
's useMutation
result which includes a lot properties, one of which being mutate
.
Values passed to mutate
must have these types.
{
ids: string[];
resource: string;
mutationMode?: MutationMode;
undoableTimeout?: number;
onCancel?: (cancelMutation: () => void) => void;
}
Mutation mode
Mutation mode determines the mode which the mutation runs with.
import { useDeleteMany } from "@pankod/refine";
const { mutate } = useDeleteMany();
mutate({
resource: "categories",
ids: ["2", "3"],
mutationMode: "optimistic",
});
Refer to the 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"
.
Default behaviour on undo action includes notifications. If a custom callback is passed this notification will not appear.
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 { useDeleteMany } from "@pankod/refine";
const customOnCancel = (cancelMutation: () => void) => {
cancelMutation();
// rest of custom cancel logic...
};
const { mutate } = useDeleteMany();
mutate({
resource: "categories",
ids: ["1", "2"],
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
API
Properties
Property | Description | Type | Default |
---|---|---|---|
resource Required | Resource name for API data interactions | string | |
ids Required | ids for mutation function | string[] | |
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 resource " |
errorNotification | Unsuccessful Mutation notification | SuccessErrorNotification | "Error when updating resource (status code: statusCode )" |
metaData | Metadata query for dataProvider | MetaDataQuery | {} |
*
: These props have default values inRefineContext
and can also be set on <Refine> component.useDeleteMany
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 |
Return value
Description | Type |
---|---|
Result of the react-query 's useMutation | UseMutationResult< { data: TData }, TError, { resource: string; ids: string[]; }, DeleteContext> * |