I am currently in the process of learning about Vue and Vuefire. My main objective is to retrieve a collection of documents (recipes) associated with a user's unique ID, which is stored as a subcollection within the user document.
The firestore path leading to this collection typically looks something like users/${user.uid}/recipes. The issue arises when I attempt to declare my collection using
recipesStore = useCollection(...)My assumption is that this error occurs when the path/userID has not yet been determined.
In my code, the user ID is obtained only after the user signs up. I approach defining reactive collections by starting with an empty object and later updating it upon sign-in with the correct path pointing to the user's collection, utilizing the function updateCollectionWithUser(user).
export const recipesCollection = ref({})
export const recipesStore = useCollection(recipesCollection, {wait: true})
export const updateCollectionWithUser = async (user) => {
recipesCollection.value = collection(db, `users/${user.uid}/recipes`)
}
Although this error does not seem to impede functionality, I suspect it may indicate a larger issue within my code structure. Typically, I do not encounter this error in the console upon signing in, but it becomes visible upon refreshing the page, despite successfully loading the collection.
Could this issue be related to Vuefire's inability to work with an empty path, or perhaps tied to Promise handling (which remains somewhat obscure to me)? What would be the best approach to tackle an unknown path to a collection?