Fix mutation hooks types

packages/ra-core/src/controller/create/useCreateController.ts

@@ -1,12 +1,7 @@
 import { useCallback } from 'react';
-import { UseMutationOptions } from '@tanstack/react-query';
 
 import { useAuthenticated, useRequireAccess } from '../../auth';
-import {
-    HttpError,
-    useCreate,
-    UseCreateMutateParams,
-} from '../../dataProvider';
+import { HttpError, useCreate, UseCreateOptions } from '../../dataProvider';
 import { useRedirect, RedirectionSideEffect } from '../../routing';
 import { useNotify } from '../../notification';
 import {
@@ -225,10 +220,10 @@ export interface CreateControllerProps<
     redirect?: RedirectionSideEffect;
     resource?: string;
     mutationMode?: MutationMode;
-    mutationOptions?: UseMutationOptions<
-        ResultRecordType,
+    mutationOptions?: UseCreateOptions<
+        RecordType,
         MutationOptionsError,
-        UseCreateMutateParams<RecordType>
+        ResultRecordType
     > & { meta?: any };
     transform?: TransformData;
 }

packages/ra-core/src/dataProvider/useCreate.spec.tsx

@@ -82,6 +82,63 @@ describe('useCreate', () => {
         });
     });
 
+    it('uses a custom mutationFn with mutation middlewares', async () => {
+        const dataProvider = testDataProvider({
+            create: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),
+        });
+        const customMutationFn = jest.fn(async params => ({
+            id: 1,
+            title: params.data?.title,
+            middlewareApplied: params.data?.middlewareApplied,
+        }));
+        let localCreate;
+        let mutationData;
+        const Dummy = () => {
+            const [create, { data }] = useCreate(undefined, undefined, {
+                mutationFn: customMutationFn,
+                getMutateWithMiddlewares: mutate => async (resource, params) =>
+                    mutate(resource, {
+                        ...params,
+                        data: {
+                            ...params.data,
+                            middlewareApplied: true,
+                        },
+                    }),
+            });
+            localCreate = create;
+            mutationData = data;
+            return <span />;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+            </CoreAdminContext>
+        );
+
+        localCreate('foo', { data: { title: 'Hello' } });
+
+        await waitFor(() => {
+            expect(customMutationFn).toHaveBeenCalledWith({
+                resource: 'foo',
+                data: {
+                    title: 'Hello',
+                    middlewareApplied: true,
+                },
+            });
+        });
+
+        expect(dataProvider.create).not.toHaveBeenCalled();
+
+        await waitFor(() => {
+            expect(mutationData).toEqual({
+                id: 1,
+                title: 'Hello',
+                middlewareApplied: true,
+            });
+        });
+    });
+
     it('uses the latest declaration time mutationMode', async () => {
         jest.spyOn(console, 'error').mockImplementation(() => {});
         // This story uses the pessimistic mode by default

packages/ra-core/src/dataProvider/useCreate.ts

@@ -93,6 +93,7 @@ export const useCreate = <
     const {
         mutationMode = 'pessimistic',
         getMutateWithMiddlewares,
+        mutationFn: customMutationFn,
         onSettled,
         ...mutationOptions
     } = options;
@@ -103,6 +104,26 @@ export const useCreate = <
             params as CreateParams<RecordType>
         )
     );
+    const customMutationFnWithDataProviderResult = async (
+        resource: string | undefined,
+        params: Omit<UseCreateMutateParams<RecordType>, 'resource'>
+    ) => {
+        if (resource == null) {
+            throw new Error('useCreate mutation requires a resource');
+        }
+        if (params.data == null) {
+            throw new Error(
+                'useCreate mutation requires a non-empty data object'
+            );
+        }
+        if (customMutationFn == null) {
+            return dataProviderCreate(resource, params);
+        }
+
+        return {
+            data: await customMutationFn({ resource, ...params }),
+        };
+    };
 
     const [mutate, mutationResult] = useMutationWithMutationMode<
         MutationError,
@@ -114,17 +135,8 @@ export const useCreate = <
             ...mutationOptions,
             mutationKey: [resource, 'create', params],
             mutationMode,
-            mutationFn: ({ resource, ...params }) => {
-                if (resource == null) {
-                    throw new Error('useCreate mutation requires a resource');
-                }
-                if (params.data == null) {
-                    throw new Error(
-                        'useCreate mutation requires a non-empty data object'
-                    );
-                }
-                return dataProviderCreate(resource, params);
-            },
+            mutationFn: ({ resource, ...params }) =>
+                customMutationFnWithDataProviderResult(resource, params),
             updateCache: (
                 { resource, ...params },
                 { mutationMode },
@@ -179,12 +191,21 @@ export const useCreate = <
 
                 return queryKeys;
             },
-            getMutateWithMiddlewares: mutationFn => {
+            getMutateWithMiddlewares: mutateWithMutationMode => {
                 if (getMutateWithMiddlewares) {
                     // Immediately get the function with middlewares applied so that even if the middlewares gets unregistered (because of a redirect for instance),
                     // we still have them applied when users have called the mutate function.
                     const mutateWithMiddlewares = getMutateWithMiddlewares(
-                        dataProviderCreate.bind(dataProvider)
+                        customMutationFn
+                            ? (resource, params) =>
+                                  customMutationFnWithDataProviderResult(
+                                      resource,
+                                      params as Omit<
+                                          UseCreateMutateParams<RecordType>,
+                                          'resource'
+                                      >
+                                  )
+                            : dataProviderCreate.bind(dataProvider)
                     );
                     return args => {
                         // This is necessary to avoid breaking changes in useCreate:
@@ -194,7 +215,7 @@ export const useCreate = <
                     };
                 }
 
-                return args => mutationFn(args);
+                return args => mutateWithMutationMode(args);
             },
             onUndo: ({ resource, data, meta }) => {
                 queryClient.removeQueries({
@@ -268,6 +289,9 @@ export type UseCreateOptions<
     >,
     'mutationFn'
 > & {
+    mutationFn?: (
+        params: Partial<UseCreateMutateParams<RecordType>>
+    ) => Promise<ResultRecordType>;
     mutationMode?: MutationMode;
     returnPromise?: boolean;
     getMutateWithMiddlewares?: <

packages/ra-core/src/dataProvider/useDelete.spec.tsx

@@ -76,6 +76,51 @@ describe('useDelete', () => {
         });
     });
 
+    it('uses a custom mutationFn when provided in options', async () => {
+        const dataProvider = testDataProvider({
+            delete: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),
+        });
+        const customMutationFn = jest.fn(async params => ({
+            id: params.id,
+            source: 'custom',
+        }));
+        let localDeleteOne;
+        let mutationData;
+        const Dummy = () => {
+            const [deleteOne, { data }] = useDelete(undefined, undefined, {
+                mutationFn: customMutationFn,
+            });
+            localDeleteOne = deleteOne;
+            mutationData = data;
+            return <span />;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+            </CoreAdminContext>
+        );
+
+        localDeleteOne('foo', { id: 1, previousData: { id: 1, bar: 'bar' } });
+
+        await waitFor(() => {
+            expect(customMutationFn).toHaveBeenCalledWith({
+                resource: 'foo',
+                id: 1,
+                previousData: { id: 1, bar: 'bar' },
+            });
+        });
+
+        expect(dataProvider.delete).not.toHaveBeenCalled();
+
+        await waitFor(() => {
+            expect(mutationData).toEqual({
+                id: 1,
+                source: 'custom',
+            });
+        });
+    });
+
     it('uses the latest declaration time mutationMode', async () => {
         const posts = [
             { id: 1, title: 'Hello' },

packages/ra-core/src/dataProvider/useDelete.ts

@@ -92,9 +92,31 @@ export const useDelete = <
     const queryClient = useQueryClient();
     const {
         mutationMode = 'pessimistic',
+        mutationFn: customMutationFn,
         onSettled,
         ...mutationOptions
     } = options;
+    const customMutationFnWithDataProviderResult = async (
+        resource: string | undefined,
+        params: Omit<UseDeleteMutateParams<RecordType>, 'resource'>
+    ) => {
+        if (resource == null) {
+            throw new Error('useDelete mutation requires a resource');
+        }
+        if (params.id == null) {
+            throw new Error('useDelete mutation requires a non-empty id');
+        }
+        if (customMutationFn == null) {
+            return dataProvider.delete<RecordType>(
+                resource,
+                params as DeleteParams<RecordType>
+            );
+        }
+
+        return {
+            data: await customMutationFn({ resource, ...params }),
+        };
+    };
 
     const [mutate, mutationResult] = useMutationWithMutationMode<
         MutationError,
@@ -106,20 +128,8 @@ export const useDelete = <
             ...mutationOptions,
             mutationKey: [resource, 'delete', params],
             mutationMode,
-            mutationFn: ({ resource, ...params }) => {
-                if (resource == null) {
-                    throw new Error('useDelete mutation requires a resource');
-                }
-                if (params.id == null) {
-                    throw new Error(
-                        'useDelete mutation requires a non-empty id'
-                    );
-                }
-                return dataProvider.delete<RecordType>(
-                    resource,
-                    params as DeleteParams<RecordType>
-                );
-            },
+            mutationFn: ({ resource, ...params }) =>
+                customMutationFnWithDataProviderResult(resource, params),
             updateCache: ({ resource, ...params }, { 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
@@ -285,6 +295,9 @@ export type UseDeleteOptions<
     >,
     'mutationFn'
 > & {
+    mutationFn?: (
+        params: Partial<UseDeleteMutateParams<RecordType>>
+    ) => Promise<RecordType>;
     mutationMode?: MutationMode;
     returnPromise?: boolean;
 };

packages/ra-core/src/dataProvider/useDeleteMany.spec.tsx

@@ -57,6 +57,44 @@ describe('useDeleteMany', () => {
         });
     });
 
+    it('uses a custom mutationFn when provided in options', async () => {
+        const dataProvider = testDataProvider({
+            deleteMany: jest.fn(() => Promise.resolve({ data: [1, 2] } as any)),
+        });
+        const customMutationFn = jest.fn(async params => params.ids);
+        let localDeleteMany;
+        let mutationData;
+        const Dummy = () => {
+            const [deleteMany, { data }] = useDeleteMany(undefined, undefined, {
+                mutationFn: customMutationFn,
+            });
+            localDeleteMany = deleteMany;
+            mutationData = data;
+            return <span />;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+            </CoreAdminContext>
+        );
+
+        localDeleteMany('foo', { ids: [1, 2] });
+
+        await waitFor(() => {
+            expect(customMutationFn).toHaveBeenCalledWith({
+                resource: 'foo',
+                ids: [1, 2],
+            });
+        });
+
+        expect(dataProvider.deleteMany).not.toHaveBeenCalled();
+
+        await waitFor(() => {
+            expect(mutationData).toEqual([1, 2]);
+        });
+    });
+
     it('uses the latest declaration time mutationMode', async () => {
         // This story uses the pessimistic mode by default
         render(<MutationMode />);