fix useMutationWithMutationMode implementation

Author: slax57

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

@@ -160,7 +160,7 @@ export const useCreate = <
 
                 return clonedData;
             },
-            getSnapshot: ({ resource, ...params }, { mutationMode }) => {
+            getQueryKeys: ({ resource, ...params }, { mutationMode }) => {
                 const queryKeys: any[] = [
                     [resource, 'getList'],
                     [resource, 'getInfiniteList'],
@@ -176,27 +176,7 @@ export const useCreate = <
                     ]);
                 }
 
-                /**
-                 * Snapshot the previous values via queryClient.getQueriesData()
-                 *
-                 * The snapshotData ref will contain an array of tuples [query key, associated data]
-                 *
-                 * @example
-                 * [
-                 *   [['posts', 'getOne', { id: '1' }], { id: 1, title: 'Hello' }],
-                 *   [['posts', 'getList'], { data: [{ id: 1, title: 'Hello' }], total: 1 }],
-                 *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
-                 * ]
-                 *
-                 * @see https://react-query-v3.tanstack.com/reference/QueryClient#queryclientgetqueriesdata
-                 */
-                const snapshot = queryKeys.reduce(
-                    (prev, queryKey) =>
-                        prev.concat(queryClient.getQueriesData({ queryKey })),
-                    [] as Snapshot
-                );
-
-                return snapshot;
+                return queryKeys;
             },
             getMutateWithMiddlewares: mutationFn => {
                 if (getMutateWithMiddlewares) {

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

@@ -211,34 +211,14 @@ export const useDelete = <
 
                 return params.previousData;
             },
-            getSnapshot: ({ resource }) => {
+            getQueryKeys: ({ resource }) => {
                 const queryKeys = [
                     [resource, 'getList'],
                     [resource, 'getInfiniteList'],
                     [resource, 'getMany'],
                     [resource, 'getManyReference'],
                 ];
-
-                /**
-                 * Snapshot the previous values via queryClient.getQueriesData()
-                 *
-                 * The snapshotData ref will contain an array of tuples [query key, associated data]
-                 *
-                 * @example
-                 * [
-                 *   [['posts', 'getList'], { data: [{ id: 1, title: 'Hello' }], total: 1 }],
-                 *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
-                 * ]
-                 *
-                 * @see https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientgetqueriesdata
-                 */
-                const snapshot = queryKeys.reduce(
-                    (prev, queryKey) =>
-                        prev.concat(queryClient.getQueriesData({ queryKey })),
-                    [] as Snapshot
-                );
-
-                return snapshot;
+                return queryKeys;
             },
             onSettled: (
                 result,

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

@@ -238,33 +238,14 @@ export const useDeleteMany = <
 
                 return params.ids;
             },
-            getSnapshot: ({ resource }) => {
+            getQueryKeys: ({ resource }) => {
                 const queryKeys = [
                     [resource, 'getList'],
                     [resource, 'getInfiniteList'],
                     [resource, 'getMany'],
                     [resource, 'getManyReference'],
                 ];
-
-                /**
-                 * Snapshot the previous values via queryClient.getQueriesData()
-                 *
-                 * The snapshotData ref will contain an array of tuples [query key, associated data]
-                 *
-                 * @example
-                 * [
-                 *   [['posts', 'getList'], { data: [{ id: 1, title: 'Hello' }], total: 1 }],
-                 *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
-                 * ]
-                 *
-                 * @see https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientgetqueriesdata
-                 */
-                const snapshot = queryKeys.reduce(
-                    (prev, queryKey) =>
-                        prev.concat(queryClient.getQueriesData({ queryKey })),
-                    [] as Snapshot
-                );
-                return snapshot;
+                return queryKeys;
             },
             onSettled: (
                 result,

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

@@ -43,7 +43,7 @@ describe('useMutationWithMutationMode', () => {
             updateCache: ({ data }) => {
                 return data;
             },
-            getSnapshot: () => {
+            getQueryKeys: () => {
                 return [];
             },
             ...options,

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

@@ -28,7 +28,7 @@ export const useMutationWithMutationMode = <
         mutationFn,
         getMutateWithMiddlewares,
         updateCache,
-        getSnapshot,
+        getQueryKeys,
         onUndo,
         ...mutationOptions
     } = options;
@@ -41,7 +41,28 @@ export const useMutationWithMutationMode = <
 
     const mutationFnEvent = useEvent(mutationFn);
     const updateCacheEvent = useEvent(updateCache);
-    const getSnapshotEvent = useEvent(getSnapshot);
+    const getQueryKeysEvent = useEvent(getQueryKeys);
+    const getSnapshotEvent = useEvent(
+        /**
+         * Snapshot the previous values via queryClient.getQueriesData()
+         *
+         * The snapshotData ref will contain an array of tuples [query key, associated data]
+         *
+         * @example
+         * [
+         *   [['posts', 'getList'], { data: [{ id: 1, title: 'Hello' }], total: 1 }],
+         *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
+         * ]
+         *
+         * @see https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientgetqueriesdata
+         */
+        (queryKeys: Array<QueryKey>) =>
+            queryKeys.reduce(
+                (prev, queryKey) =>
+                    prev.concat(queryClient.getQueriesData({ queryKey })),
+                [] as Snapshot
+            ) as Snapshot
+    );
     const onUndoEvent = useEvent(onUndo ?? noop);
     const getMutateWithMiddlewaresEvent = useEvent(
         getMutateWithMiddlewares ??
@@ -171,9 +192,17 @@ export const useMutationWithMutationMode = <
                     mode.current === 'optimistic' ||
                     mode.current === 'undoable'
                 ) {
-                    const [, , , onMutateResult] = args;
+                    const [, , variables, onMutateResult] = args;
 
                     // Always refetch after error or success:
+                    getQueryKeysEvent(
+                        { ...paramsRef.current, ...variables },
+                        {
+                            mutationMode: mode.current,
+                        }
+                    ).forEach(queryKey => {
+                        queryClient.invalidateQueries({ queryKey });
+                    });
                     (onMutateResult as { snapshot: Snapshot }).snapshot.forEach(
                         ([queryKey]) => {
                             queryClient.invalidateQueries({ queryKey });
@@ -243,10 +272,12 @@ export const useMutationWithMutationMode = <
         }
 
         snapshot.current = getSnapshotEvent(
-            { ...paramsRef.current, ...callTimeParams },
-            {
-                mutationMode: mode.current,
-            }
+            getQueryKeysEvent(
+                { ...paramsRef.current, ...callTimeParams },
+                {
+                    mutationMode: mode.current,
+                }
+            )
         );
 
         if (mode.current === 'pessimistic') {
@@ -390,10 +421,10 @@ export type UseMutationWithMutationModeOptions<
         options: OptionsType,
         mutationResult: TData['data'] | undefined
     ) => TData['data'];
-    getSnapshot: <OptionsType extends { mutationMode: MutationMode }>(
+    getQueryKeys: <OptionsType extends { mutationMode: MutationMode }>(
         params: Partial<TVariables>,
         options: OptionsType
-    ) => Snapshot;
+    ) => Array<QueryKey>;
     onUndo?: <OptionsType extends { mutationMode: MutationMode }>(
         params: Partial<TVariables>,
         options: OptionsType

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

@@ -17,10 +17,7 @@ import type {
     DataProvider,
     UpdateResult,
 } from '../types';
-import {
-    type Snapshot,
-    useMutationWithMutationMode,
-} from './useMutationWithMutationMode';
+import { useMutationWithMutationMode } from './useMutationWithMutationMode';
 import { useEvent } from '../util';
 
 /**
@@ -236,20 +233,7 @@ export const useUpdate = <RecordType extends RaRecord = any, ErrorType = Error>(
                 };
                 return optimisticResult;
             },
-            getSnapshot: ({ resource, ...params }) => {
-                /**
-                 * Snapshot the previous values via queryClient.getQueriesData()
-                 *
-                 * The snapshotData ref will contain an array of tuples [query key, associated data]
-                 *
-                 * @example
-                 * [
-                 *   [['posts', 'getList'], { data: [{ id: 1, title: 'Hello' }], total: 1 }],
-                 *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
-                 * ]
-                 *
-                 * @see https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientgetqueriesdata
-                 */
+            getQueryKeys: ({ resource, ...params }) => {
                 const queryKeys = [
                     [
                         resource,
@@ -261,13 +245,7 @@ export const useUpdate = <RecordType extends RaRecord = any, ErrorType = Error>(
                     [resource, 'getMany'],
                     [resource, 'getManyReference'],
                 ];
-
-                const snapshot = queryKeys.reduce(
-                    (prev, queryKey) =>
-                        prev.concat(queryClient.getQueriesData({ queryKey })),
-                    [] as Snapshot
-                );
-                return snapshot;
+                return queryKeys;
             },
             getMutateWithMiddlewares: mutationFn => {
                 if (getMutateWithMiddlewares) {

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

@@ -17,10 +17,7 @@ import type {
     DataProvider,
     UpdateManyResult,
 } from '../types';
-import {
-    type Snapshot,
-    useMutationWithMutationMode,
-} from './useMutationWithMutationMode';
+import { useMutationWithMutationMode } from './useMutationWithMutationMode';
 import { useEvent } from '../util';
 
 /**
@@ -223,34 +220,15 @@ export const useUpdateMany = <
 
                 return params?.ids;
             },
-            getSnapshot: ({ resource }) => {
-                /**
-                 * Snapshot the previous values via queryClient.getQueriesData()
-                 *
-                 * The snapshotData ref will contain an array of tuples [query key, associated data]
-                 *
-                 * @example
-                 * [
-                 *   [['posts', 'getList'], { data: [{ id: 1, title: 'Hello' }], total: 1 }],
-                 *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
-                 * ]
-                 *
-                 * @see https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientgetqueriesdata
-                 */
+            getQueryKeys: ({ resource }) => {
                 const queryKeys = [
                     [resource, 'getOne'],
                     [resource, 'getList'],
                     [resource, 'getInfiniteList'],
                     [resource, 'getMany'],
                     [resource, 'getManyReference'],
                 ];
-
-                const snapshot = queryKeys.reduce(
-                    (prev, queryKey) =>
-                        prev.concat(queryClient.getQueriesData({ queryKey })),
-                    [] as Snapshot
-                );
-                return snapshot;
+                return queryKeys;
             },
             getMutateWithMiddlewares: mutationFn => {
                 if (getMutateWithMiddlewares) {