Appwrite Database Tutorial #6 - Realtime

Key Takeaways

all right then gang so now we have a few different crud actions wired up so we can fetch documents we can add new documents and also delete documents as well but currently whenever we add a new document or delete one it doesn't update the UI in real time we have to refresh the page to see that change because it's only when we first load the app that we're fetching all those documents we don't refetch them whenever we add new ones or delete current ones and that's why we have to refresh the page when we do those things to see updated UI so there's a couple of different solutions to this so that we're keeping the UI in sync with the collection in the database the first one is to manually update the state locally within the note list components every time we either add a new document or delete one that would work the second one is to set up a real-time subscription to the notes collection in the database so that whenever the collection changes we get notified of that change in the client and we can react to that change by updating the states and for two reasons we'll be using that second approach the first reason is because this is an upright tutorial and it gives me a chance to showcase the realtime capabilities of app right the second reason is because by using a real-time subscription it also means the UI updates in reaction to changes not necessarily brought about by the current user and by that I mean imagine another user had this application open and they added a new notes well then our UI would update as well because we get noed ified about that change in the collection brought about by a different user so that's pretty cool all right then so let's have a little look at the docs and figure out how we can set this up so I'm going to click on this real time link over here to see what's going on with that and you can see right here on this next page it says that ight real time allows you to listen to any ight events in real time so that means any database events but also any other events from different app services like authentication events or storage events Etc which is really cool now if we scroll down a little bit you can see here that it also says that to subscribe to events you need to specify a channel to subscribe to now those channels are all listed down here somewhere if you keep on scrolling down and they're going to be in a nice little table so the channel we want to listen to is just this second channel right here which is databases. id. collections. id. doents and these ID values in square brackets they're the things we need to replace with the actual ID values so for example this first ID after databases would be the ID of the database we're subscribing to and that's Notes app in our case and the second ID would be the collection ID so notes in our case so by subscribing to this channel we'll be notified about any creates updates and delete events that occur in that collection all right then so I'm actually going to copy this channel right here then we're going to head back to the code and we're going to try and set this up okay so we're going to subscribe to the notes collection so that every time a change happens in that collection we get notified of that change and also the type of change that occurred as well so that could be that a document got created for example or deleted or even updated and we're also told which document the change happened to so then we can update the states in this list component based on that so we're going to set this real time subscription up inside this list component because this is where the notes state is right and that's what we're going to be updating when the change occurs and we're going to set it up inside the use effect hook which findes a function when the component first renders in the browser and that function is the first argument of this use effect hook the second argument of this should be an empty dependency array which means the function essentially only runs on initial renders and not when the state changes or anything like so then inside this function we're first of all going to make a new constant called Channel and I'm going to set that equal to a string and then paste in that channel value that I copied from the docs so now we just need to replace the first ID to be the database ID which is Notes app and then we need to also replace the second ID to be the collection ID which is just notes and now we have a channel right here we want to subscribe to the way we set this up now is by first of all using the client instance we created back in one of the first lessons and we exported that from the app right file in the utils folder so if you start writing clients then you should get the option to click on it right here which Auto Imports the file for you when you do click on it all right so make sure that's imported okay and on this client we need to use the Subscribe method to subscribe to a channel now as a first arent to that subscribe method we pass in the channel we want to subscribe to which is just the channel that we made up here this constant and as a second argument we pass in a callback function which fires whenever we get notified of a change in the collection also as an argument to that call back we get access to a response object which is what app right sends to us when it notifies us of that change all right cool so now we've set up a subscription to the notes collection which a function every time there's a change in that collection now inside this function we can do something with this response object to check the type of event that happened in the collection and also to get the response payload which in our case will be the document which either gets created or deleted so then what I'm going to do is grab two things from this response the event type and also the payload to get the event type we can say const event type is going to be equal to the respon response object and then we're going to use the events property on that which is an array and we're going to grab the first item in that array using index zero now this array is going to have a bunch of different string values in it which describe the event that happen basically in different ways the first value in the array is generally always the most specific description of the event that occurred because it contains the entire path to the document including the database ID The Collection ID the dou ID and also the event type at the end in fact what we'll do is also log these events on the response object to the console so you can see exactly what they are when we test this out but anyway that's the reason we're grabbing the first event string in this array because it's the most specific and it includes the event type okay so next we can get the payload which is the documents that got created or deleted to do this we're going to say const changed note is going to be equal to response. payload and we're also going to cast that as a note object because we know this payload will have those three notes properties within it right so we have those two things and we can now check the event type and then update the state using this changed note value so we'll start by saying if then inside parentheses we can say event type dot includes and then we're going to see if that event string includes the word create now if we're creating a new document in a collection then at the end of the event string will be the event name which is create so if this is true we'll know the type of event that happened was a create event to add a new note now in that case we want to update the Note state to add this changed note which will be a new note in our case so let's say set notes to update that state and we're going to take in a function to update it as an argument to that function we get the previous note state which I'm going to call preve notes then we just need to return the new value for the notes which is going to be an array and inside that array we want to add the new changed notes and also we want to spread out all of the previous notes by using the spread syntax before preve notes and that's it now when a new note gets added to the database we get notified of that change and we add that new note to the component State as well triggering a render okay then so next up we need to handle the delete event for when we delete note documents to do that we can add another if check to see if the event type includes the word deletes and again that event string will have this word at the end of it whenever a delete event occurs so then inside this code block we can update the state again this time by saying set notes and then passing in a function to return the new state values we'll also take in the previous note State as well as an argument to this function which again I'm going to call preve notes okay so this time we need to remove or filter out the changed note from the state because we're deleting it right so to do that we can return pref notes and then we're going to use the filter method on that the filter method FES a function which I'm making right here for each value in the array that we use it on in our case that's the previous note States and for each value in the array we take that in as an argument to this function then for each note we can return either true or false inside this function if we return true we keep that note in the array but if we return false we filter it out of the array so then we want to return true for every note where the ID doesn't match the ID of the changed notes because when they don't match we don't want to delete that one so we can say notes dot then dollar sign ID is not equal to the changed note do dollar sign ID and this will be true for every note except for when those IDs do match and then we return false and we remove the item from the array does that make sense awesome so now we're reacting to both event types and updating the state accordingly the last thing we need to do in here is a little bit of cleanup and unsubscribe from the real time changes when the component isn't really needed anymore now we can do that by coming up here and saying const unsubscribe is equal to this subscribe call on the clients and the reason I'm doing this is because the Subscribe method actually returns an unsubscribed function which we can then invoke when we want to unsubscribe from this channel so we're storing that in this new constant right now and all we have to do is return a function from the use effect hook which fires the unsubscribe function and this return function will automatically fire when this component unmounts the Dom whenever it's not currently needed anymore and by doing this it means that if you were to navigate to a different page for example and then back to this page again we're not stacking up multiple subscriptions on top of each other all right then so now let's try this out okay so I'm going to start by adding a new note which is just going to be I don't know walk more and then add the note we should see it now appear here in real time as we add it which we do awesome all right let's try one more sing a song and add the notes yeah we see that as well and we can delete these and we should see that update in real time as well because we react to both events Awesome everything working so hopefully that demonstrates how useful and effective this real-time API is and again it's not just for database um events it can also be events for things that you upload in storage or anything to do with um the account so use a sign up and things like that so definitely take a look and see what else you can do with it