feat: Return default value whenever query function returns undefined.

Author: aboodman

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "replicache-react",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Miscellaneous utilities for using Replicache with React",
   "homepage": "https://replicache.dev",
   "repository": "github:rocicorp/replicache-react",

package.json

@@ -129,7 +129,7 @@ test('returning undefined', async () => {
       },
       def,
     );
-    return <div>{subResult === undefined ? 'undefined' : 'defined'}</div>;
+    return <div>{subResult}</div>;
   }
 
   const div = document.createElement('div');
@@ -141,10 +141,10 @@ test('returning undefined', async () => {
   });
 
   render(<A key="c" rep={rep} def="default" />, div);
-  expect(div.textContent).to.equal('defined');
+  expect(div.textContent).to.equal('default');
   await promise;
   await sleep(1);
-  expect(div.textContent).to.equal('undefined');
+  expect(div.textContent).to.equal('default');
 
   await rep.close();
 });

src/index.test.tsx

@@ -25,13 +25,13 @@ function doCallback() {
   });
 }
 
-export function useSubscribe<Tx, D, R extends D>(
-  r: Subscribable<Tx, D> | null | undefined,
-  query: (tx: Tx) => Promise<R>,
-  def: R,
+export function useSubscribe<Tx, Data, QueryRet extends Data, Default>(
+  r: Subscribable<Tx, Data> | null | undefined,
+  query: (tx: Tx) => Promise<QueryRet>,
+  def: Default,
   deps: Array<unknown> = [],
-): R {
-  const [snapshot, setSnapshot] = useState<R>(def);
+) {
+  const [snapshot, setSnapshot] = useState<QueryRet | undefined>(undefined);
   useEffect(() => {
     if (!r) {
       return;
@@ -41,7 +41,7 @@ export function useSubscribe<Tx, D, R extends D>(
       onData: data => {
         // This is safe because we know that subscribe in fact can only return
         // `R` (the return type of query or def).
-        callbacks.push(() => setSnapshot(data as R));
+        callbacks.push(() => setSnapshot(data as QueryRet));
         if (!hasPendingCallback) {
           void Promise.resolve().then(doCallback);
           hasPendingCallback = true;
@@ -51,8 +51,11 @@ export function useSubscribe<Tx, D, R extends D>(
 
     return () => {
       unsubscribe();
-      setSnapshot(def);
+      setSnapshot(undefined);
     };
-  }, [r, ...deps]);
+  }, [r, def, ...deps]);
+  if (snapshot === undefined) {
+    return def;
+  }
   return snapshot;
 }