Add support for mutationMode in useCreate #10530

djhi · 2025-02-19T14:26:20Z

Problem

We currently don't support optimistic and undoable mutationMode in useCreate, which prevent us from supporting offline first applications.

Solution

Given that the new record identifier is generated client side, we can support optimistic and undoable mutationMode.

How To Test

Additional Checks

The PR targets master for a bugfix, or next for a feature
The PR includes unit tests (if not possible, describe why)
The PR includes one or several stories (if not possible, describe why)
The documentation is up to date

Also, please make sure to read the contributing guidelines.

erwanMarmelab · 2025-02-21T17:00:28Z

Thank you for the full / nice doc and tests

guilbill · 2025-02-24T10:36:34Z

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

+            mode.current = mutationMode;
+        }
+
+        if (returnPromise && mode.current !== 'pessimistic') {


Is it needed ? as the returnPromise is defined base on the mode

react-admin/packages/ra-core/src/controller/create/useCreateController.ts

Line 147 in 35bf17e

returnPromise: mutationMode === 'pessimistic',

In the controller yes, but this is useCreate which can be used independently

guilbill · 2025-02-24T10:39:46Z

packages/ra-ui-materialui/src/button/CreateButton.stories.tsx

@@ -50,6 +50,7 @@ const AccessControlAdmin = ({ queryClient }: { queryClient: QueryClient }) => {
    const [resourcesAccesses, setResourcesAccesses] = React.useState({
        'books.list': true,
        'books.create': false,
+        'books.delete': false,


I don't get why we need this, is it a fix ?

It's a fix to avoid error messages in the tests output. Just a cleanup really

guilbill · 2025-02-24T10:42:15Z

docs/Create.md

+
+- `pessimistic`: The mutation is passed to the dataProvider first. When the dataProvider returns successfully, the mutation is applied locally, and the side effects are executed. 
+- `optimistic`: The mutation is applied locally and the side effects are executed immediately. Then the mutation is passed to the dataProvider. If the dataProvider returns successfully, nothing happens (as the mutation was already applied locally). If the dataProvider returns in error, the page is refreshed and an error notification is shown. 
+- `undoable` (default): The mutation is applied locally and the side effects are executed immediately. Then a notification is shown with an undo button. If the user clicks on undo, the mutation is never sent to the dataProvider, and the page is refreshed. Otherwise, after a 5 seconds delay, the mutation is passed to the dataProvider. If the dataProvider returns successfully, nothing happens (as the mutation was already applied locally). If the dataProvider returns in error, the page is refreshed and an error notification is shown.


The default one is 'pessimistic' if I'm right

guilbill · 2025-02-24T10:48:29Z

docs/useCreate.md

+
+```jsx
+// In optimistic mode, ids must be generated client side
+const id = uuid.v4();


I was wondering if it was common to do it like this, generating the id client side. I understand the why, but I'm not sure on the how we solve this. Couldn't we have a mechanism witch a temporary id, replacing it as the data is fetched ?

Yes it is common in offline/local first scenarios. A temporary mechanism would make handling relationships such as those with ReferenceOneInput or ReferenceManyToManyInput a nightmare. This is a good starting point and if we do find a way to use temporary id, we can add it later.

guilbill

Tests and documentation are very clean! thanks for that, although, some errors in the doc, and I have some question about the optimistic mode and the fact that we generate the id client side.

slax57 · 2025-02-26T09:44:29Z

docs/useCreate.md

+```tsx
+const notify = useNotify();
+const redirect = useRedirect();
+const like = { postId: record.id };


nipitck: the like should have an id if you want to use mutationMode: 'optimistic'

slax57 · 2025-02-26T09:55:00Z

docs/useCreate.md

+const [create] = useCreate(
+    'posts',
+    { id: record.id, data: { isPublished: true } },
+    { returnPromise: true }
+);
+const [create] = useCreate('auditLogs');


You can't declare two variables called create 🤣

slax57 · 2025-02-26T10:07:00Z

packages/react-admin/src/Admin.tsx

@@ -115,6 +115,7 @@ export const Admin = (props: AdminProps) => {
        loginPage,
        notification,
        queryClient,
+        QueryClientProvider,


shouldn't we document this new prop?

This was commited by mistake

slax57 · 2025-02-26T10:13:49Z

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

+            act(() => {
+                screen.getByText('Create post').click();
+            });


question: why do you need act? 🤔

copy/pasted from useUpdate

I confirm it's unnecessary

slax57 · 2025-02-26T10:22:12Z

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

+                res && res.pages
+                    ? {
+                          ...res,
+                          pages: res.pages.map(page => ({
+                              ...page,
+                              data: updateColl(page.data),
+                          })),
+                      }
+                    : res,


Are you adding the new record to all pages of the infinite query? Won't that lead to the record appearing multiple times in the list? 🤔

Yes, we can probably be smarter here and only add it at the top. Same for the list actually where we should only add it to the current page

slax57 · 2025-02-26T10:23:38Z

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

+        queryClient.setQueriesData(
+            { queryKey: [resource, 'getList'] },
+            (res: GetListResult) =>
+                res && res.data ? { ...res, data: updateColl(res.data) } : res,
+            { updatedAt }
+        );


shouldn't the total be updated to total + 1?

slax57 · 2025-02-26T10:24:08Z

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

+        queryClient.setQueriesData(
+            { queryKey: [resource, 'getManyReference'] },
+            (res: GetListResult) =>
+                res && res.data
+                    ? { data: updateColl(res.data), total: res.total }
+                    : res,
+            { updatedAt }
+        );


shouldn't the total be updated to total + 1?

djhi added 4 commits February 19, 2025 14:58

Add support for mutationMode in useCreate

ce29f7d

Fix SelectInput test

15be9f9

Return the mutationMode in useCreateController result

0ea9a43

Update create documentation

675881b

djhi added the RFR Ready For Review label Feb 19, 2025

vercel bot deployed to Preview – react-admin-storybook February 19, 2025 14:27 View deployment

guilbill self-requested a review February 24, 2025 08:56

guilbill changed the base branch from master to next February 24, 2025 08:57

Ensure validation errors are shown in optimistic/undoable modes

35bf17e

vercel bot deployed to Preview – react-admin-storybook February 24, 2025 09:38 View deployment

guilbill reviewed Feb 24, 2025

View reviewed changes

guilbill requested changes Feb 24, 2025

View reviewed changes

Improve documentation [no-ci]

997a4a0

vercel bot deployed to Preview – react-admin-storybook February 24, 2025 12:22 View deployment

djhi mentioned this pull request Feb 24, 2025

Add support for offline/local first applications #10545

Open

4 tasks

slax57 self-requested a review February 26, 2025 09:34

slax57 requested changes Feb 26, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for mutationMode in useCreate #10530

Add support for mutationMode in useCreate #10530

djhi commented Feb 19, 2025

erwanMarmelab commented Feb 21, 2025

guilbill Feb 24, 2025

djhi Feb 24, 2025

guilbill Feb 24, 2025

djhi Feb 24, 2025

guilbill Feb 24, 2025

guilbill Feb 24, 2025

djhi Feb 24, 2025 •

edited

Loading

guilbill left a comment

slax57 Feb 26, 2025

slax57 Feb 26, 2025

slax57 Feb 26, 2025

djhi Feb 26, 2025

slax57 Feb 26, 2025

djhi Feb 26, 2025

djhi Feb 26, 2025

slax57 Feb 26, 2025

djhi Feb 26, 2025

slax57 Feb 26, 2025

slax57 Feb 26, 2025

Add support for mutationMode in useCreate #10530

Are you sure you want to change the base?

Add support for mutationMode in useCreate #10530

Conversation

djhi commented Feb 19, 2025

Problem

Solution

How To Test

Additional Checks

erwanMarmelab commented Feb 21, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

djhi Feb 24, 2025 • edited Loading

Choose a reason for hiding this comment

guilbill left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

djhi Feb 24, 2025 •

edited

Loading