Getting Started with Firebase 9 #6 - Real Time Collection Data

Key Takeaways

all right then gang so we've seen now how we can get data and we're logging that data to the console and also add new data and delete data as well from a collection but at the minute if we were to add new data or delete data then in order to see the updated collection data in the console we'd have to refresh the page right let me demo that if i add in a new book so the way of kings again and then brandon sanderson like so hit enter it adds the bulk but we don't see that new data over here right away we have to refresh the page in order to see that data now if we were rendering this data to the browser so that it output on the screen in some kind of template then the same would be true we'd have to refresh the page after we added a new book in order to see that in the browser right so instead what we can do is we can set up what's known as a real-time listener or a subscription to the firestore collection which actively listens for changes to that collection so that if i was to add a new book or change book or delete a book from that collection then it would send back the updated snapshot or the updated data inside that collection right away once that happens and then in our case it would just be reloading it to the console but in your case if you're making a website with firebase then it might re-render the template to the browser okay so i'm going to show you how we can set up this real-time listener or subscription to a firestore collection in this lesson okay then so currently we are getting the documents right here using this get docs function and like we just explored this get docs function just runs once to get the documents when we run the code just once but if there's a change later on in the data it doesn't automatically run again to go out and fetch the new data it just runs once and instead we want to set up a subscription to the collection so that every time there is a change in the data in that collection we get that data back right away so it sends us back a new snapshot every time there's a change right so what i'm going to do is change this to a real time collection data because that's what we're going to set up now and then up here i'm going to replace get docs with a different function called on snapshot which is how we set up a real-time listener using this on snapshot function so then what i'm going to do is basically rewrite this code right here but using that new function so then let's do that down here i'm going to say on snapshot which is that function we just imported and then inside here we need to pass in two arguments we say call ref just like we did up here because we need to pass in a reference to a collection that we want to listen to or set up a subscription to and then as a second argument we pass in a function and this function is gonna fire every time there is a change in the collection and it sends us back a new snapshot and also wants initially as well so like this runs once initially this is going to run once initially as well to get the data to begin with but then it's also going to run thereafter this function every time there is a change in the collection that we're listening to and it's going to send us back a new snapshot of that collection after the change occurs right so unlike this one when we have a then method we don't have a then method on here we'll just fire this function whenever there's a change so inside here we take in the snapshot just like we do up here and then that snapshot is going to be pretty much the same as this kind of snapshot so inside this function the logic all this stuff is going to be the same we can set up a new array called books we can cycle through the documents on the snapshot and for each document we add a new object to the books array where we grab the data of the document and also the id of the document and then finally we log those to the console so what i'm going to do is actually just cut all of this and i'm going to paste it in right here instead and let me just scoot this back all right and that's all there is to it my friends so now i can delete all this where we just get the data once and instead we're using this on snapshot function to listen to the data so this function is going to go out and grab the data once to begin with and run this function when it gets it so we log out the books to the console when we first load the page but thereafter if i was to add a new book or delete a book that would trigger firestore to send us back a new snapshot and this function would run again so that we can output the books to the console again the new updated data all right so i hope that all makes sense so let me save this now and we'll give it a whirl in the browser all right then so when we first load the page if i refresh you can see it's performing that initial fetch to get the first initial snapshot of the collection and we get these four documents right here now watch what happens if i try to delete one so this the wise man's favor for example i'm just going to grab this id and then i'm going to paste it in here to delete the document so as soon as i click on this that should send out a request to delete the document from the collection in firestore it will delete it and then that will trigger firestore to send us back a new snapshot the function is going to re-run in our code with that snapshot and it's going to log out the new data to the console so we should see three books this time as soon as i delete the book and that's finished so let me click this and now we can see three books in this array and if we open this up we can see the wise band fare is no longer there awesome now the same is true for if i add any books so i can say the wise man's fit up here and then it's by patrick rothfuss press enter to add a new book we should get a new snapshot back and we do and we can see that right here four elements inside it including the wise man's fear awesome so that my friends is how we set up a real-time listener or a subscription to a firestore collection to get real-time data back as events occur in the collection