vuejs / vuefire

🔥 Firebase bindings for Vue.js
https://vuefire.vuejs.org
MIT License
3.82k stars 323 forks source link

returned values from `useDocument` and `useCollection` using a getter aren't reactive #1495

Closed ralacerda closed 4 months ago

ralacerda commented 4 months ago

Reproduction

https://stackblitz.com/edit/vitejs-vite-wlriny?file=src%2FApp.vue

Steps to reproduce the bug

The reproduction example show ways to use useDocument and useCollection

const userDocumentComputed = useDocument(
  computed(() => {
    return currentUser.value ? doc(db, 'users', currentUser.value.uid) : null;
  })
);

const userDocument = useDocument(() => {
  return currentUser.value ? doc(db, 'users', currentUser.value.uid) : null;
});

const userFriends = useCollection(() => {
  return currentUser.value
    ? collection(db, 'users', currentUser.value.uid, 'friends')
    : null;
});

const userFriendsComputed = useCollection(
  computed(() => {
    return currentUser.value
      ? collection(db, 'users', currentUser.value.uid, 'friends')
      : null;
  })
);

Expected behavior

Acording to the documentation, you can pass both a getter or a computed(). https://vuefire.vuejs.org/guide/realtime-data.html#Declarative-realtime-data. So userDocument and userFriends should update when you change user

Actual behavior

refs that were created by using an getter are not reactive (userDocument and userFriends )

Additional information

This looks like a bug as the documentation show the usage of a getter.

Either way, I'm willing to dive into the source code to understand/fix the bug, or to update the documentation to make it clear that getters aren't supported.

posva commented 4 months ago

This should indeed work. I'm happy you want to contribute! The bug should be the usage of isRef() in order to setup the watcher in both firestore and database. Could you add a test too?