Merge pull request #58 from ConrabOpto/feature/refetch-on

Add refetchOnMount & refetchOnRequestChanged
ConrabOpto · Jan 12, 2024 · 90c25b6 · 90c25b6
2 parents 97ded72 + a2ecac7
commit 90c25b6
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 12 deletions.
diff --git a/packages/mst-query/src/MstQueryHandler.ts b/packages/mst-query/src/MstQueryHandler.ts
@@ -33,14 +33,14 @@ export type EndpointType = (
     query: any
 ) => Promise<any>;
 
-
 type QueryHookOptions = {
     request?: any;
     staleTime?: number;
     pagination?: any;
     enabled?: boolean;
     isMounted?: any;
     isRequestEqual?: boolean;
+    refetchOnMount?: 'always' | 'never' | 'if-stale';
 };
 
 type NotifyOptions = {
@@ -239,6 +239,14 @@ export class MstQueryHandler {
                 return this.model.query(options);
             }
 
+            if (options.refetchOnMount === 'always') {
+                return this.model.refetch(options);
+            }
+
+            if (options.refetchOnMount === 'never') {
+                return;
+            }
+
             const now = new Date();
             const cachedAt = this.cachedAt?.getTime() ?? now.getTime();
             const isStale = now.getTime() - cachedAt >= (options.staleTime ?? 0);
@@ -291,7 +299,7 @@ export class MstQueryHandler {
 
     queryMore(options: any = {}): Promise<() => any> {
         this.isFetchingMore = true;
-        
+
         options.request = options.request ?? this.model.variables.request;
         options.pagination = options.pagination ?? this.model.variables.pagination;
         options.meta = options.meta ?? this.options.meta;

diff --git a/packages/mst-query/src/QueryClient.ts b/packages/mst-query/src/QueryClient.ts
@@ -14,6 +14,8 @@ const defaultConfig = {
     env: {},
     queryOptions: {
         staleTime: 0,
+        refetchOnMount: 'if-stale',
+        refetchOnRequestChanged: 'always',
     },
 };
 

diff --git a/packages/mst-query/src/hooks.ts b/packages/mst-query/src/hooks.ts
@@ -17,6 +17,8 @@ type QueryOptions<T extends Instance<QueryReturnType>> = {
     request?: SnapshotIn<T['variables']['request']>;
     pagination?: SnapshotIn<T['variables']['pagination']>;
     onQueryMore?: (data: T['data'], self: T) => void;
+    refetchOnMount?: 'always' | 'never' | 'if-stale';
+    refetchOnRequestChanged?: 'always' | 'never';
     staleTime?: number;
     enabled?: boolean;
     initialData?: any;
@@ -35,15 +37,17 @@ export function useQuery<T extends Instance<QueryReturnType>>(
     (options as any).request = options.request ?? EmptyRequest;
     (options as any).pagination = options.pagination ?? EmptyPagination;
 
-    let isRequestEqual: boolean;
-    if (isStateTreeNode(query.variables.request)) {
-        const requestType = getType(query.variables.request);
-        isRequestEqual = equal(
-            getSnapshot(requestType.create(options.request)),
-            getSnapshot(query.variables.request)
-        );
-    } else {
-        isRequestEqual = equal(options.request, query.variables.request);
+    let isRequestEqual: boolean = true;
+    if (options.enabled && options.refetchOnRequestChanged !== 'never') {
+        if (isStateTreeNode(query.variables.request)) {
+            const requestType = getType(query.variables.request);
+            isRequestEqual = equal(
+                getSnapshot(requestType.create(options.request)),
+                getSnapshot(query.variables.request)
+            );
+        } else {
+            isRequestEqual = equal(options.request, query.variables.request);
+        }
     }
     if (!observer.isMounted && !isRequestEqual) {
         query.setData(null);

diff --git a/packages/mst-query/tests/mstQuery.test.tsx b/packages/mst-query/tests/mstQuery.test.tsx
@@ -875,7 +875,7 @@ test('useQuery should not run when initialData is passed and staleTime is larger
         return <div></div>;
     });
     render(<Comp />);
-    
+
     await wait(0);
 
     expect(loadingStates).toEqual([false, false]);
@@ -888,3 +888,44 @@ test('useQuery should not run when initialData is passed and staleTime is larger
 
     configureMobx({ enforceActions: 'observed' });
 });
+
+test('refetchOnMount & refetchOnRequestChanged', async () => {
+    const { render, q } = setup();
+
+    configureMobx({ enforceActions: 'never' });
+
+    const getItem = vi.fn(() => Promise.resolve(itemData));
+    const testApi = {
+        ...api,
+        getItem: () => getItem(),
+    };
+
+    let id = observable.box('test');
+
+    const Comp = observer(() => {
+        useQuery(q.itemQuery, {
+            request: { id: id.get() },
+            refetchOnMount: 'always',
+            refetchOnRequestChanged: 'never',
+            staleTime: 5000,
+            meta: { getItem: testApi.getItem },
+        });
+        return <div></div>;
+    });
+
+    const { unmount } = render(<Comp />);
+    await wait(0);
+    unmount();
+
+    render(<Comp />);
+    await wait(0);
+
+    expect(getItem).toHaveBeenCalledTimes(2);
+
+    id.set('different-test');
+    await wait(0);
+
+    expect(getItem).toHaveBeenCalledTimes(2);
+
+    configureMobx({ enforceActions: 'observed' });
+});