In pinia action, should I use vue-fire useCollection or firebase directly ?

[mrleblanc101]

Instead of binding a collection to the store, I want to query firebase when a pinia action is triggered.
My async method call useCollection but I get this warning in the console:

[Vue warn]: inject() can only be used inside setup() or functional components.
From this line inside vue-fire:

instance.proxy.$isServer : inject(ssrContextKey, 0));

I do this because when I delete a "Project", I want to delete any "Entries" which have a reference to this project.
I think the right way to do this would be to use Cloud Function, but I use Firebase Spark which does not have cloud function, so instead I do a writeBatch and loop to delete each of them manually like so:

async function deleteProject(project: Project) {
    if (confirm('Are you sure you want to delete this project?')) {
        const projectRef = doc(db, 'projects', project.id);
        const { promise: linkedEntriesPromise } = await useCollection<Entry>(
            query(collection(db, 'entries'), where('project', '==', projectRef)),
            {
                once: true,
                ssrKey: 'projectEntries',
            },
        );
        const batch = writeBatch(db);
        const linkedEntries = await linkedEntriesPromise.value;
        if (linkedEntries.length > 0) {
            if (
                confirm(
                    linkedEntries.length === 1 ? "This will delete the linked entry, do you wish to continue?" : `This will delete the ${linkedEntries.length} linked entries, do you wish to continue?`
                )
            ) {
                linkedEntries.forEach((entry) => {
                    batch.delete(doc(db, 'entries', entry.id));
                });
                await batch.commit();
                await deleteDoc(projectRef);
            }
        } else {
            await deleteDoc(projectRef);
        }
    }
}

So I was wondering, am I misundertsanding how to use this plugin ?
Should I use firebase directly instead ?

[posva]

VueFire exposes composables so they must be used at top level:

defineStore('...', () => {
  useDocument(...)
})

Then you use Firebase JS SDK to write to the database. I think this should help too:

• How to await new data after switching dataSource in `useDocument`? #1451 (comment)

[mrleblanc101]

Yeah I got a bit confused because I'm new to Vue 3, Firebase and VueFire at the same time. Maybe the doc should be more clear that VueFire does not replace the firebase SDK, but compliments it

EDIT: Nevermind, I've read again and found this:

VueFire expects you to use the existing APIs from Firebase as much as possible

[posva]

If you are new to Vue, I really recommend to read the docs: https://vuejs.org/guide/introduction.html. It's better than most tutorials you will find out online and you are sure they are correct 😄. It might look long but you can read the essentials and then https://vuejs.org/guide/reusability/composables.html. The rest can come as you need them

[mrleblanc101]

I'm not new to Vue, just Vue 3. Most of my project were in Nuxt 2, waiting for the Nuxt 3 ecosystem to catch up (i18n, auth were a problem until recently).
I guess I just expected a wrapper like VueFire to replace the base SDK of the library they compliment (firebase), but instead we have to use both which was not clear to me even though it's mentioned in the doc, either I glanced over it and forgot or simply didn't see it as it's on the homepage and I might have digged right into the docs which are more focused on VueFire composable, which makes sense, than how to use firebase in general.
But thanks for your time and the tips, I'll try to read ALL PAGES more carefully next time.