Fix useDelete mutationMode cannot be controlled

Author: djhi

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { screen, render, waitFor } from '@testing-library/react';
+import { screen, render, waitFor, fireEvent } from '@testing-library/react';
 import expect from 'expect';
 
 import { CoreAdminContext } from '../core';
@@ -20,6 +20,7 @@ import {
     SuccessCase as SuccessCaseUndoable,
 } from './useDelete.undoable.stories';
 import { QueryClient } from '@tanstack/react-query';
+import { Basic } from './useDelete.stories';
 
 describe('useDelete', () => {
     it('returns a callback that can be used with deleteOne arguments', async () => {
@@ -449,6 +450,31 @@ describe('useDelete', () => {
                 { timeout: 4000 }
             );
         });
+        it('allows to control the mutation mode', async () => {
+            jest.spyOn(console, 'error').mockImplementation(() => {});
+            render(<Basic timeout={10} />);
+            // Delete the first post in pessimistic mode
+            await screen.findByText('Hello');
+            await screen.findByText('World');
+            fireEvent.click(await screen.findByText('Delete post'));
+            await screen.findByText('World');
+            // Wait for the post to be deleted
+            await waitFor(() => {
+                expect(screen.queryByText('Hello')).toBeNull();
+            });
+
+            fireEvent.click(await screen.findByText('undoable'));
+            fireEvent.click(await screen.findByText('Increment id'));
+            // Delete the second post in undoable mode
+            fireEvent.click(await screen.findByText('Delete post'));
+            // Check the optimistic result
+            await waitFor(() => {
+                expect(screen.queryByText('World')).toBeNull();
+            });
+            // As we haven't confirmed the undoable mutation, refetching the post should return nothing
+            fireEvent.click(await screen.findByText('Refetch'));
+            await screen.findByText('World');
+        });
     });
 
     describe('query cache', () => {

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

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { QueryClient, useIsMutating } from '@tanstack/react-query';
+
+import { CoreAdminContext } from '../core';
+import { useDelete } from './useDelete';
+import { useGetList } from './useGetList';
+import { MutationMode } from '../types';
+
+export default { title: 'ra-core/dataProvider/useDelete' };
+
+export const Basic = ({ timeout = 1000 }: { timeout?: number }) => {
+    const posts = [
+        { id: 1, title: 'Hello' },
+        { id: 2, title: 'World' },
+    ];
+    const dataProvider = {
+        getList: (resource, params) => {
+            console.log('getList', resource, params);
+            return Promise.resolve({
+                data: posts,
+                total: posts.length,
+            });
+        },
+        delete: (resource, params) => {
+            console.log('delete', resource, params);
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    const index = posts.findIndex(p => p.id === params.id);
+                    const deletedPost = posts.splice(index, 1);
+                    resolve({ data: deletedPost });
+                }, 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 [deleteOne, { isPending }] = useDelete(
+        'posts',
+        {},
+        {
+            mutationMode,
+            onSuccess: () => setSuccess('success'),
+        }
+    );
+    const handleClick = () => {
+        deleteOne('posts', {
+            id,
+            previousData: { id, title: 'Hello' },
+        });
+    };
+    return (
+        <>
+            <ul>{data?.map(post => <li key={post.id}>{post.title}</li>)}</ul>
+            <div>
+                <button onClick={handleClick} disabled={isPending}>
+                    Delete post
+                </button>
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+                <button onClick={() => setId(prev => prev + 1)}>
+                    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/useDelete.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 useDelete = <
     const { id, previousData } = params;
     const { mutationMode = 'pessimistic', ...mutationOptions } = options;
     const mode = useRef<MutationMode>(mutationMode);
+    useEffect(() => {
+        mode.current = mutationMode;
+    }, [mutationMode]);
     const paramsRef = useRef<Partial<DeleteParams<RecordType>>>(params);
     const snapshot = useRef<Snapshot>([]);
     const hasCallTimeOnError = useRef(false);