Add initialDataUpdatedAt

ConrabOpto · Oct 1, 2024 · 6468a88 · 6468a88
1 parent e017374
commit 6468a88
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 8 deletions.
diff --git a/packages/mst-query/src/MstQueryHandler.ts b/packages/mst-query/src/MstQueryHandler.ts
@@ -80,8 +80,11 @@ export class QueryObserver {
                 this.query.setData(null);
             }
 
-            if (!this.isMounted && !this.query.__MstQueryHandler.isFetched && options.initialData) {
-                this.query.__MstQueryHandler.hydrate(options);
+            if (!this.isMounted && options.initialData) {
+                const initialDataUpdatedAt = options.initialDataUpdatedAt ?? new Date();
+                if (!isDataStale(initialDataUpdatedAt, options.staleTime)) {
+                    this.query.__MstQueryHandler.hydrate(options);
+                }
             }
 
             this.query.__MstQueryHandler.queryWhenChanged(options);
@@ -517,10 +520,11 @@ export class MstQueryHandler {
     }
 
     isStale(options: any) {
-        const now = new Date();
-        const cachedAt = this.cachedAt?.getTime() ?? now.getTime();
-        const isStale = now.getTime() - cachedAt >= (options.staleTime ?? 0);
-        return this.markedAsStale || isStale;
+        if (!this.cachedAt) {
+            return false;
+        }
+
+        return this.markedAsStale || isDataStale(this.cachedAt.getTime(), options.staleTime);
     }
 
     onAfterCreate() {
@@ -533,3 +537,7 @@ export class MstQueryHandler {
         this.abort();
     }
 }
+
+function isDataStale(cachedAt: number, staleTime: number = 0) {
+    return Date.now() - cachedAt >= staleTime;
+}
diff --git a/packages/mst-query/src/hooks.ts b/packages/mst-query/src/hooks.ts
@@ -23,6 +23,7 @@ type QueryOptions<T extends Instance<QueryReturnType>> = {
     staleTime?: number;
     enabled?: boolean;
     initialData?: any;
+    initialDataUpdatedAt?: number;
     meta?: { [key: string]: any };
 };
 
@@ -66,19 +67,19 @@ export function useQuery<T extends Instance<QueryReturnType>>(
             observer.unsubscribe();
         };
     }, [options]);
-    
+
     const data = isRequestEqual ? query.data : null;
 
     return {
         data: data as typeof query['data'],
+        dataUpdatedAt: query.__MstQueryHandler.cachedAt?.getTime(),
         error: query.error,
         isFetched: query.isFetched,
         isLoading: query.isLoading,
         isRefetching: query.isRefetching,
         isFetchingMore: query.isFetchingMore,
         query: query,
         refetch: query.refetch,
-        cachedAt: query.__MstQueryHandler.cachedAt,
         isStale: query.__MstQueryHandler.isStale(options),
     };
 }

diff --git a/packages/mst-query/tests/mstQuery.test.tsx b/packages/mst-query/tests/mstQuery.test.tsx
@@ -879,6 +879,42 @@ test('useQuery should not run when initialData is passed and staleTime is larger
     configureMobx({ enforceActions: 'observed' });
 });
 
+test('useQuery should run when initialData is passed and initialDataUpdatedAt is older than staleTime', async () => {
+    const { render, q } = setup();
+
+    configureMobx({ enforceActions: 'never' });
+
+    let id = observable.box('test');
+    const initialData = await api.getItem({ request: { id: id.get() } });
+    const initialDataUpdatedAt = Date.now() - 1000;
+
+    const loadingStates: boolean[] = [];
+    const Comp = observer(() => {
+        const { query, isLoading } = useQuery(q.itemQuery, {
+            initialData,
+            initialDataUpdatedAt,
+            request: { id: id.get() },
+            staleTime: 500,
+        });
+        loadingStates.push(isLoading);
+        return <div></div>;
+    });
+    render(<Comp />);
+
+    await wait(0);
+
+    expect(loadingStates).toEqual([false, true, false]);
+    expect(q.itemQuery.data?.id).toBe('test');
+
+    id.set('different-test');
+    await wait(0);
+    expect(q.itemQuery.data?.id).toBe('different-test');
+    expect(q.itemQuery.variables.request?.id).toBe('different-test');
+
+    configureMobx({ enforceActions: 'observed' });
+});
+
+
 test('refetchOnMount & refetchOnRequestChanged', async () => {
     const { render, q } = setup();