Merge pull request #10882 from marmelab/fix-edit-controller-meta

Fix edit controller meta

Author: fzaninotto

docs/Edit.md

@@ -413,6 +413,8 @@ const PostEdit = () => (
 
 {% endraw %}
 
+**Warning**: If you set `mutationOptions` meta without [redirecting](#redirect), make sure that [`queryOptions`](#queryoptions) meta is the same, or you will have data update issues.
+
 You can also use `mutationOptions` to override success or error side effects, by setting the `mutationOptions` prop. Refer to the [useMutation documentation](https://tanstack.com/query/v5/docs/react/reference/useMutation) in the react-query website for a list of the possible options.
 
 Let's see an example with the success side effect. By default, when the save action succeeds, react-admin shows a notification, and redirects to the list page. You can override this behavior and pass custom success side effects by providing a `mutationOptions` prop with an `onSuccess` key:
@@ -561,6 +563,8 @@ export const PostShow = () => (
 
 {% endraw %}
 
+**Warning**: If you set `queryOptions` meta without [redirecting](#redirect), make sure that [`mutationOptions`](#mutationoptions) meta is the same, or you will have data update issues.
+
 You can also use `queryOptions` to force a refetch on reconnect:
 
 {% raw %}
@@ -596,7 +600,9 @@ const PostEdit = () => (
 );
 ```
 
-Note that the `redirect` prop is ignored if you set [the `mutationOptions` prop](#mutationoptions). See that prop for how to set a different redirection path in that case.
+Note that the `redirect` prop is ignored if you set an `onSuccess` callback of [the `mutationOptions` prop](#mutationoptions). See that prop for how to set a different redirection path in that case.
+
+**Warning**: If you set [`queryOptions`](#queryoptions) meta without redirecting, make sure that [`mutationOptions`](#mutationoptions) meta is the same, or you will have data update issues.
 
 ## `render`
 

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

@@ -28,7 +28,10 @@ import {
     CanAccess,
     DisableAuthentication,
 } from './useEditController.security.stories';
-import { EncodedId } from './useEditController.stories';
+import {
+    EncodedId,
+    WarningLogWithDifferentMeta,
+} from './useEditController.stories';
 
 const Confirm = () => {
     const takeMutation = useTakeUndoableMutation();
@@ -50,6 +53,10 @@ describe('useEditController', () => {
         resource: 'posts',
     };
 
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
     it('should call the dataProvider.getOne() function on mount', async () => {
         const getOne = jest
             .fn()
@@ -217,6 +224,16 @@ describe('useEditController', () => {
         });
     });
 
+    it('should emit a warning when providing a different meta in query options and mutation options without redirecting', async () => {
+        const warnFn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+        render(<WarningLogWithDifferentMeta />);
+
+        expect(warnFn).toHaveBeenCalledWith(
+            'When not redirecting after editing, query meta and mutation meta should be the same, or you will have data update issues.'
+        );
+    });
+
     it('should call the dataProvider.update() function on save', async () => {
         const update = jest
             .fn()
@@ -261,6 +278,7 @@ describe('useEditController', () => {
     });
 
     it('should return an undoable save callback by default', async () => {
+        window.confirm = jest.fn().mockReturnValue(true);
         let post = { id: 12, test: 'previous' };
         const update = jest
             .fn()
@@ -293,7 +311,7 @@ describe('useEditController', () => {
         await waitFor(() => {
             screen.getByText('previous');
         });
-        screen.getByLabelText('save').click();
+        fireEvent.click(screen.getByLabelText('save'));
         await waitFor(() => {
             screen.getByText('updated');
         });
@@ -302,7 +320,7 @@ describe('useEditController', () => {
             data: { test: 'updated' },
             previousData: { id: 12, test: 'previous' },
         });
-        screen.getByLabelText('confirm').click();
+        fireEvent.click(screen.getByLabelText('confirm'));
         await waitFor(() => {
             screen.getByText('updated');
         });
@@ -336,8 +354,7 @@ describe('useEditController', () => {
                 </EditController>
             </CoreAdminContext>
         );
-        await new Promise(resolve => setTimeout(resolve, 10));
-        screen.getByText('{"id":12}');
+        await screen.findByText('{"id":12}');
         await act(async () => saveCallback({ foo: 'bar' }));
         await screen.findByText('{"id":12,"foo":"bar"}');
         expect(update).toHaveBeenCalledWith('posts', {

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

@@ -75,6 +75,40 @@ export const EncodedIdWithPercentage = ({
     );
 };
 
+export const WarningLogWithDifferentMeta = () => (
+    <TestMemoryRouter initialEntries={['/posts/5']}>
+        <CoreAdminContext
+            dataProvider={testDataProvider({
+                getOne: (_resource, { id }) =>
+                    Promise.resolve({
+                        data: { id, title: 'hello' } as any,
+                    }),
+            })}
+        >
+            <Routes>
+                <Route
+                    path="/posts/:id"
+                    element={
+                        <EditController
+                            resource="posts"
+                            queryOptions={{ meta: { foo: 'bar' } }}
+                            redirect={false}
+                        >
+                            {({ record }) => (
+                                <>
+                                    <LocationInspector />
+                                    <p>Id: {record && record.id}</p>
+                                    <p>Title: {record && record.title}</p>
+                                </>
+                            )}
+                        </EditController>
+                    }
+                />
+            </Routes>
+        </CoreAdminContext>
+    </TestMemoryRouter>
+);
+
 const LocationInspector = () => {
     const location = useLocation();
     return (

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

@@ -89,13 +89,25 @@ export const useEditController = <
         );
     }
     const id = propsId ?? routeId;
+
     const { meta: queryMeta, ...otherQueryOptions } = queryOptions;
     const {
         meta: mutationMeta,
         onSuccess,
         onError,
         ...otherMutationOptions
     } = mutationOptions;
+
+    if (
+        (queryMeta || mutationMeta) &&
+        JSON.stringify(queryMeta) !== JSON.stringify(mutationMeta) &&
+        redirectTo === false
+    ) {
+        console.warn(
+            'When not redirecting after editing, query meta and mutation meta should be the same, or you will have data update issues.'
+        );
+    }
+
     const {
         registerMutationMiddleware,
         getMutateWithMiddlewares,
@@ -302,6 +314,7 @@ export interface EditControllerProps<
     redirect?: RedirectionSideEffect;
     resource?: string;
     transform?: TransformData;
+
     [key: string]: any;
 }
 
@@ -322,6 +335,7 @@ export interface EditControllerLoadingResult<RecordType extends RaRecord = any>
     error: null;
     isPending: true;
 }
+
 export interface EditControllerLoadingErrorResult<
     RecordType extends RaRecord = any,
     TError = Error,
@@ -330,6 +344,7 @@ export interface EditControllerLoadingErrorResult<
     error: TError;
     isPending: false;
 }
+
 export interface EditControllerRefetchErrorResult<
     RecordType extends RaRecord = any,
     TError = Error,
@@ -338,6 +353,7 @@ export interface EditControllerRefetchErrorResult<
     error: TError;
     isPending: false;
 }
+
 export interface EditControllerSuccessResult<RecordType extends RaRecord = any>
     extends EditControllerBaseResult<RecordType> {
     record: RecordType;