perf(useTrackerSuspense): Subsequent updates now return data directly instead of throwing a Promise.

Author: welkinwong

packages/react-meteor-data/suspense/useTracker.tests.js

@@ -85,7 +85,7 @@ runForVariants(
   }
 );
 
-runForVariants(
+Meteor.isServer && runForVariants(
   'suspense/useTracker - Test proper cache invalidation',
   async function (test, useTrackerFn) {
     const { Coll, simpleFetch } = setupTest();
@@ -163,6 +163,74 @@ runForVariants(
   }
 );
 
+Meteor.isClient && runForVariants(
+  'suspense/useTracker - Test responsive behavior',
+  async function (test, useTrackerFn) {
+    const { Coll, simpleFetch } = setupTest();
+
+    let returnValue;
+
+    const Test = () => {
+      returnValue = useTrackerFn('TestDocs', simpleFetch);
+      return null;
+    };
+
+    // first return promise
+    renderToString(
+      <TestSuspense>
+        <Test />
+      </TestSuspense>
+    );
+    // wait promise
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // return data
+    renderToString(
+      <TestSuspense>
+        <Test />
+      </TestSuspense>
+    );
+
+    test.equal(
+      returnValue[0].updated,
+      0,
+      'Return value should be an array with initial value as find promise resolved'
+    );
+
+    Coll.updateAsync({ id: 0 }, { $inc: { updated: 1 } });
+  
+    // second await promise
+    renderToString(
+      <TestSuspense>
+        <Test />
+      </TestSuspense>
+    );
+
+    test.equal(
+      returnValue[0].updated,
+      0,
+      'Return value should still not updated as second find promise unresolved'
+    );
+
+    // wait promise
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // return data
+    renderToString(
+      <TestSuspense>
+        <Test />
+      </TestSuspense>
+    );
+
+    test.equal(
+      returnValue[0].updated,
+      1,
+      'Return value should be an array with one document with value updated'
+    );
+
+    await clearCache();
+  }
+);
+
 Meteor.isClient &&
   runForVariants(
     'suspense/useTracker - Test useTracker with skipUpdate',

packages/react-meteor-data/suspense/useTracker.ts

@@ -114,11 +114,14 @@ export function useTrackerSuspenseNoDeps<T = any>(key: string, reactiveFn: IReac
       if (comp.firstRun) {
         // Always run the reactiveFn on firstRun
         refs.trackerData = data
-      } else if (!skipUpdate || !skipUpdate(await refs.trackerData, await data)) {
-        cacheMap.delete(key)
+      } else {
+        const dataResult = await data;
 
-        // For any reactive change, forceUpdate and let the next render rebuild the computation.
-        refs.isMounted && forceUpdate()
+        if (!skipUpdate || !skipUpdate(await refs.trackerData, dataResult)) {
+          const cached = cacheMap.get(key);
+          cached && (cached.result = dataResult);
+          refs.isMounted && forceUpdate()
+        }
       }
   }))
 
@@ -171,10 +174,14 @@ export const useTrackerSuspenseWithDeps =
 
           if (comp.firstRun) {
             refs.trackerData = data
-          } else if (!skipUpdate || !skipUpdate(await refs.trackerData, await data)) {
-            cacheMap.delete(key)
-            
-            refs.isMounted && forceUpdate()
+          } else {
+            const dataResult = await data;
+
+            if (!skipUpdate || !skipUpdate(await refs.trackerData, dataResult)) {
+              const cached = cacheMap.get(key);
+              cached && (cached.result = dataResult);
+              refs.isMounted && forceUpdate()
+            }
           }
         })
       )