Unbind useCollection on logout

[mrleblanc101]

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 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

[posva]

You need to ensure the correct values are being passed:

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

VueFire allows passing null to these functions for this purpose. There is even an example in docs

[posva]

BTW I can't know how much of the declarative approach you are familiar with, but doing things like this (passing a conditional null) to composables (when they support it) will help you a lot with Vue! It's usually less bug-prone and has less edge cases than using watchers (although most of the time the watcher is inside of the composable to hide this complexity 😄 )

[mrleblanc101]

Thank you, I guess I skipped to the next paragraph after This is useful when you want to start observing a document or collection later in the lifecycle of your component. Then I say the part about $firestoreUnbind inside the option API, and since there is no other mention of the word "unbind", I did not understand even tho if you cannot computed a valid document path, e.g. when the user is not logged in: pretty much means the same thing.

[mrleblanc101]

I had to combine the 2 methods, since otherwise my data would stop being reactive (which I needed), but not be reset.
Unless I'm misunderstanding ?
As you can see below, the user: null after logout, but the entries array is still populated.

[posva]

BTW I don't feel respected if you keep opening issues without following the issue opening guidelines. Specifically, the boiled-down reproduction. It really makes me feel treated like free support which I don't appreciate. The more you repeat it, the less likely I, or any open-source maintainer, will want to help out. You can still open discussions for help, that's what they are for, you can even use them exactly the way you are using the issues right now, writing down your thoughts and journey trying to find the source of a problem. This will probably help other users facing similar issues. So please, open discussions if you are looking for help, as indicated in the issue guidelines and I will gladly give it a look! Thank you.

[mrleblanc101]

I'm sorry, you're right. It's just that most projects don't really use discussion. They also make it harder to find search results since the search in discussion does not surface issue and the search in issue do not surface discussion. I'll gladly open discussion next time, especially since you take the time to respond.

[B-Lemke]

Helpful note since I just spent an afternoon working through a similar bug I needed to set the reset option on the useCollection call so I think maybe you might have to add it like this? I don't know if that'll solve your issue but it fixed my few hours of troubleshooting and wanted to pass it along! :)

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

[Watster69]

Thanks for this. Spent ages on it thinking I'm doing something wrong. The docs aren't very helpful for this particular point. My data would appear when I logged in but was retained when I logged out. The example in the docs does not show the additional computed function inside useCollection either which is not helpful.