vuejs / vuefire

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

Unbind `useCollection` on logout #1445

Closed mrleblanc101 closed 8 months ago

mrleblanc101 commented 8 months ago

Reproduction

https://github.com/mrleblanc101/neobigben/tree/feature/firebase

Steps to reproduce the bug

I have a useCollection that has a dynamic where to fetch only the user data like so:

const entries = useCollection<Entry>(
    computed(() =>
        query(
            collection(db, 'entries').withConverter(dateConverter),
+           where('user', '==', user.value?.uid),
            where('date', '>=', weekStart.value),
            where('date', '<=', weekEnd.value),
        ),
    ),
    {
        ssrKey: 'entries',
    },
);

When I logout, I have this specific error:

Uncaught (in promise) FirebaseError: Function where() called with invalid data. Unsupported field value: undefined

This is because my computed query gets updated when the user.value.uid is reset on logout, triggering the collection query to re-run. The option API documentation talks about $firestoreUnbind but I can't find a way to do this in the composition API.

Expected behavior

My best guess has been to overwrite the value of entries.value which is a _RefFireStore type to an empty Array using a $reset like documented in [Pinia](https://pinia.vuejs.org/core-concepts/state.html#Resetting-the-state:~:text=In%20Setup%20Stores%2C%20you%20need%20to%20create%20your%20own%20%24reset()%20method%3A) by doing so:

function $reset() {
    entries.value = [];
}

Since entries.value is not a _RefFireStore instance anymore, the computed should be garbage collected and not trigger a re-run of the query after logout once the user.value.uid is reset.

Actual behavior

I still get the error.

Additional information

No response