Reproduction

https://stackblitz.com/edit/vuefire-usecollection-issue

Steps to reproduce the bug

Click on next / prev buttons to observe the behaviour.

Expected behavior

Snapshot data should be populated once, so things like pagination / load more can render smoothly.

Actual behavior

Snapshot data gets populated twice - once with incorrect results returned from the Firestore client cache (it uses the second listener's query) - and a second time with the expected results, pulled from the server. As you can see, this causes the item listing to flick and render twice.

Additional information

I kept the repro as simple as possible, so you may be wondering why am I using two listeners on the same collection. In the app I'm currently working on, I'm using useCollection inside Pinia stores and have paginated components (using queries similar to queryPaginator). I also have some dropdowns (using queries similar to queryFiltered), which I use to filter other collections. This pattern is quite consistent throughout the app, I am using it on 3 collections so far.

Proposed solution

Going back to the issue, since this is the intended behaviour of the Firestore client cache (as confirmed with the Firestore team, via support) and since vuefire doesn't expose the snapshot's metadata, I propose adding a new option to useCollection, something like ignoreCachedChanges. When set to true, the underlying ref won't be updated when results come from the cache, but rather wait for fresh results from the server. This would solve my use case and hopefully others. I will submit a PR shortly, let me know what you think. Thanks!