How to set up React with Firebase/Firestore v9 (Part 4 | Query delete multiple documents)

[@BaoTran-du1gk]

I am very interested in your lessons, every every thing is extremely explicitly, easy for other to understand. Thank you so much

[@ravenjs]

glad that you found it useful! :))

[@chris7263]

There are great, man, what a public service.

[@arkindustries7347]

Awesome bro, Keep it up . Your teaching is very easy to hook up . Thanks again .

[@ravenjs]

thanks @Ark Industries I appreciate it :))

[@raregaming8685]

Couldn't thank you enough! Thanks for these tutorials. It's rare to find clear tutorials that are up to date. Keep up the good work. If you know how to use firebase for live chat app I would love to see it in a video. Thanks again!

[@ravenjs]

thank you so much for this amazing comment :)) I'll definitely be adding your live chat app idea to my list!

[@tiedsergosu7715]

Glad to see yet another great upload! Much love!

[@ravenjs]

thx a lot, you have a great day xD

[@tiedsergosu7715]

@@ravenjs You too! Also hyped about the upcoming auth videos :D. Discord server for the community soon? You'll be growing insanely.

[@ravenjs]

@@tiedsergosu7715 Soon, haha, soon. thanks for the encouragement once again!

[@tiedsergosu7715]

@@ravenjs Hey Logicism, your videos have really helped! Watched them like 2-3 times to really understand everything. Now I'm creating a chat app and as we can see from your video too, the snapshot reads the id's randomly. Is there any way to sort the array of objects by time? I've been trying to use the .sort method in the useEffect but it just loads before the snapshot feeds the messages to the useState. I've been searching everywhere and can't find an answer since firestore v9 is new :(. Thanks

[@ravenjs]

@@tiedsergosu7715 You can set server timestamps like so: // Update the timestamp field with the value from the server const response = await updateDoc(docRef, { lastModified: serverTimestamp() }); Then when you are reading the data back, you can fetch in in sequence with: const q = query( collectionRef, orderBy("lastModified", "desc") ); Pls let me know if it worked/didn't work :)

[@Rolfikv]

These tutorials are really life savers! I'm subscribed and recommending your channel! Thanks again bro

[@ravenjs]

Haha i'm glad you think so. thank you too @Rolfikv :))

[@crawfordvining4208]

thanks for keeping it simple! great video

[@hulk9716]

thanks a lot i got help from your tutorial

[@lrajoo11]

amazing! haven't found any tutorials on deleting multiple documents with queries. maybe you could add that in the title? I know lots of people are searching for this great stuff as usual

[@ravenjs]

Hmm I believe you're right! Lemme see what we can do about this

[@abrarmulla1196]

Great tutorial series

[@ravenjs]

Thank you so much @Arbar :)) you have a nice weekend

[@Ankitkumar-dn1sl]

Thanks, bro it really helped!

[@ravenjs]

you're welcome @Devang !! glad it did.

[@OtisDeLarge]

Great tutorial. Fantastic work. Thanks so much.

[@ravenjs]

you're absolutely welcome @Jim : )

[@mcdaddy1334]

VERY NICE!

[@AlfredoNatal31]

It will be nice for you to show how to show how to make a search feature where it only displays the matching results as you type, example search name “blue” and then it'll display all names that contain the word “blue”

[@ravenjs]

you're right @Freddy! I'll definitely revisit this idea after I've finished the few scheduled videos that I have right now. thx for the suggestion Freddy :)

[@AlfredoNatal31]

@@ravenjs Thanks, I was also curious as I ran into a weird error. I noticed that everything works perfect on my project, but it does not load any data when I upload it to vercel. So only works when I'm running it using "npm run dev". Any idea onto why this happens?

[@ravenjs]

​@@AlfredoNatal31 i don't really have much experience with vercel but I use Netlify and I've faced similar issues too. Thers 2 things that I always check to avoid similar issues: 1) CORS (Cross origin policy) but assuming you're using firebase's API this shouldn't be a problem? 2) Warnings. In Netlify, you have to set a special env variable so that non-fatal warnings don't crash the entire app in production. sure these javascript warnings wont cause issues when you're in development but during production it could be an issue... thers a lot of possibilities, and Im not very good at vercel, have you tried asking on stackexchange?

[@AlfredoNatal31]

@@ravenjs Thank you so much for the intel, i will check stackexchange but I think you’ve given me some clarity and direction on what it can be.

[@preyah2857]

the best ever :)

[@ujwaldanta3551]

why are you making a result array and accessing the id when we can access the id directly using doc.id i.e const handleQueryDelete = async ()=> { const deleteColor = prompt("Enter the color") const colorRef = collection(db, "color"); const q = query(colorRef, where("name", "==", deleteColor)); const querySnapshot = await getDocs(q); querySnapshot.docs.forEach(async (doc) => { console.log(doc.id); await deleteDoc(doc(db, "color", doc.id)); } ); } // above code is giving an error

[@ravenjs]

hii Ujwal. Yes I've noticed too that I made an extra array that could've been removed and the code will still work fine, but by the time I noticed, I've recorded everything and couldn't change it much.. Also, you said the "above code is giving an error"?

[@ujwaldanta3551]

@@ravenjs thanks for the reply and yeah the code i have commented is giving an error..

[@ravenjs]

@@ujwaldanta3551 Do you need me to look at the error for you? If so, what's the specific error message? @Ujwal

[@ujwaldanta3551]

How can we sort the colors as per the sequence they were added? Or how do we sort the data based on the timestamp

[@ravenjs]

@Ujwal Danta I'm going to make a video about this too but for the time being, here's how it could be done: const serverResponse = await updateDoc(docRef, { timestamp: serverTimestamp() }); const q = query( collectionRef, orderBy("timestamp", "desc") ); const snapshot = getDocs(q); do let me know if this works/doesn't work

[@ujwaldanta3551]

@@ravenjs thanks for the reply. Looking forward for the video

[@ravenjs]

@Ujwal the video's out! just uploaded it :))

[@mohammedsaidali9198]

Sir I have a doubt what if we have a array of objects in sub collection and we want to update....I am sitting with this problem for 4 days

[@ЭрикАрутюнян-х1к]

I am very glad to see your videos again, again I came here with question)) sorry for that. I am trying to do the same but in my case I have nested collection, as you help me next time it worked with path type, but this time it not working. I checked with console the two arguments that I have firebase ID -s but I receive an error export const handleDelete = async ({ channelId, id }) => { console.log(channelId, id); const docRef = doc(collection(db, `channels/${channelId}/messages`, id)); await deleteDoc(docRef); }; // Here is the error Unhandled Rejection (FirebaseError): Invalid collection reference. Collection references must have an odd number of segments, but channels/BTdVq7SD04akgkm01RoP/messages/4mlwF1Fd6finM4xKN2BZ has 4.

[@ravenjs]

@Эрик Арутюнов good mornign! This line is what's causing the error: const docRef = doc(collection(db, `channels/${channelId}/messages`, id)); My suggestion to fix it would be to do this instead: const docRef = doc(collection(db, `channels/${channelId}/messages`), id); In fact, for your case, I think writing the subcollections' path as comma-separated arguments would be more suitable but both solutions work: const collectionRef = collection(db, "channels", channelId, "messages"); const docRef = doc(collectionRef, id); Let me know if it works!

[@ЭрикАрутюнян-х1к]

@@ravenjs Thank you a lot, you are a Guru of firebase, it is worked. I really respect you for answering my questions. Appreciate your work and will like and comment each of your video

[@ravenjs]

Heyy @@ЭрикАрутюнян-х1к i'm so glad I managed to fix the error. I'll be here to help anytime you encounter any more issues!!

[@ЭрикАрутюнян-х1к]

@@ravenjs Hi again bro, one more question how can I delete the sub collection, in my case I removing my channel with your function const channelRef = collection(db, "channels"); export const handleChannelRemove = async (id) => { await deleteDoc(doc(channelRef, id)); }; Giving the ID and removing channel, but sub collection of that channel that is named "messages" stays in firebase how can I also remove that collection too??? I also sent you email with subject "youtube-comment" so that you can understand what I mean.

[@ravenjs]

​@@ЭрикАрутюнян-х1к ah yes.. deleting subcollections. when you delete a document, firestore doesn't actually remove the subcollections along with it. to remove collections, you have to first delete every single document inside of that collection. yes.. deleting subdocs/subcollections in firestore can sometimes be quite a pain. firebase.google.com/docs/firestore/manage-data/delete-data#collections

[@abrarmulla1196]

How do we upload and download images

[@ravenjs]

@Arbar you'll probably need to use Firebase/Storage for that, which I'm going to cover in a separate series because this series in mainly for Firebase/Firestore.

[@abrarmulla1196]

How do we do auth

[@ravenjs]

I'll be doing Firebase/Authentication this weekend :) @Abrar

[@adeebkhanpathan6854]

thanks a lot i got help from your tutorial