Currently, my team and I are working on a project using Firebase with Vue.js as the framework.
We've come across a challenge regarding creating, updating, and deleting elements in a Firebase cloud document.
For instance, within our 'people' collection, we have documents that sometimes contain arrays. Unfortunately, Firebase doesn't seem to support mapping values like an address (e.g., Address: 123 Test street); instead, it only supports array elements such as strings or numbers.
While I did find the arrayRemove methods in the documentation, there seems to be limited information available for other operations.
The snippet below shows a function I'm importing which effectively deletes an item. However, my primary concern now is how to update one.
import { ref } from 'vue'
import { projectFirestore } from '../firebase/config'
import { doc, updateDoc, arrayRemove } from "firebase/firestore";
const useDocumentArray = (firebaseCollection, id, arrayItem) => {
let error = ref(null)
let isPending = ref(false)
let docRef = doc(projectFirestore, firebaseCollection, id);
const deleteArrayItem = async () => {
try {
const res = await updateDoc(docRef, {
shifts: arrayRemove(arrayItem),
});
isPending.value = false;
return res;
} catch (err) {
isPending.value = false;
console.log(err.message);
error.value = 'could not delete doc';
}
};
return { error, isPending, deleteArrayItem };
};
export default useDocumentArray;