Merge pull request #9855 from marmelab/refactor-middlewares

Move middlewares to dataProvider hooks

Author: fzaninotto

docs/Upgrade.md

@@ -1335,6 +1335,40 @@ The `data-generator-retail` package has been updated to provide types for all it
 
 React-admin no longer supports ([deprecated React PropTypes](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings)). We encourage you to switch to TypeScript to type component props.
 
+### Mutation Middlewares No Longer Receive The Mutation Options
+
+Mutations middlewares no longer receive the mutation options:
+
+```diff
+import * as React from 'react';
+import {
+    useRegisterMutationMiddleware,
+    CreateParams,
+-    MutateOptions,
+    CreateMutationFunction
+} from 'react-admin';
+
+const MyComponent = () => {
+    const createMiddleware = async (
+        resource: string,
+        params: CreateParams,
+-        options: MutateOptions,
+        next: CreateMutationFunction
+    ) => {
+        // Do something before the mutation
+
+        // Call the next middleware
+-        await next(resource, params, options);
++        await next(resource, params);
+
+        // Do something after the mutation
+    }
+    const memoizedMiddleWare = React.useCallback(createMiddleware, []);
+    useRegisterMutationMiddleware(memoizedMiddleWare);
+    // ...
+}
+```
+
 ## Upgrading to v4
 
 If you are on react-admin v3, follow the [Upgrading to v4](https://marmelab.com/react-admin/doc/4.16/Upgrade.html) guide before upgrading to v5.

docs/useRegisterMutationMiddleware.md

@@ -28,21 +28,19 @@ import * as React from 'react';
 import {
     useRegisterMutationMiddleware,
     CreateParams,
-    MutateOptions,
     CreateMutationFunction
 } from 'react-admin';
 
 const MyComponent = () => {
     const createMiddleware = async (
         resource: string,
         params: CreateParams,
-        options: MutateOptions,
         next: CreateMutationFunction
     ) => {
         // Do something before the mutation
 
         // Call the next middleware
-        await next(resource, params, options);
+        await next(resource, params);
 
         // Do something after the mutation
     }
@@ -65,11 +63,11 @@ React-admin will wrap each call to the `dataProvider.create()` mutation with the
 A middleware function must have the following signature:
 
 ```jsx
-const middlware = async (resource, params, options, next) => {
+const middlware = async (resource, params, next) => {
     // Do something before the mutation
 
     // Call the next middleware
-    await next(resource, params, options);
+    await next(resource, params);
 
     // Do something after the mutation
 }
@@ -97,13 +95,12 @@ const ThumbnailInput = () => {
     const middleware = useCallback(async (
         resource,
         params,
-        options,
         next
     ) => {
         const b64 = await convertFileToBase64(params.data.thumbnail);
         // Update the parameters that will be sent to the dataProvider call
         const newParams = { ...params, data: { ...data, thumbnail: b64 } };
-        await next(resource, newParams, options);
+        await next(resource, newParams);
     }, []);
     useRegisterMutationMiddleware(middleware);
 

packages/ra-core/src/controller/create/CreateController.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import {
     useCreateController,
     CreateControllerProps,
@@ -21,7 +22,7 @@ export const CreateController = ({
     children,
     ...props
 }: {
-    children: (params: CreateControllerResult) => JSX.Element;
+    children: (params: CreateControllerResult) => ReactNode;
 } & CreateControllerProps) => {
     const controllerProps = useCreateController(props);
     return children(controllerProps);

packages/ra-core/src/controller/create/useCreateController.spec.tsx

@@ -18,7 +18,7 @@ import {
     useInput,
 } from '../..';
 import { CoreAdminContext } from '../../core';
-import { testDataProvider, useCreate } from '../../dataProvider';
+import { testDataProvider } from '../../dataProvider';
 import { useNotificationContext } from '../../notification';
 import {
     Middleware,
@@ -35,9 +35,9 @@ describe('useCreateController', () => {
         const location: Location = {
             key: 'a_key',
             pathname: '/foo',
-            search: undefined,
+            search: '',
             state: undefined,
-            hash: undefined,
+            hash: '',
         };
 
         it('should return location state record when set', () => {
@@ -563,20 +563,17 @@ describe('useCreateController', () => {
         const dataProvider = testDataProvider({
             create,
         });
-        const middleware: Middleware<ReturnType<typeof useCreate>[0]> = jest.fn(
-            (resource, params, options, next) => {
-                return next(
-                    resource,
-                    { ...params, meta: { addedByMiddleware: true } },
-                    options
-                );
+        const middleware: Middleware<DataProvider['create']> = jest.fn(
+            (resource, params, next) => {
+                return next(resource, {
+                    ...params,
+                    meta: { addedByMiddleware: true },
+                });
             }
         );
 
         const Child = () => {
-            useRegisterMutationMiddleware<ReturnType<typeof useCreate>[0]>(
-                middleware
-            );
+            useRegisterMutationMiddleware<DataProvider['create']>(middleware);
             return null;
         };
         render(
@@ -616,7 +613,6 @@ describe('useCreateController', () => {
             {
                 data: { foo: 'bar' },
             },
-            expect.any(Object),
             expect.any(Function)
         );
     });

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

@@ -84,7 +84,7 @@ export const useCreateController = <
     } = mutationOptions;
     const {
         registerMutationMiddleware,
-        getMutateWithMiddlewares,
+        mutateWithMiddlewares,
         unregisterMutationMiddleware,
     } = useMutationMiddlewares();
 
@@ -139,6 +139,7 @@ export const useCreateController = <
         },
         ...otherMutationOptions,
         returnPromise: true,
+        mutateWithMiddlewares,
     });
 
     const save = useCallback(
@@ -157,9 +158,8 @@ export const useCreateController = <
                     ? transform(data)
                     : data
             ).then(async (data: Partial<RecordType>) => {
-                const mutate = getMutateWithMiddlewares(create);
                 try {
-                    await mutate(
+                    await create(
                         resource,
                         { data, meta: metaFromSave ?? meta },
                         callTimeOptions
@@ -176,7 +176,7 @@ export const useCreateController = <
                     }
                 }
             }),
-        [create, getMutateWithMiddlewares, meta, resource, transform]
+        [create, meta, resource, transform]
     );
 
     const getResourceLabel = useGetResourceLabel();

packages/ra-core/src/controller/edit/EditController.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import {
     useEditController,
     EditControllerProps,
@@ -21,7 +22,7 @@ export const EditController = ({
     children,
     ...props
 }: {
-    children: (params: EditControllerResult) => JSX.Element;
+    children: (params: EditControllerResult) => ReactNode;
 } & EditControllerProps) => {
     const controllerProps = useEditController(props);
     return children(controllerProps);

packages/ra-core/src/controller/edit/useEditController.spec.tsx

@@ -15,14 +15,14 @@ import {
     useEditController,
 } from '..';
 import { CoreAdminContext } from '../../core';
-import { testDataProvider, useUpdate } from '../../dataProvider';
+import { testDataProvider } from '../../dataProvider';
 import undoableEventEmitter from '../../dataProvider/undoableEventEmitter';
 import { Form, InputProps, useInput } from '../../form';
 import { useNotificationContext } from '../../notification';
 import { DataProvider } from '../../types';
 import { Middleware, useRegisterMutationMiddleware } from '../saveContext';
 import { EditController } from './EditController';
-import { TestMemoryRouter } from '../../routing';
+import { RedirectionSideEffect, TestMemoryRouter } from '../../routing';
 
 describe('useEditController', () => {
     const defaultProps = {
@@ -131,10 +131,14 @@ describe('useEditController', () => {
                 Promise.resolve({ data: { id: 12, title: 'hello' } })
             );
         const dataProvider = ({ getOne } as unknown) as DataProvider;
-        const Component = ({ redirect = undefined }) => (
+        const Component = ({
+            redirect = undefined,
+        }: {
+            redirect?: RedirectionSideEffect;
+        }) => (
             <CoreAdminContext dataProvider={dataProvider}>
                 <EditController {...defaultProps} redirect={redirect}>
-                    {({ redirect }) => <div>{redirect}</div>}
+                    {({ redirect }) => <div>{redirect.toString()}</div>}
                 </EditController>
             </CoreAdminContext>
         );
@@ -224,7 +228,7 @@ describe('useEditController', () => {
                                 <p>{record?.test}</p>
                                 <button
                                     aria-label="save"
-                                    onClick={() => save({ test: 'updated' })}
+                                    onClick={() => save!({ test: 'updated' })}
                                 />
                             </>
                         );
@@ -268,7 +272,7 @@ describe('useEditController', () => {
                                 <p>{record?.test}</p>
                                 <button
                                     aria-label="save"
-                                    onClick={() => save({ test: 'updated' })}
+                                    onClick={() => save!({ test: 'updated' })}
                                 />
                             </>
                         );
@@ -1044,20 +1048,17 @@ describe('useEditController', () => {
             getOne: () => Promise.resolve({ data: { id: 12 } }),
             update,
         });
-        const middleware: Middleware<ReturnType<typeof useUpdate>[0]> = jest.fn(
-            (resource, params, options, next) => {
-                return next(
-                    resource,
-                    { ...params, meta: { addedByMiddleware: true } },
-                    options
-                );
+        const middleware: Middleware<DataProvider['update']> = jest.fn(
+            (resource, params, next) => {
+                return next(resource, {
+                    ...params,
+                    meta: { addedByMiddleware: true },
+                });
             }
         );
 
         const Child = () => {
-            useRegisterMutationMiddleware<ReturnType<typeof useUpdate>[0]>(
-                middleware
-            );
+            useRegisterMutationMiddleware<DataProvider['update']>(middleware);
             return null;
         };
         render(
@@ -1102,7 +1103,6 @@ describe('useEditController', () => {
                 id: 12,
                 data: { foo: 'bar' },
             },
-            expect.any(Object),
             expect.any(Function)
         );
     });

packages/ra-core/src/controller/edit/useEditController.ts

@@ -91,7 +91,7 @@ export const useEditController = <
     } = mutationOptions;
     const {
         registerMutationMiddleware,
-        getMutateWithMiddlewares,
+        mutateWithMiddlewares,
         unregisterMutationMiddleware,
     } = useMutationMiddlewares();
     const {
@@ -192,6 +192,7 @@ export const useEditController = <
             ...otherMutationOptions,
             mutationMode,
             returnPromise: mutationMode === 'pessimistic',
+            mutateWithMiddlewares,
         }
     );
 
@@ -216,10 +217,8 @@ export const useEditController = <
                       })
                     : data
             ).then(async (data: Partial<RecordType>) => {
-                const mutate = getMutateWithMiddlewares(update);
-
                 try {
-                    await mutate(
+                    await update(
                         resource,
                         {
                             id,
@@ -239,7 +238,6 @@ export const useEditController = <
             }),
         [
             id,
-            getMutateWithMiddlewares,
             mutationMeta,
             resource,
             transform,