Skip to content

Commit f58fbbc

Browse files
djhidjhi
committed
Make all mutations react to their declaration time options changes
1 parent 4772050 commit f58fbbc

15 files changed

Lines changed: 1156 additions & 15 deletions

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

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
2-
import { render, waitFor, screen } from '@testing-library/react';
2+
import { render, waitFor, screen, fireEvent } from '@testing-library/react';
33
import expect from 'expect';
4+
import { QueryClient, useMutationState } from '@tanstack/react-query';
45

56
import { RaRecord } from '../types';
67
import { testDataProvider } from './testDataProvider';
@@ -25,7 +26,7 @@ import {
2526
WithMiddlewaresSuccess as WithMiddlewaresSuccessUndoable,
2627
WithMiddlewaresError as WithMiddlewaresErrorUndoable,
2728
} from './useCreate.undoable.stories';
28-
import { QueryClient, useMutationState } from '@tanstack/react-query';
29+
import { MutationMode, Params } from './useCreate.stories';
2930

3031
describe('useCreate', () => {
3132
it('returns a callback that can be used with create arguments', async () => {
@@ -76,6 +77,44 @@ describe('useCreate', () => {
7677
});
7778
});
7879

80+
it('uses the latest declaration time mutationMode', async () => {
81+
jest.spyOn(console, 'error').mockImplementation(() => {});
82+
// This story uses the pessimistic mode by default
83+
render(<MutationMode />);
84+
fireEvent.click(screen.getByText('Change mutation mode to optimistic'));
85+
fireEvent.click(screen.getByText('Create post'));
86+
// Should display the optimistic result right away if the change was handled
87+
await waitFor(() => {
88+
expect(screen.queryByText('success')).not.toBeNull();
89+
expect(screen.queryByText('Hello World')).not.toBeNull();
90+
expect(screen.queryByText('mutating')).not.toBeNull();
91+
});
92+
await waitFor(() => {
93+
expect(screen.queryByText('mutating')).toBeNull();
94+
});
95+
expect(screen.queryByText('success')).not.toBeNull();
96+
expect(screen.queryByText('Hello World')).not.toBeNull();
97+
});
98+
99+
it('uses the latest declaration time params', async () => {
100+
jest.spyOn(console, 'error').mockImplementation(() => {});
101+
// This story sends the Hello World title by default
102+
render(<Params />);
103+
fireEvent.click(screen.getByText('Change params'));
104+
fireEvent.click(screen.getByText('Create post'));
105+
// Should have changed the title to Goodbye World
106+
await waitFor(() => {
107+
expect(screen.queryByText('success')).not.toBeNull();
108+
expect(screen.queryByText('Goodbye World')).not.toBeNull();
109+
expect(screen.queryByText('mutating')).not.toBeNull();
110+
});
111+
await waitFor(() => {
112+
expect(screen.queryByText('mutating')).toBeNull();
113+
});
114+
expect(screen.queryByText('success')).not.toBeNull();
115+
expect(screen.queryByText('Goodbye World')).not.toBeNull();
116+
});
117+
79118
it('uses call time params over hook time params', async () => {
80119
const dataProvider = testDataProvider({
81120
create: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),

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

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
import * as React from 'react';
2+
import { QueryClient, useIsMutating } from '@tanstack/react-query';
3+
4+
import { CoreAdminContext } from '../core';
5+
import { useCreate } from './useCreate';
6+
import { useGetOne } from './useGetOne';
7+
import type { MutationMode as MutationModeType } from '../types';
8+
9+
export default { title: 'ra-core/dataProvider/useCreate' };
10+
11+
export const MutationMode = ({ timeout = 1000 }) => {
12+
const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
13+
const dataProvider = {
14+
getOne: (resource, params) => {
15+
return new Promise((resolve, reject) => {
16+
const data = posts.find(p => p.id === params.id);
17+
setTimeout(() => {
18+
if (!data) {
19+
reject(new Error('nothing yet'));
20+
}
21+
resolve({ data });
22+
}, timeout);
23+
});
24+
},
25+
create: (resource, params) => {
26+
return new Promise(resolve => {
27+
setTimeout(() => {
28+
posts.push(params.data);
29+
resolve({ data: params.data });
30+
}, timeout);
31+
});
32+
},
33+
} as any;
34+
return (
35+
<CoreAdminContext
36+
queryClient={
37+
new QueryClient({
38+
defaultOptions: {
39+
queries: { retry: false },
40+
mutations: { retry: false },
41+
},
42+
})
43+
}
44+
dataProvider={dataProvider}
45+
>
46+
<MutationModeCore />
47+
</CoreAdminContext>
48+
);
49+
};
50+
51+
const MutationModeCore = () => {
52+
const isMutating = useIsMutating();
53+
const [success, setSuccess] = React.useState<string>();
54+
const [mutationMode, setMutationMode] =
55+
React.useState<MutationModeType>('pessimistic');
56+
57+
const {
58+
isPending: isPendingGetOne,
59+
data,
60+
error,
61+
refetch,
62+
} = useGetOne('posts', { id: 2 });
63+
const [create, { isPending }] = useCreate(
64+
'posts',
65+
{
66+
data: { id: 2, title: 'Hello World' },
67+
},
68+
{
69+
mutationMode,
70+
onSuccess: () => setSuccess('success'),
71+
}
72+
);
73+
const handleClick = () => {
74+
create();
75+
};
76+
return (
77+
<>
78+
{isPendingGetOne ? (
79+
<p>Loading...</p>
80+
) : error ? (
81+
<p>{error.message}</p>
82+
) : (
83+
<dl>
84+
<dt>id</dt>
85+
<dd>{data?.id}</dd>
86+
<dt>title</dt>
87+
<dd>{data?.title}</dd>
88+
<dt>author</dt>
89+
<dd>{data?.author}</dd>
90+
</dl>
91+
)}
92+
<div>
93+
<button onClick={handleClick} disabled={isPending}>
94+
Create post
95+
</button>
96+
&nbsp;
97+
<button
98+
onClick={() => setMutationMode('optimistic')}
99+
disabled={isPending}
100+
>
101+
Change mutation mode to optimistic
102+
</button>
103+
&nbsp;
104+
<button onClick={() => refetch()}>Refetch</button>
105+
</div>
106+
{success && <div>{success}</div>}
107+
{isMutating !== 0 && <div>mutating</div>}
108+
</>
109+
);
110+
};
111+
112+
export const Params = ({ timeout = 1000 }) => {
113+
const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
114+
const dataProvider = {
115+
getOne: (resource, params) => {
116+
return new Promise((resolve, reject) => {
117+
const data = posts.find(p => p.id === params.id);
118+
setTimeout(() => {
119+
if (!data) {
120+
reject(new Error('nothing yet'));
121+
}
122+
resolve({ data });
123+
}, timeout);
124+
});
125+
},
126+
create: (resource, params) => {
127+
return new Promise(resolve => {
128+
setTimeout(() => {
129+
posts.push(params.data);
130+
resolve({ data: params.data });
131+
}, timeout);
132+
});
133+
},
134+
} as any;
135+
return (
136+
<CoreAdminContext
137+
queryClient={
138+
new QueryClient({
139+
defaultOptions: {
140+
queries: { retry: false },
141+
mutations: { retry: false },
142+
},
143+
})
144+
}
145+
dataProvider={dataProvider}
146+
>
147+
<ParamsCore />
148+
</CoreAdminContext>
149+
);
150+
};
151+
152+
const ParamsCore = () => {
153+
const isMutating = useIsMutating();
154+
const [success, setSuccess] = React.useState<string>();
155+
const [params, setParams] = React.useState<any>({ title: 'Hello World' });
156+
157+
const {
158+
isPending: isPendingGetOne,
159+
data,
160+
error,
161+
refetch,
162+
} = useGetOne('posts', { id: 2 });
163+
const [create, { isPending }] = useCreate(
164+
'posts',
165+
{
166+
data: { id: 2, ...params },
167+
},
168+
{
169+
mutationMode: 'optimistic',
170+
onSuccess: () => setSuccess('success'),
171+
}
172+
);
173+
const handleClick = () => {
174+
create();
175+
};
176+
return (
177+
<>
178+
{isPendingGetOne ? (
179+
<p>Loading...</p>
180+
) : error ? (
181+
<p>{error.message}</p>
182+
) : (
183+
<dl>
184+
<dt>id</dt>
185+
<dd>{data?.id}</dd>
186+
<dt>title</dt>
187+
<dd>{data?.title}</dd>
188+
<dt>author</dt>
189+
<dd>{data?.author}</dd>
190+
</dl>
191+
)}
192+
<div>
193+
<button onClick={handleClick} disabled={isPending}>
194+
Create post
195+
</button>
196+
&nbsp;
197+
<button
198+
onClick={() => setParams({ title: 'Goodbye World' })}
199+
disabled={isPending}
200+
>
201+
Change params
202+
</button>
203+
&nbsp;
204+
<button onClick={() => refetch()}>Refetch</button>
205+
</div>
206+
{success && <div>{success}</div>}
207+
{isMutating !== 0 && <div>mutating</div>}
208+
</>
209+
);
210+
};

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useMemo, useRef } from 'react';
1+
import { useEffect, useMemo, useRef } from 'react';
22
import {
33
useMutation,
44
UseMutationOptions,
@@ -97,9 +97,16 @@ export const useCreate = <
9797
...mutationOptions
9898
} = options;
9999
const mode = useRef<MutationMode>(mutationMode);
100+
useEffect(() => {
101+
mode.current = mutationMode;
102+
}, [mutationMode]);
100103

101104
const paramsRef =
102105
useRef<Partial<CreateParams<Partial<RecordType>>>>(params);
106+
useEffect(() => {
107+
paramsRef.current = params;
108+
}, [params]);
109+
103110
const snapshot = useRef<Snapshot>([]);
104111

105112
// Ref that stores the mutation with middlewares to avoid losing them if the calling component is unmounted

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

Lines changed: 76 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
2-
import { screen, render, waitFor } from '@testing-library/react';
2+
import { screen, render, waitFor, fireEvent } from '@testing-library/react';
33
import expect from 'expect';
4+
import { QueryClient, useMutationState } from '@tanstack/react-query';
45

56
import { CoreAdminContext } from '../core';
67
import { RaRecord } from '../types';
@@ -19,7 +20,7 @@ import {
1920
ErrorCase as ErrorCaseUndoable,
2021
SuccessCase as SuccessCaseUndoable,
2122
} from './useDelete.undoable.stories';
22-
import { QueryClient, useMutationState } from '@tanstack/react-query';
23+
import { MutationMode, Params } from './useDelete.stories';
2324

2425
describe('useDelete', () => {
2526
it('returns a callback that can be used with deleteOne arguments', async () => {
@@ -75,6 +76,79 @@ describe('useDelete', () => {
7576
});
7677
});
7778

79+
it('uses the latest declaration time mutationMode', async () => {
80+
jest.spyOn(console, 'log').mockImplementation(() => {});
81+
// This story uses the pessimistic mode by default
82+
render(<MutationMode />);
83+
await waitFor(() => new Promise(resolve => setTimeout(resolve, 0)));
84+
fireEvent.click(screen.getByText('Change mutation mode to optimistic'));
85+
fireEvent.click(screen.getByText('Delete first post'));
86+
// Should display the optimistic result right away if the change was handled
87+
await waitFor(() => {
88+
expect(screen.queryByText('success')).not.toBeNull();
89+
expect(screen.queryByText('Hello')).toBeNull();
90+
expect(screen.queryByText('World')).not.toBeNull();
91+
expect(screen.queryByText('mutating')).not.toBeNull();
92+
});
93+
await waitFor(() => {
94+
expect(screen.queryByText('success')).not.toBeNull();
95+
expect(screen.queryByText('Hello')).toBeNull();
96+
expect(screen.queryByText('World')).not.toBeNull();
97+
expect(screen.queryByText('mutating')).toBeNull();
98+
});
99+
});
100+
101+
it('uses the latest declaration time params', async () => {
102+
jest.spyOn(console, 'log').mockImplementation(() => {});
103+
const posts = [
104+
{ id: 1, title: 'Hello' },
105+
{ id: 2, title: 'World' },
106+
];
107+
const dataProvider = {
108+
getList: (resource, params) => {
109+
console.log('getList', resource, params);
110+
return Promise.resolve({
111+
data: posts,
112+
total: posts.length,
113+
});
114+
},
115+
delete: jest.fn((resource, params) => {
116+
console.log('delete', resource, params);
117+
return new Promise(resolve => {
118+
setTimeout(() => {
119+
const index = posts.findIndex(p => p.id === params.id);
120+
posts.splice(index, 1);
121+
resolve({ data: params.previousData });
122+
}, 1000);
123+
});
124+
}),
125+
} as any;
126+
// This story has no meta by default
127+
render(<Params dataProvider={dataProvider} />);
128+
await waitFor(() => new Promise(resolve => setTimeout(resolve, 0)));
129+
fireEvent.click(screen.getByText('Change params'));
130+
fireEvent.click(screen.getByText('Delete first post'));
131+
// Should display the optimistic result right away if the change was handled
132+
await waitFor(() => {
133+
expect(screen.queryByText('success')).not.toBeNull();
134+
expect(screen.queryByText('Hello')).toBeNull();
135+
expect(screen.queryByText('World')).not.toBeNull();
136+
expect(screen.queryByText('mutating')).not.toBeNull();
137+
});
138+
await waitFor(() => {
139+
expect(screen.queryByText('success')).not.toBeNull();
140+
expect(screen.queryByText('Hello')).toBeNull();
141+
expect(screen.queryByText('World')).not.toBeNull();
142+
expect(screen.queryByText('mutating')).toBeNull();
143+
});
144+
145+
expect(dataProvider.delete).toHaveBeenCalledWith('posts', {
146+
id: 1,
147+
previousData: { id: 1, title: 'Hello' },
148+
meta: 'test',
149+
});
150+
});
151+
78152
it('uses call time params over hook time params', async () => {
79153
const dataProvider = testDataProvider({
80154
delete: jest.fn(() => Promise.resolve({ data: { id: 1 } } as any)),

0 commit comments

Comments
 (0)