Merge pull request #11139 from marmelab/fix-on-settled

Fix `onSettled` call when provided in hook time options

Author: djhi

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

@@ -144,6 +144,33 @@ describe('useCreate', () => {
         });
     });
 
+    it('calls onSettled when provided in hook time options', async () => {
+        const dataProvider = testDataProvider({
+            create: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),
+        });
+        let localCreate;
+        const onSettled = jest.fn();
+        const Dummy = () => {
+            const [create] = useCreate(
+                'foo',
+                { data: { bar: 'baz' } },
+                { onSettled }
+            );
+            localCreate = create;
+            return <span />;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+            </CoreAdminContext>
+        );
+        localCreate('foo', { data: { foo: 456 } });
+        await waitFor(() => {
+            expect(onSettled).toHaveBeenCalled();
+        });
+    });
+
     it('accepts a meta parameter', async () => {
         const dataProvider = testDataProvider({
             create: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),

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

@@ -93,6 +93,7 @@ export const useCreate = <
     const {
         mutationMode = 'pessimistic',
         getMutateWithMiddlewares,
+        onSettled,
         ...mutationOptions
     } = options;
 
@@ -205,16 +206,17 @@ export const useCreate = <
                     exact: true,
                 });
             },
-            onSettled: (
-                result,
-                error,
-                variables,
-                context: { snapshot: Snapshot }
-            ) => {
+            onSettled: (...args) => {
+                const [, , , mutateResult] = args;
+
                 // For creation, we always refetch after error or success:
-                context.snapshot.forEach(([queryKey]) => {
-                    queryClient.invalidateQueries({ queryKey });
-                });
+                (mutateResult as { snapshot: Snapshot }).snapshot.forEach(
+                    ([queryKey]) => {
+                        queryClient.invalidateQueries({ queryKey });
+                    }
+                );
+
+                onSettled?.(...args);
             },
         }
     );

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

@@ -207,6 +207,39 @@ describe('useDelete', () => {
         });
     });
 
+    it('calls onSettled when provided in hook time options', async () => {
+        const dataProvider = testDataProvider({
+            delete: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),
+        });
+        let localDeleteOne;
+        const onSettled = jest.fn();
+        const Dummy = () => {
+            const [deleteOne] = useDelete(
+                'foo',
+                {
+                    id: 1,
+                    previousData: { id: 1, bar: 'bar' },
+                },
+                { onSettled }
+            );
+            localDeleteOne = deleteOne;
+            return <span />;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+            </CoreAdminContext>
+        );
+        localDeleteOne('foo', {
+            id: 1,
+            previousData: { foo: 456 },
+        });
+        await waitFor(() => {
+            expect(onSettled).toHaveBeenCalled();
+        });
+    });
+
     it('accepts a meta parameter', async () => {
         const dataProvider = testDataProvider({
             delete: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),

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

@@ -90,7 +90,11 @@ export const useDelete = <
 ): UseDeleteResult<RecordType, MutationError> => {
     const dataProvider = useDataProvider();
     const queryClient = useQueryClient();
-    const { mutationMode = 'pessimistic', ...mutationOptions } = options;
+    const {
+        mutationMode = 'pessimistic',
+        onSettled,
+        ...mutationOptions
+    } = options;
 
     const [mutate, mutationResult] = useMutationWithMutationMode<
         MutationError,
@@ -220,16 +224,17 @@ export const useDelete = <
                 ];
                 return queryKeys;
             },
-            onSettled: (
-                result,
-                error,
-                variables,
-                context: { snapshot: Snapshot }
-            ) => {
+            onSettled: (...args) => {
+                const [, , , mutateResult] = args;
+
                 // For deletion, we always refetch after error or success:
-                context.snapshot.forEach(([queryKey]) => {
-                    queryClient.invalidateQueries({ queryKey });
-                });
+                (mutateResult as { snapshot: Snapshot }).snapshot.forEach(
+                    ([queryKey]) => {
+                        queryClient.invalidateQueries({ queryKey });
+                    }
+                );
+
+                onSettled?.(...args);
             },
         }
     );

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

@@ -148,6 +148,33 @@ describe('useDeleteMany', () => {
         });
     });
 
+    it('calls onSettled when provided in hook time options', async () => {
+        const dataProvider = testDataProvider({
+            deleteMany: jest.fn(() => Promise.resolve({ data: [1, 2] } as any)),
+        });
+        let localDeleteMany;
+        const onSettled = jest.fn();
+        const Dummy = () => {
+            const [deleteMany] = useDeleteMany(
+                'foo',
+                { ids: [1, 2] },
+                { onSettled }
+            );
+            localDeleteMany = deleteMany;
+            return <span />;
+        };
+
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Dummy />
+            </CoreAdminContext>
+        );
+        localDeleteMany('foo', { ids: [3, 4] });
+        await waitFor(() => {
+            expect(onSettled).toHaveBeenCalled();
+        });
+    });
+
     it('accepts a meta parameter', async () => {
         const dataProvider = testDataProvider({
             deleteMany: jest.fn(() => Promise.resolve({ data: [1, 2] } as any)),

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

@@ -90,7 +90,11 @@ export const useDeleteMany = <
 ): UseDeleteManyResult<RecordType, MutationError> => {
     const dataProvider = useDataProvider();
     const queryClient = useQueryClient();
-    const { mutationMode = 'pessimistic', ...mutationOptions } = options;
+    const {
+        mutationMode = 'pessimistic',
+        onSettled,
+        ...mutationOptions
+    } = options;
 
     const [mutate, mutationResult] = useMutationWithMutationMode<
         MutationError,
@@ -247,16 +251,17 @@ export const useDeleteMany = <
                 ];
                 return queryKeys;
             },
-            onSettled: (
-                result,
-                error,
-                variables,
-                context: { snapshot: Snapshot }
-            ) => {
+            onSettled: (...args) => {
+                const [, , , mutateResult] = args;
+
                 // For deletion, we always refetch after error or success:
-                context.snapshot.forEach(([queryKey]) => {
-                    queryClient.invalidateQueries({ queryKey });
-                });
+                (mutateResult as { snapshot: Snapshot }).snapshot.forEach(
+                    ([queryKey]) => {
+                        queryClient.invalidateQueries({ queryKey });
+                    }
+                );
+
+                onSettled?.(...args);
             },
         }
     );