ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
206 lines • 10.3 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDeleteMany = void 0;
var react_query_1 = require("@tanstack/react-query");
var useDataProvider_1 = require("./useDataProvider");
var util_1 = require("../util");
var useMutationWithMutationMode_1 = require("./useMutationWithMutationMode");
/**
* Get a callback to call the dataProvider.delete() method, the result and the loading state.
*
* @param {string} resource
* @param {Params} params The delete parameters { ids }
* @param {Object} options Options object to pass to the queryClient.
* May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { refresh(); } }
* May include a mutation mode (optimistic/pessimistic/undoable), e.g. { mutationMode: 'undoable' }
*
* @typedef Params
* @prop params.ids The resource identifiers, e.g. [123, 456]
*
* @returns The current mutation state. Destructure as [deleteMany, { data, error, isPending }].
*
* The return value updates according to the request state:
*
* - initial: [deleteMany, { isPending: false, isIdle: true }]
* - start: [deleteMany, { isPending: true }]
* - success: [deleteMany, { data: [data from response], isPending: false, isSuccess: true }]
* - error: [deleteMany, { error: [error from response], isPending: false, isError: true }]
*
* The deleteMany() function must be called with a resource and a parameter object: deleteMany(resource, { ids, meta }, options)
*
* This hook uses react-query useMutation under the hood.
* This means the state object contains mutate, isIdle, reset and other react-query methods.
*
* @see https://tanstack.com/query/v5/docs/react/reference/useMutation
*
* @example // set params when calling the deleteMany callback
*
* import { useDeleteMany } from 'react-admin';
*
* const BulkDeletePostsButton = ({ selectedIds }) => {
* const [deleteMany, { isPending, error }] = useDeleteMany();
* const handleClick = () => {
* deleteMany('posts', { ids: selectedIds })
* }
* if (error) { return <p>ERROR</p>; }
* return <button disabled={isPending} onClick={handleClick}>Delete selected posts</button>;
* };
*
* @example // set params when calling the hook
*
* import { useDeleteMany } from 'react-admin';
*
* const BulkDeletePostsButton = ({ selectedIds }) => {
* const [deleteMany, { isPending, error }] = useDeleteMany('posts', { ids: selectedIds });
* const handleClick = () => {
* deleteMany()
* }
* if (error) { return <p>ERROR</p>; }
* return <button disabled={isPending} onClick={handleClick}>Delete selected posts</button>;
* };
*
* @example // TypeScript
* const [deleteMany, { data }] = useDeleteMany<Product>('products', { ids });
* \-- data is Product
*/
var useDeleteMany = function (resource, params, options) {
if (params === void 0) { params = {}; }
if (options === void 0) { options = {}; }
var dataProvider = (0, useDataProvider_1.useDataProvider)();
var queryClient = (0, react_query_1.useQueryClient)();
var _a = options.mutationMode, mutationMode = _a === void 0 ? 'pessimistic' : _a, mutationOptions = __rest(options, ["mutationMode"]);
var _b = (0, useMutationWithMutationMode_1.useMutationWithMutationMode)(__assign({ resource: resource }, params), __assign(__assign({}, mutationOptions), { mutationKey: [resource, 'deleteMany', params], mutationMode: mutationMode, mutationFn: function (_a) {
var resource = _a.resource, params = __rest(_a, ["resource"]);
if (resource == null) {
throw new Error('useDeleteMany mutation requires a resource');
}
if (params.ids == null) {
throw new Error('useDeleteMany mutation requires an array of ids');
}
return dataProvider.deleteMany(resource, params);
}, updateCache: function (_a, _b) {
var resource = _a.resource, params = __rest(_a, ["resource"]);
var mutationMode = _b.mutationMode;
// hack: only way to tell react-query not to fetch this query for the next 5 seconds
// because setQueryData doesn't accept a stale time option
var now = Date.now();
var updatedAt = mutationMode === 'undoable' ? now + 5 * 1000 : now;
var updateColl = function (old) {
var _a;
if (!old)
return old;
var newCollection = __spreadArray([], old, true);
(_a = params.ids) === null || _a === void 0 ? void 0 : _a.forEach(function (id) {
var index = newCollection.findIndex(
// eslint-disable-next-line eqeqeq
function (record) { return record.id == id; });
if (index === -1) {
return;
}
newCollection = __spreadArray(__spreadArray([], newCollection.slice(0, index), true), newCollection.slice(index + 1), true);
});
return newCollection;
};
queryClient.setQueriesData({ queryKey: [resource, 'getList'] }, function (res) {
if (!res || !res.data)
return res;
var newCollection = updateColl(res.data);
var recordWasFound = newCollection.length < res.data.length;
return recordWasFound
? __assign(__assign({}, res), { data: newCollection, total: res.total
? res.total -
(res.data.length - newCollection.length)
: undefined }) : res;
}, { updatedAt: updatedAt });
queryClient.setQueriesData({ queryKey: [resource, 'getInfiniteList'] }, function (res) {
if (!res || !res.pages)
return res;
return __assign(__assign({}, res), { pages: res.pages.map(function (page) {
var newCollection = updateColl(page.data);
var recordWasFound = newCollection.length < page.data.length;
return recordWasFound
? __assign(__assign({}, page), { data: newCollection, total: page.total
? page.total -
(page.data.length -
newCollection.length)
: undefined }) : page;
}) });
}, { updatedAt: updatedAt });
queryClient.setQueriesData({ queryKey: [resource, 'getMany'] }, function (coll) {
return coll && coll.length > 0 ? updateColl(coll) : coll;
}, { updatedAt: updatedAt });
queryClient.setQueriesData({ queryKey: [resource, 'getManyReference'] }, function (res) {
if (!res || !res.data)
return res;
var newCollection = updateColl(res.data);
var recordWasFound = newCollection.length < res.data.length;
if (!recordWasFound) {
return res;
}
if (res.total) {
return __assign(__assign({}, res), { data: newCollection, total: res.total -
(res.data.length - newCollection.length) });
}
if (res.pageInfo) {
return __assign(__assign({}, res), { data: newCollection });
}
throw new Error('Found getManyReference result in cache without total or pageInfo');
}, { updatedAt: updatedAt });
return params.ids;
}, getQueryKeys: function (_a) {
var resource = _a.resource;
var queryKeys = [
[resource, 'getList'],
[resource, 'getInfiniteList'],
[resource, 'getMany'],
[resource, 'getManyReference'],
];
return queryKeys;
}, onSettled: function (result, error, variables, context) {
// For deletion, we always refetch after error or success:
context.snapshot.forEach(function (_a) {
var queryKey = _a[0];
queryClient.invalidateQueries({ queryKey: queryKey });
});
} })), mutate = _b[0], mutationResult = _b[1];
var deleteMany = (0, util_1.useEvent)(function (callTimeResource, callTimeParams, callTimeOptions) {
if (callTimeResource === void 0) { callTimeResource = resource; }
if (callTimeParams === void 0) { callTimeParams = {}; }
if (callTimeOptions === void 0) { callTimeOptions = {}; }
return mutate(__assign({ resource: callTimeResource }, callTimeParams), callTimeOptions);
});
return [deleteMany, mutationResult];
};
exports.useDeleteMany = useDeleteMany;
//# sourceMappingURL=useDeleteMany.js.map