Firebase Firestore Tutorial #8 - Real-time Data

Key Takeaways

alright then so I feel like this is going pretty well we can now add data remove data and query data but at the minute when we add something or delete something over here this UI is not very reactive it doesn't delete it from the front-end and likewise when we add something it doesn't add it to the list so we would like that kind of functionality and in order to do that we're going to look at the real-time capabilities of firestorm so essentially what we like to do is set up some kind of a listener inside our application here which is actively listening to our firestore database and when a document is added or is deleted or changed in that database we want to be listening for that change we want to hear it so that we can react to it here on the front-end now we can do that in our fire store by using a method called on snapshot now if you've ever used anything like jQuery or other kinds of JavaScript libraries you're probably familiar with things like on a click we grab an element and then we say on click do something so this is the same kind of thing we're saying on snapshot do something so when there's a change in the database then what we're going to do is fire this function which reacts to that snapshot and then we receive that snapshot back of that updated change if you like to the database ok then so let's do that let's set up this listener inside our code over here so first of all I'm gonna delete this stuff out because we're not going to use this to get our data anymore we're gonna use this real time listener and when our application first loads up and it's listening to the database it's gonna listen for those first documents not because they've changed but because this is the first time it's listening to the database and the ones it sees in the database at that time to begin with they are counting those new documents to our application right here so is treating those as being added if you like so we're going to use this real time listener to grab those initial documents as well as any other changes in the future therefore we don't need this thing right here so anyway let's go down here and do this real time a listener stuff so real time listener all right so we still want our database and we still want the caffee's collection so we'll say doc collection and then inside we want the café's like so we also want to order these by city so we have that reference now to these documents now we want to say on snapshot what you want to say when something changes in this collection we want to fire this function this callback function we're going to pass through to this snapshot method now we receive that snapshot back of the collection at that moment in time when there's a change so what we can do is detect the changes to the database via method called doc changes so I could say let's changes equal to the snapshot which we just received back every time there's a change dot doc changes now what I'm gonna do is log this to the console so we can see it console.log changes okay so let's save that and whew over here now we shouldn't see these on the left but we do see these six things right here so this array of these six different objects these are the different changes right each one of these is a document inside our fire store one of these things one two three four five six it represents one of those so you can see right here the type of this change is added that's what fire store says has happened when we first load up our application so we could get nose and out put them here now to the dom and we also want to listen for additional changes when something's been added and we can tell the type of change by this type property right here if something's been deleted the type would be removed etc so what we want to do is cycle through each one of these first of all and we want to check what type it is if it's added then we want to output it to the Dom if the type is removed we want to take it away from the Dom make sense so let's do that let's get rid of that and instead will say changes which is that array we just saw dots for each to cycle through them now inside here we'll take each individual change as a parameter to the callback function and what we'll do is console dot log for now the change dot dot dot data so what we're doing here is we're grabbing that change we're seeing the document on it and we're grabbing the data remember this is how we get the data inside a document so let's see what happens now and now we can see all the different documents right here and all the data in those documents that's pretty cool right okay so we can get rid of that now I just wanted to show you what that was and now we want to check the type of change is it an a deed or is it a removed so we'll say if and then change dot type is equal to add it then what we want to do is add this document to the Dom so we'll say render Kaffir because that's how we render a cafe or a document to the Dom and we'll pass in the doc and that is change dot doc so we get the document of the change just by saying dot doc after the change so whenever there's an added we're going to render that to the Dom via this method right here this function right here called render Cuffy okay so that's that bit done then we'll say down here else if the change dot type is going to be equal to removed then what we'll do is we want to delete that from the Dom so we'll say let's Li equal to cafe list dots query selector I'll explain this in a second and then inside here I want to use the attribute selector to say the data - ID is going to be equal to something I'm concatenate in the change doc doc dot ID right here and then I'll close off the attribute selector like so okay so what am I doing here first of all well I'm trying to grab the Li tag on the page so one of these things that's going to be listed down here where the data ID attribute is going to be equal to the ID of the document which was changed so if I delete a document in fire store then this is gonna fire right here this on snapshot event because there's been a change the change is going to be a delete type right here removed rather so this is gonna fire so I can get the ID of that document that's been changed by saying change dot dr. ID so what i'm doing here is finding the li inside the dom where the data ID attribute is equal to the ID of the document which was just removed from the fire store so we've got that Li tag now now we just want to remove it from the Dom so I could say Cafe List dots remove child Li like so and it's gonna remove it from the Dom okay so let's see if this works I've saved that and head over here so first of all it outputs all of those and that's because these were all added types when we first load an application it sees the initial documents in the collection as added changes so without putting those here because when the type is added we're calling render cafe and passing the document through now if I delete something and that's being deleted in the firebase we saw that delete from here there and that's because when there's a change again this is fired the change doctype is removed because we've just deleted it from the fire store and then we're grabbing that Li tag based on the dock ID and we're removing it from the Dom so this is your real time listener right here is reacting to whatever happens in the database when there's a change if something's been added or removed or edited so this on snapshot method right here is what we'd use to set up real time capabilities in our application