useUpdateMany.md

layout	title
default	useUpdateMany

useUpdateMany

This hook allows to call dataProvider.updateMany() when the callback is executed, and update an array of records based on their ids and a data argument.

// syntax
const [updateMany, { data, isLoading, error }] = useUpdateMany(
    resource,
    { ids, data },
    options
);

The updateMany() method can be called with the same parameters as the hook:

updateMany(
    resource,
    { ids, data },
    options
);

So, should you pass the parameters when calling the hook, or when executing the callback? It's up to you; but if you have the choice, we recommend passing the parameters when calling the updateMany callback (second example below).

// set params when calling the hook
import { useUpdateMany } from 'react-admin';

const BulkResetViewsButton = ({ selectedIds }) => {
    const [updateMany, { isLoading, error }] = useUpdateMany(
        'posts',
        { ids: selectedIds, data: { views: 0 } }
    );
    const handleClick = () => {
        updateMany();
    }
    if (error) { return <p>ERROR</p>; }
    return <button disabled={isLoading} onClick={handleClick}>Reset views</button>;
};

// set params when calling the updateMany callback
import { useUpdateMany } from 'react-admin';

const BulkResetViewsButton = ({ selectedIds }) => {
    const [updateMany, { isLoading, error }] = useUpdateMany();
    const handleClick = () => {
        updateMany(
            'posts',
            { ids: selectedIds, data: { views: 0 } }
        );
    }
    if (error) { return <p>ERROR</p>; }
    return <button disabled={isLoading} onClick={handleClick}>Reset views</button>;
};

Tip: If you use TypeScript, you can specify the record and error types for more type safety:

useUpdateMany<Product, Error>(undefined, undefined, {
    onError: (error) => {
        // error is an instance of Error.
    },
    onSettled: (data, error) => {
        // data is an instance of Product.
        // error is an instance of Error.
    },
})