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

[mrleblanc101]

Reproduction

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

Steps to reproduce the bug

Expected behavior

I do not use SSR, I use generate with ssr: false, I should not get an SSR error ?

Actual behavior

I get this error when using a watch inside a Pinia setup store when using vue-fire useCollection to change the where filter dynamically.

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

Additional information

No response

[mrleblanc101]

@posva Instead of changing the ref value, I tried to use the target option 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>(
+    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()),
        ),
        {
+            target: entries,
            ssrKey: 'entries',
        },
-    ).value;
+    )
});

But I get this warning now:

[VueFire] the passed "options.target" is already the returned value of "useDocument()/useCollection()". If you want to subscribe to a different data source, pass a reactive variable to "useDocument()/useCollection()" instead:
https://vuefire.vuejs.org/guide/realtime-data.html#declarative-realtime-data
This will FAIL in production.

If I understand the message correctly, this suppose that the useCollection should unbind/rebind automatically if a reactive variable ref is used in the query like I did with selectedDay (see highlighted lines), but it does not work.

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 even changed my code to use computed for $moment(selectedDay.value).startOf('week').toDate() instead of putting them directly inside the query, but it does not seem to change anything.

+const startWeek = computed(() => {
+    return $moment(selectedDay.value).startOf('week').toDate();
+});
+const endWeek = computed(() => {
+    return $moment(selectedDay.value).endOf('week').toDate();
+});
+
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()),
+        where('date', '>', startWeek.value),
+        where('date', '<', endWeek.value),
    ),
    {
        ssrKey: 'entries',
    },
);

[posva]

Closing in favor of #1436