Fix useCreate mutationMode cannot be controlled

Author: djhi

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

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
 import expect from 'expect';
 
 import { RaRecord } from '../types';
 import { testDataProvider } from './testDataProvider';
 import { useCreate } from './useCreate';
 import { useGetList } from './useGetList';
 import { CoreAdminContext } from '../core';
+import { Basic } from './useCreate.stories';
 import {
     ErrorCase as ErrorCasePessimistic,
     SuccessCase as SuccessCasePessimistic,
@@ -334,6 +335,23 @@ describe('useCreate', () => {
                 expect(screen.queryByText('mutating')).toBeNull();
             });
         });
+        it('allows to control the mutation mode', async () => {
+            jest.spyOn(console, 'error').mockImplementation(() => {});
+            render(<Basic timeout={10} />);
+            // Create a post in pessimistic mode
+            fireEvent.click(await screen.findByText('Create post'));
+            await screen.findByText('Hello World 2');
+            fireEvent.click(await screen.findByText('undoable'));
+            fireEvent.click(await screen.findByText('Increment id'));
+            await screen.findByText('nothing yet');
+            // Create a post in undoable mode
+            fireEvent.click(await screen.findByText('Create post'));
+            // Check the optimistic result
+            await screen.findByText('Hello World 3');
+            // As we haven't confirmed the undoable mutation, refetching the post should return nothing
+            fireEvent.click(await screen.findByText('Refetch'));
+            await screen.findByText('nothing yet');
+        });
     });
 
     describe('middlewares', () => {

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

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { QueryClient, useIsMutating } from '@tanstack/react-query';
+
+import { CoreAdminContext } from '../core';
+import { useCreate } from './useCreate';
+import { useGetOne } from './useGetOne';
+import { MutationMode } from '../types';
+
+export default { title: 'ra-core/dataProvider/useCreate' };
+
+export const Basic = ({ timeout = 1000 }: { timeout?: number }) => {
+    const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
+    const dataProvider = {
+        getOne: (resource, params) => {
+            return new Promise((resolve, reject) => {
+                const data = posts.find(p => p.id === params.id);
+                setTimeout(() => {
+                    if (!data) {
+                        reject(new Error('nothing yet'));
+                    }
+                    resolve({ data });
+                }, timeout);
+            });
+        },
+        create: (resource, params) => {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    posts.push(params.data);
+                    resolve({ data: params.data });
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: { retry: false },
+                        mutations: { retry: false },
+                    },
+                })
+            }
+            dataProvider={dataProvider}
+        >
+            <SuccessCore />
+        </CoreAdminContext>
+    );
+};
+
+Basic.args = {
+    timeout: 1000,
+};
+
+Basic.argTypes = {
+    timeout: {
+        control: {
+            type: 'number',
+        },
+    },
+};
+
+const SuccessCore = () => {
+    const isMutating = useIsMutating();
+    const [success, setSuccess] = useState<string>();
+    const [id, setId] = useState<number>(2);
+    const [mutationMode, setMutationMode] =
+        useState<MutationMode>('pessimistic');
+    const { data, error, refetch } = useGetOne('posts', { id });
+    const [create, { isPending }] = useCreate(
+        'posts',
+        {},
+        {
+            mutationMode,
+            onSuccess: () => {
+                setSuccess('success');
+            },
+        }
+    );
+    const handleClick = () => {
+        create('posts', {
+            data: { id, title: `Hello World ${id}` },
+        });
+    };
+    return (
+        <>
+            {error ? (
+                <p>{error.message}</p>
+            ) : (
+                <dl>
+                    <dt>id</dt>
+                    <dd>{data?.id}</dd>
+                    <dt>title</dt>
+                    <dd>{data?.title}</dd>
+                    <dt>author</dt>
+                    <dd>{data?.author}</dd>
+                </dl>
+            )}
+            <div>
+                <button onClick={handleClick} disabled={isPending}>
+                    Create 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/useCreate.ts

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import {
     useMutation,
     UseMutationOptions,
@@ -96,7 +96,11 @@ export const useCreate = <
         getMutateWithMiddlewares,
         ...mutationOptions
     } = options;
+
     const mode = useRef<MutationMode>(mutationMode);
+    useEffect(() => {
+        mode.current = mutationMode;
+    }, [mutationMode]);
 
     const paramsRef =
         useRef<Partial<CreateParams<Partial<RecordType>>>>(params);