feat(database): support null as a value

Author: posva

src/database/index.ts

@@ -17,6 +17,7 @@ import {
   UnbindWithReset,
   walkSet,
   _MaybeRef,
+  _Nullable,
   _RefWithState,
 } from '../shared'
 import { rtdbUnbinds } from './optionsApi'
@@ -48,7 +49,7 @@ export interface UseDatabaseRefOptions extends _DatabaseRefOptions {
 }
 
 export function _useDatabaseRef(
-  reference: _MaybeRef<DatabaseReference | Query>,
+  reference: _MaybeRef<_Nullable<DatabaseReference | Query>>,
   localOptions: UseDatabaseRefOptions = {}
 ) {
   const options = Object.assign({}, rtdbOptions, localOptions)
@@ -64,8 +65,15 @@ export function _useDatabaseRef(
   let removePendingPromise = noop
 
   function bindDatabaseRef() {
+    let referenceValue = unref(reference)
+
     const p = new Promise<unknown | null>((resolve, reject) => {
-      const referenceValue = unref(reference)
+      if (!referenceValue) {
+        _unbind = noop
+        // TODO: maybe we shouldn't resolve this at all?
+        return resolve(null)
+      }
+
       if (Array.isArray(data.value)) {
         _unbind = bindAsArray(
           {
@@ -92,8 +100,8 @@ export function _useDatabaseRef(
     })
 
     // only add the first promise to the pending ones
-    if (!isPromiseAdded) {
-      removePendingPromise = addPendingPromise(p, unref(reference))
+    if (!isPromiseAdded && referenceValue) {
+      removePendingPromise = addPendingPromise(p, referenceValue)
       isPromiseAdded = true
     }
     promise.value = p

tests/database/objects.spec.ts

@@ -8,9 +8,9 @@ import {
   _RefDatabase,
 } from '../../src'
 import { expectType, tds, setupDatabaseRefs, database } from '../utils'
-import { computed, nextTick, ref, unref, type Ref } from 'vue'
+import { computed, nextTick, ref, shallowRef, unref, type Ref } from 'vue'
 import { DatabaseReference, ref as _databaseRef } from 'firebase/database'
-import { _MaybeRef } from '../../src/shared'
+import { _MaybeRef, _Nullable } from '../../src/shared'
 
 describe('Database objects', () => {
   const { databaseRef, set, update, remove } = setupDatabaseRefs()
@@ -114,6 +114,24 @@ describe('Database objects', () => {
     expect(data.value).toEqual({ name: 'a' })
   })
 
+  it('can be bound to a null ref', async () => {
+    const aRef = databaseRef()
+    const bRef = databaseRef()
+    await set(aRef, { name: 'a' })
+    await set(bRef, { name: 'b' })
+    const targetRef = shallowRef()
+
+    const { data, promise } = factory({ ref: targetRef })
+    await promise.value
+
+    expect(data.value).toBeFalsy()
+
+    targetRef.value = aRef
+    await nextTick()
+    await promise.value
+    expect(data.value).toEqual({ name: 'a' })
+  })
+
   describe('reset option', () => {
     it('resets the value when specified', async () => {
       const { wrapper, itemRef, data } = factory({

tests/firestore/document.spec.ts

@@ -207,24 +207,6 @@ describe(
       expect(data.value).toEqual({ name: 'b' })
     })
 
-    it('can be set to a null ref', async () => {
-      const aRef = doc()
-      const bRef = doc()
-      await setDoc(aRef, { name: 'a' })
-      await setDoc(bRef, { name: 'b' })
-      const targetRef = shallowRef()
-
-      const { data, promise } = factory({ ref: targetRef })
-      await promise.value
-
-      expect(data.value).toBeFalsy()
-
-      targetRef.value = aRef
-      await nextTick()
-      await promise.value
-      expect(data.value).toEqual({ name: 'a' })
-    })
-
     tds(() => {
       const db = firestore
       const doc = originalDoc