Skip to main content
Version: 3.xx.xx

useUpdateMany

useUpdateMany is a modified version of react-query's useMutation for multiple update mutations. It uses updateMany method as mutation function from the dataProvider which is passed to <Refine>.

Features

Usage

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

https://api.fake-rest.refine.dev/posts
{
[
{
id: 1,
status: "published",
},
{
id: 2,
status: "rejected",
},
];
}
type PostMutationResult = {
id: number;
status: "published" | "draft" | "rejected";
};

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

const { mutate } = useUpdateMany<PostMutationResult>();

mutate({
resource: "posts",
ids: [1, 2],
values: { status: "draft" },
});
tip

mutate can also accept lifecycle methods like onSuccess and onError. Refer to react-query docs for further information. β†’


After mutation runs posts will be updated as below:

https://api.fake-rest.refine.dev/posts
{
[
{
id: 1,
status: "draft",
},
{
id: 2,
status: "draft",
},
];
}

note

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

tip

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

important

Values passed to mutate must have these types:

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

Mutation mode

Mutation mode determines the mode which mutation runs with.

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

const { mutate } = useUpdateMany();

mutate({
resource: "posts",
ids: [1, 2],
values: { status: "draft" },
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 useUpdateMany. 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 undoable mode.

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

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

const { mutate } = useUpdateMany();

mutate({
resource: "posts",
ids: [1, 2],
values: { status: "draft" },
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

PropertyDescriptionTypeDefault
resource
Required
Resource name for API data interactionsstring
id
Required
id for mutation functionBaseKey[]
values
Required
Values for mutation functionTVariables[][{}]
mutationModeDetermines when mutations are executed "pessimistic | "optimistic | "undoable""pessimistic"*
undoableTimeoutDuration to wait before executing the mutation when mutationMode = "undoable"number5000ms*
onCancelCallback that runs when undo button is clicked on mutationMode = "undoable"(cancelMutation: () => void) => void
successNotificationSuccessful Mutation notificationSuccessErrorNotification"Successfully updated resource"
errorNotificationUnsuccessful Mutation notificationSuccessErrorNotification"Error when updating resource (status code: statusCode)"
metaDataMetadata query for dataProviderMetaDataQuery{}
dataProviderNameIf there is more than one dataProvider, you should use the dataProviderName that you will use.stringdefault
invalidatesYou can use it to manage the invalidations that will occur at the end of the mutation.all, resourceAll, list, many, detail, false["list", "many", "detail"]

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


Type Parameters

PropertyDesriptionTypeDefault
TDataResult data of the mutation. Extends BaseRecordBaseRecordBaseRecord
TErrorCustom error object that extends HttpErrorHttpErrorHttpError
TVariablesValues for mutation function{}{}

Return value

DescriptionType
Result of the react-query's useMutationUseMutationResult<
{ data: TData },
TError,
{ resource:string; ids: BaseKey[]; values: TVariables; },
UpdateContext>
*

* UpdateContext is an internal type.