Dynamic ref in where clause

[mrleblanc101]

Hi,
Should dynamic ref in where clause re-run the query when their value change ?
Let's say I have this query, when the value of selectedDay change (when I change week boundary), should the results be automatically updated ?
If no, how would I do this ? Using a watcher ?

const entries = useCollection<Entry>(
    query(
        collection(db, 'entries').withConverter(dateConverter),
        where('user', '==', user.value?.uid),
        where('date', '>', $moment(selectedDay.value).startOf('week').toDate()),
        where('date', '<', $moment(selectedDay.value).endOf('week').toDate()),
    ),
    {
        ssrKey: 'entries',
    },
);

[mrleblanc101]

I got it working with a computed, I had an error at first that confused me making me this this was not possible or not the right way.
Here is my initial code:

const entries = computed(() => {
    return useCollection<Entry>(
        query(
            collection(db, 'entries').withConverter(dateConverter),
            where('user', '==', user.value?.uid),
            where('date', '>', $moment(selectedDay.value).startOf('week').toDate()),
            where('date', '<', $moment(selectedDay.value).endOf('week').toDate()),
        ),
        {
            ssrKey: 'entries',
        },
    );
});

Since useCollection return a ref, and computed return a ref, I had to use entries.value.value to remove the type error.
But since then I changed my code to this:

const entries = computed(() => {
    return useCollection<Entry>(
        query(
            collection(db, 'entries').withConverter(dateConverter),
            where('user', '==', user.value?.uid),
            where('date', '>', $moment(selectedDay.value).startOf('week').toDate()),
            where('date', '<', $moment(selectedDay.value).endOf('week').toDate()),
        ),
        {
            ssrKey: 'entries',
        },
    ).value;
});

So now I can use entries.value normally.
If there is a better way, feel free to let me know.

[mrleblanc101]

After all, this might not be the solution, it look like it's working, but I get this warning in the console and the app become slow to a crawl
I suspect there is some sort of infinite loop:

[Vue warn]: onServerPrefetch is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

EDIT: I figure that when the selectedDay value change, it trigger then computed and return a new useCollection which itself is reactive so it trigger the computed again and again.

[mrleblanc101]

Just tried a watcher like so:

const entries = useCollection<Entry>(
    query(
        collection(db, 'entries').withConverter(dateConverter),
        where('user', '==', user.value?.uid),
        where('date', '>', $moment(selectedDay.value).startOf('week').toDate()),
        where('date', '<', $moment(selectedDay.value).endOf('week').toDate()),
    ),
    {
        ssrKey: 'entries',
    },
);
watch(selectedDay, () => {
    entries.value = useCollection<Entry>(
        query(
            collection(db, 'entries').withConverter(dateConverter),
            where('user', '==', user.value?.uid),
            where('date', '>', $moment(selectedDay.value).startOf('week').toDate()),
            where('date', '<', $moment(selectedDay.value).endOf('week').toDate()),
        ),
        {
            ssrKey: 'entries' + selectedDay.value,
        },
    ).value;
});

But I get a different warning, I use Nuxt 3, but I do not use SSR because I host my app on Github Pages with generate.

[Vue warn]: inject() can only be used inside setup() or functional components.
at

[posva]

You are very close! You need to pass a reactive value to useCollection() there are some extra tips in docs but this is the shortest version, passing a function getter:

const entries = useCollection<Entry>(() =>
    query(
        collection(db, 'entries').withConverter(dateConverter),
        where('user', '==', user.value?.uid),
        where('date', '>', $moment(selectedDay.value).startOf('week').toDate()),
        where('date', '<', $moment(selectedDay.value).endOf('week').toDate()),
    ),
    {
        ssrKey: 'entries',
    },
);

Watchers are not meant for this, neither are passing the useCollection() to a computed(), it's the other way around. The lightest is just a useCollection(() => query(...)). It's normal you get warnings about inject(), like other composables, useCollection() is designed to be used within script setup, it won't work within a computed or watcher.

[mrleblanc101]

I ended up finding that, I wasn't sure it would work with useCollection since it's not in the exemple at all.
I tried it and it does not seem to work so I thought it wasn't supported on useCollection.
Here you can see I have an event Firday October 6th, I also have an even Friday September 29th that should get loaded once we change week, but it does not. You can see the selectedDay, weekStart and weekEnd reactive variable all updating correctly in the capture bellow so maybe there is a bug ?

Although what I tried with the vue watch trigger warning, it work and doesn't seem to break anything.

[mrleblanc101]

So the getter does not work, but experimenting from what you said in your previous comment, I wrapper my query in a computed and now it seem to work (instead of wrapping the whole useCollection which is what I tried earlier):

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',
    },
);

[posva]

Just checked and getters should since 3.1.17. If they don't, it's probably a bug and a boiled down repro (using the template link when creating an issue) would help me fix it!

[posva]

I'm also marking the getter reply as the right answer because it's better for most cases and links to the relevant documentation

[mrleblanc101]

Are you using the latest version of VueFire?

Yes

[mrleblanc101]

Just checked and getters should since 3.1.17. If they don't, it's probably a bug and a boiled down repro (using the template link when creating an issue) would help me fix it!

My repo is already public at: https://github.com/mrleblanc101/neobigben/tree/feature/firebase
You'll need to login with Google, the app is a simple time tracking app and it doesn't save any personal information, just the time entry you create.

[posva]

I really need a repro(duction). See https://github.com/vuejs/vuefire/issues/new?assignees=&labels=&projects=&template=bug_report.yml with the starting templates