story and test for useCreate

Author: slax57

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

@@ -26,7 +26,12 @@ import {
     WithMiddlewaresSuccess as WithMiddlewaresSuccessUndoable,
     WithMiddlewaresError as WithMiddlewaresErrorUndoable,
 } from './useCreate.undoable.stories';
-import { Middleware, MutationMode, Params } from './useCreate.stories';
+import {
+    Middleware,
+    MutationMode,
+    Params,
+    InvalidateList,
+} from './useCreate.stories';
 
 describe('useCreate', () => {
     it('returns a callback that can be used with create arguments', async () => {
@@ -627,4 +632,15 @@ describe('useCreate', () => {
             await screen.findByText('Bazinga');
         });
     });
+
+    it('invalidates getList query when dataProvider resolves in undoable mode', async () => {
+        render(<InvalidateList mutationMode="undoable" />);
+        fireEvent.change(await screen.findByLabelText('title'), {
+            target: { value: 'New Post' },
+        });
+        fireEvent.click(screen.getByText('Save'));
+        await screen.findByText('resources.posts.notifications.created');
+        fireEvent.click(screen.getByText('Close'));
+        await screen.findByText('3: New Post');
+    });
 });

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { QueryClient, useIsMutating } from '@tanstack/react-query';
+import fakeRestDataProvider from 'ra-data-fakerest';
 
 import { CoreAdmin, CoreAdminContext, Resource } from '../core';
 import { useCreate } from './useCreate';
@@ -383,3 +384,70 @@ const RefreshButton = () => {
         </button>
     );
 };
+
+export const InvalidateList = ({
+    mutationMode,
+}: {
+    mutationMode: MutationModeType;
+}) => {
+    const dataProvider = fakeRestDataProvider(
+        {
+            posts: [
+                { id: 1, title: 'Hello' },
+                { id: 2, title: 'World' },
+            ],
+        },
+        process.env.NODE_ENV !== 'test',
+        process.env.NODE_ENV === 'test' ? 10 : 1000
+    );
+
+    return (
+        <TestMemoryRouter initialEntries={['/posts/create']}>
+            <CoreAdmin dataProvider={dataProvider}>
+                <Resource
+                    name="posts"
+                    create={
+                        <CreateBase mutationMode={mutationMode}>
+                            <Form>
+                                {mutationMode !== 'pessimistic' && (
+                                    <TextInput source="id" defaultValue={3} />
+                                )}
+                                <TextInput source="title" />
+                                <button type="submit">Save</button>
+                            </Form>
+                        </CreateBase>
+                    }
+                    list={
+                        <ListBase loading={<p>Loading...</p>}>
+                            <RecordsIterator
+                                render={(record: any) => (
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            gap: '8px',
+                                            alignItems: 'center',
+                                        }}
+                                    >
+                                        {record.id}: {record.title}
+                                    </div>
+                                )}
+                            />
+                            <Notification />
+                        </ListBase>
+                    }
+                />
+            </CoreAdmin>
+        </TestMemoryRouter>
+    );
+};
+InvalidateList.args = {
+    mutationMode: 'undoable',
+};
+InvalidateList.argTypes = {
+    mutationMode: {
+        control: {
+            type: 'select',
+        },
+        options: ['pessimistic', 'optimistic', 'undoable'],
+    },
+};