Initial data staletime (#55)

* Fix commented test

* Query should not run on mount with initial data and non zero stale time

Author: k-ode

Diff for: packages/mst-query/src/MstQueryHandler.ts

@@ -104,11 +104,11 @@ export class QueryObserver {
         if (this.isQuery) {
             options.isMounted = this.isMounted;
 
-            this.query.__MstQueryHandler.queryWhenChanged(options);
-        }
+            if (!this.isMounted && !this.query.__MstQueryHandler.isFetched && options.initialData) {
+                this.query.__MstQueryHandler.hydrate(options);
+            }
 
-        if (!this.isMounted && !this.query.__MstQueryHandler.isFetched && options.initialData) {
-            this.query.__MstQueryHandler.setData(options.initialData);
+            this.query.__MstQueryHandler.queryWhenChanged(options);
         }
 
         if (!this.isMounted) {
@@ -134,7 +134,7 @@ export function onMutate<T extends Instance<MutationReturnType>>(
             unprotect(root);
             callback(data, self);
             protect(root);
-        }
+        },
     });
 }
 
@@ -148,7 +148,7 @@ export function onQueryMore<T extends Instance<QueryReturnType>>(
             unprotect(root);
             callback(data, self);
             protect(root);
-        }
+        },
     });
 }
 
@@ -193,6 +193,7 @@ export class MstQueryHandler {
             isFetchingMore: observable,
             isFetched: observable,
             error: observable,
+            hydrate: action.bound,
             setData: action.bound,
             setResult: action.bound,
             setError: action.bound,
@@ -254,17 +255,19 @@ export class MstQueryHandler {
         }
 
         if (!options.isMounted) {
-            const notInitialized = !this.isFetched && !this.isLoading;
+            const notInitialized = !this.isFetched && !this.isLoading && !this.model.data;
             if (notInitialized) {
                 return this.model.query(options);
             }
 
             const now = new Date();
             const cachedAt = this.cachedAt?.getTime() ?? now.getTime();
             const isStale = now.getTime() - cachedAt >= (options.staleTime ?? 0);
-            if (isStale) {
-                return this.model.query(options);
+            if (!isStale) {
+                return;
             }
+
+            return this.model.query(options);
         }
 
         if (!options.isRequestEqual) {
@@ -512,6 +515,17 @@ export class MstQueryHandler {
         return this.model.data;
     }
 
+    hydrate(options: any) {
+        const { initialData, request, pagination  } = options;
+
+        this.setVariables({ request, pagination });
+        
+        this.isLoading = false;
+
+        this.setData(initialData);
+        this.cachedAt = new Date();
+    }
+
     onAfterCreate() {
         this.queryClient.queryStore.setQuery(this.model);
     }

Diff for: packages/mst-query/tests/mstQuery.test.tsx

@@ -182,13 +182,13 @@ test('useMutation', async () => {
 
     const button = await findByTestId('add');
     fireEvent.click(button);
-    // expect(q.listQuery.data?.items[4].id).toBe('temp');
-    // expect(q.listQuery.data?.items.length).toBe(5);
-    // await wait(0);
-    // expect(q.listQuery.data?.items[4].id!).toBe('add-test');
-    // expect(q.listQuery.data?.items.length).toBe(5);
+    expect(q.listQuery.data?.items[4].id).toBe('temp');
+    expect(q.listQuery.data?.items.length).toBe(5);
+    await wait(0);
+    expect(q.listQuery.data?.items[4].id!).toBe('add-test');
+    expect(q.listQuery.data?.items.length).toBe(5);
 
-    // expect(loadingStates).toStrictEqual([false, true, false]);
+    expect(loadingStates).toStrictEqual([false, true, false]);
 
     sub();
 });
@@ -711,7 +711,7 @@ test('subscription query', async () => {
 
 test('volatile query', async () => {
     const { render } = setup();
-    
+
     const text = 'testing';
 
     let renders = 0;
@@ -821,7 +821,7 @@ test('safeReference', async () => {
 
     expect(q.safeReferenceQuery.data?.items.length).toBe(4);
 
-    q.removeItemMutation.mutate({ request: { id: 'test' }});
+    q.removeItemMutation.mutate({ request: { id: 'test' } });
 
     await wait(0);
 
@@ -847,12 +847,44 @@ test('change query in useQuery', async () => {
 
     render(<Comp />);
     await wait(0);
-    
+
     query.set(q.itemQuery2);
     await wait(10);
-    
+
     expect(query.get().data).not.toBe(null);
 
     configureMobx({ enforceActions: 'observed' });
 });
 
+test('useQuery should not run when initialData is passed and staleTime is larger than 0', async () => {
+    const { render, q } = setup();
+
+    configureMobx({ enforceActions: 'never' });
+
+    let id = observable.box('test');
+    const initialData = await api.getItem({ request: { id: id.get() } });
+
+    const loadingStates: boolean[] = [];
+    const Comp = observer(() => {
+        const { query, isLoading } = useQuery(q.itemQuery, {
+            initialData,
+            request: { id: id.get() },
+            staleTime: 10,
+        });
+        loadingStates.push(isLoading);
+        return <div></div>;
+    });
+    render(<Comp />);
+    
+    await wait(0);
+
+    expect(loadingStates).toEqual([false, 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' });
+});