Fix useDeleteMany mutationMode cannot be controlled

Author: djhi

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { waitFor, render } from '@testing-library/react';
+import { waitFor, render, screen, fireEvent } from '@testing-library/react';
 import expect from 'expect';
 
 import { CoreAdminContext } from '../core';
 import { testDataProvider } from './testDataProvider';
 import { useDeleteMany } from './useDeleteMany';
 import { QueryClient } from '@tanstack/react-query';
+import { Basic } from './useDeleteMany.stories';
 
 describe('useDeleteMany', () => {
     it('returns a callback that can be used with update arguments', async () => {
@@ -263,4 +264,36 @@ describe('useDeleteMany', () => {
             });
         });
     });
+
+    it('allows to control the mutation mode', async () => {
+        jest.spyOn(console, 'log').mockImplementation(() => {});
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+        render(<Basic timeout={10} />);
+        await screen.findByText('Hello World 1');
+        await screen.findByText('Hello World 2');
+        await screen.findByText('Hello World 3');
+        await screen.findByText('Hello World 4');
+
+        // Delete the first 2 posts in pessimistic mode
+        fireEvent.click(await screen.findByText('Delete posts'));
+        // Wait for the post to be deleted
+        await waitFor(() => {
+            expect(screen.queryByText('Hello World 1')).toBeNull();
+            expect(screen.queryByText('Hello World 2')).toBeNull();
+        });
+
+        fireEvent.click(await screen.findByText('undoable'));
+        fireEvent.click(await screen.findByText('Increment id'));
+        // Delete the 2 next posts in undoable mode
+        fireEvent.click(await screen.findByText('Delete posts'));
+        // Check the optimistic result
+        await waitFor(() => {
+            expect(screen.queryByText('Hello World 3')).toBeNull();
+            expect(screen.queryByText('Hello World 4')).toBeNull();
+        });
+        // As we haven't confirmed the undoable mutation, refetching the post should return nothing
+        fireEvent.click(await screen.findByText('Refetch'));
+        await screen.findByText('Hello World 3');
+        await screen.findByText('Hello World 4');
+    });
 });

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

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { QueryClient, useIsMutating } from '@tanstack/react-query';
+
+import { CoreAdminContext } from '../core';
+import { useGetList } from './useGetList';
+import { MutationMode } from '../types';
+import { useDeleteMany } from './useDeleteMany';
+
+export default { title: 'ra-core/dataProvider/useDeleteMany' };
+
+export const Basic = ({ timeout = 1000 }: { timeout?: number }) => {
+    const posts = [
+        { id: 1, title: 'Hello World 1' },
+        { id: 2, title: 'Hello World 2' },
+        { id: 3, title: 'Hello World 3' },
+        { id: 4, title: 'Hello World 4' },
+    ];
+    const dataProvider = {
+        getList: (resource, params) => {
+            console.log('getList', resource, params);
+            return Promise.resolve({
+                data: posts,
+                total: posts.length,
+            });
+        },
+        deleteMany: (resource, params) => {
+            console.log('deleteMany', resource, params);
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    for (const id of params.ids) {
+                        const index = posts.findIndex(p => p.id === id);
+                        posts.splice(index, 1);
+                    }
+                    resolve({ data: params.ids });
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={new QueryClient()}
+            dataProvider={dataProvider}
+        >
+            <SuccessCore />
+        </CoreAdminContext>
+    );
+};
+
+const SuccessCore = () => {
+    const isMutating = useIsMutating();
+    const [success, setSuccess] = useState<string>();
+    const { data, refetch } = useGetList('posts');
+    const [id, setId] = useState<number>(1);
+    const [mutationMode, setMutationMode] =
+        useState<MutationMode>('pessimistic');
+    const [deleteMany, { isPending }] = useDeleteMany('posts', undefined, {
+        mutationMode,
+        onSuccess: () => setSuccess('success'),
+    });
+    const handleClick = () => {
+        deleteMany('posts', {
+            ids: [id, id + 1],
+        });
+    };
+    return (
+        <>
+            <ul>{data?.map(post => <li key={post.id}>{post.title}</li>)}</ul>
+            <div>
+                <button onClick={handleClick} disabled={isPending}>
+                    Delete posts
+                </button>
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+                <button onClick={() => setId(prev => prev + 2)}>
+                    Increment id
+                </button>
+                <button onClick={() => setMutationMode('pessimistic')}>
+                    pessimistic
+                </button>
+                <button onClick={() => setMutationMode('optimistic')}>
+                    optimistic
+                </button>
+                <button onClick={() => setMutationMode('undoable')}>
+                    undoable
+                </button>
+            </div>
+            {success && <div>{success}</div>}
+            {isMutating !== 0 && <div>mutating</div>}
+        </>
+    );
+};

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

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import {
     useMutation,
     useQueryClient,
@@ -93,6 +93,9 @@ export const useDeleteMany = <
     const { ids } = params;
     const { mutationMode = 'pessimistic', ...mutationOptions } = options;
     const mode = useRef<MutationMode>(mutationMode);
+    useEffect(() => {
+        mode.current = mutationMode;
+    }, [mutationMode]);
     const paramsRef = useRef<Partial<DeleteManyParams<RecordType>>>({});
     const snapshot = useRef<Snapshot>([]);
     const hasCallTimeOnError = useRef(false);