fix: stale params when revalidate (#342)

Author: mortalYoung

src/useList/__tests__/useList.test.ts

@@ -3,7 +3,7 @@ import { renderHook } from '@testing-library/react-hooks';
 import useList from '..';
 
 describe('Test useList hook', () => {
-    it('Should get initial data with default params', () => {
+    it('Should get initial data with default params', async () => {
         const fetcher = jest.fn().mockResolvedValue({
             total: 1,
             data: [{ uuid: 1 }],
@@ -12,12 +12,12 @@ describe('Test useList hook', () => {
         const { result } = renderHook(() => useList(fetcher, { current: 1, pageSize: 20 }));
 
         expect(fetcher).toBeCalledTimes(1);
-        waitFor(() => {
+        await waitFor(() => {
             expect(result.current.data.length).toBe(1);
-            expect(result.current.params).toBe(
-                expect.objectContaining({ current: 1, pageSize: 20, total: 1 })
-            );
         });
+        expect(result.current.params).toEqual(
+            expect.objectContaining({ current: 1, pageSize: 20, total: 1 })
+        );
     });
 
     it('Should get data after mutating', () => {
@@ -35,10 +35,9 @@ describe('Test useList hook', () => {
             result.current.mutate({ search: 'test' });
         });
 
-        waitFor(() => {
-            expect(fetcher).toBeCalledTimes(2);
-            expect(result.current.params).toBe(expect.objectContaining({ search: 'test' }));
-        });
+        expect(fetcher).toBeCalledTimes(2);
+        expect(result.current.params).toEqual(expect.objectContaining({ search: 'test' }));
+        expect(fetcher.mock.calls[1][0]).toEqual(expect.objectContaining({ search: 'test' }));
     });
 
     it('Should support revalidate after mutating', () => {
@@ -56,9 +55,7 @@ describe('Test useList hook', () => {
             result.current.mutate({ search: 'test' }, { revalidate: false });
         });
 
-        waitFor(() => {
-            expect(result.current.params).toBe(expect.objectContaining({ search: 'test' }));
-        });
+        expect(result.current.params).toEqual(expect.objectContaining({ search: 'test' }));
     });
 
     it('Should support get data with current params', () => {
@@ -76,8 +73,6 @@ describe('Test useList hook', () => {
             result.current.mutate();
         });
 
-        waitFor(() => {
-            expect(fetcher).toBeCalledTimes(2);
-        });
+        expect(fetcher).toBeCalledTimes(2);
     });
 });

src/useList/index.ts

@@ -30,9 +30,9 @@ export default function useList<T extends Record<string, any>, P extends Record<
 
     const options = useMemo(() => merge(rawOptions, { immediate: true }), [rawOptions]);
 
-    const performFetch = () => {
+    const performFetch = (raw = params) => {
         setLoading(true);
-        fetcher(params)
+        fetcher(raw)
             .then(({ data, total }) => {
                 setData(data);
                 setTotal(total);
@@ -44,15 +44,28 @@ export default function useList<T extends Record<string, any>, P extends Record<
     };
 
     const mutate = (next: Partial<P> | ((prev: P) => P) = params, options: IMutateOptions = {}) => {
-        setParams(typeof next === 'function' ? next : { ...merge(params, next) });
-
         const defaultOptions: IMutateOptions = {
             revalidate: true,
         };
-
         const nextOptions = merge(defaultOptions, options);
-        if (nextOptions.revalidate) {
-            performFetch();
+
+        if (typeof next === 'function') {
+            setParams((prev) => {
+                const tmp = next(prev);
+
+                if (nextOptions.revalidate) {
+                    performFetch(tmp);
+                }
+
+                return tmp;
+            });
+        } else {
+            const tmp = { ...merge({}, params, next) };
+            setParams(tmp);
+
+            if (nextOptions.revalidate) {
+                performFetch(tmp);
+            }
         }
     };