feat: Return default value whenever query function returns undefined.

package.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",

src/index.test.tsx

@@ -76,7 +76,7 @@ test('Batching of subscriptions', async () => {
     const dataA = useSubscribe(
       rep,
       // TODO: Use type param to get when new Replicache is released.
-      async tx => ((await tx.get('a')) as string | undefined) ?? null,
+      async tx => (await tx.get('a')) as string | undefined,
       null,
     );
     renderLog.push('render A', dataA);
@@ -86,7 +86,7 @@ test('Batching of subscriptions', async () => {
   function B({rep, dataA}: {rep: MyRep; dataA: string | null}) {
     const dataB = useSubscribe(
       rep,
-      async tx => ((await tx.get('b')) as string | undefined) ?? null,
+      async tx => (await tx.get('b')) as string | undefined,
       null,
     );
     renderLog.push('render B', dataA, dataB);
@@ -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.ts

@@ -25,13 +25,15 @@ function doCallback() {
   });
 }
 
-export function useSubscribe<Tx, D, R extends D>(
-  r: Subscribable<Tx, D> | null | undefined,
-  query: (tx: Tx) => Promise<R>,
-  def: R,
+export type RemoveUndefined<T> = T extends undefined ? never : T;
+
+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 +43,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 +53,15 @@ export function useSubscribe<Tx, D, R extends D>(
 
     return () => {
       unsubscribe();
-      setSnapshot(def);
+      setSnapshot(undefined);
     };
-  }, [r, ...deps]);
-  return snapshot;
+  }, [r, def, ...deps]);
+  if (snapshot === undefined) {
+    return def;
+  }
+  // This RemoveUndefined is just here to make the return type easier to read.
+  // It should be exactly equivalent to what the type would be without this.
+  // For some reason declaring the return type to be
+  // RemoveUndefined<QueryRet> | Default doesn't typecheck.
+  return snapshot as RemoveUndefined<QueryRet>;
 }