Appwrite Database Tutorial #5 - Deleting Documents

Key Takeaways

okay then my friends so now we can add new note documents and we can fetch them all as well when the page first loads the next thing I'd like to show you is how we can delete documents from the database when we click on these notes in the browser so just like with the other two database interactions we'll be making an action to delete documents inside this no actions file and then we'll be invoking that action from inside the notel list component whenever a user clicks on a note so then in the note actions file let's export another async function fun and this time we're going to call that function delete note now as an argument to this function I want to pass in the ID of the note that we want to delete so that app right can find that document in the collection to delete it so we'll call this argument note ID and that's going to be a string and that document ID by the way is going to be the one that aight generated for us when we created new documents anyway we're not going to explicitly return a value from this action so we won't add the return typon and then it's going to default to a promise that resolves to void and we can see that if we hover over the function name so then now we need to perform this delete request in here and it's really simple to do we can just say await and then we're going to use the databases instance which we already imported into this file and we're going to use a method on that called delete documents and invoke it and this method takes in three arguments the first is the database ID as a string which which in my case is just Notes app the second is the collection ID as a string which is just notes and the third is the ID of the document that we want to delete within that collection and we accept that as an argument to this function note ID so we can just pass that in as the third argument right here and that's pretty much it my friends now when we invoke this action it's going to go ahead and delete a document from the notes collection so then if we go back to the not list components you're going to see that when we output the list of notes we do two things first we assign an ID attribute to each list item for each notes and the value of that is the ID of that note using the dollar sign ID property second we attach a click event to each list item which fires a handle delete function and passes in the ID of the not we clicked on as an argument so then inside that handle delete function we accept that no ID but we don't really do anything with it yet now the first thing I'm going to do in here is paste in a tiny bit of code for stylistic purposes when we delete a notes and what this bit of code does is grab the element we clicked on by finding the element in the Dom using the get element by ID method and we just pass in the ID of the note because remember we appli the ID attribute down here on the LI tag once we have the element we check it actually exists and then we add a class to the element called cross outs and in the CSS file that class adds a strike through to the note so it looks like we're crossing it out now after we've done that we also want to invoke the delete note action to go ahead and delete the note from the database so let's say await and then we're going to invoke the delete note function and when you click on this it should Auto Import the action for you if not make sure you import it at the top of the file otherwise this ain't going to work all right cool now we just need to pass the notes ID as an argument to the action which we can do and now I think that's pretty much everything so we can save this and try it out in a browser all right so now if I click on one of these like sleep more then it's going to cross it out and that's the CSS um because we applied that conditional class that crossed out class when we tried to delete something it's not gone from the page but that's because we're not updating the state within the component the page itself but we are still deleting the document from aight I can demo that by coming over here and you can see it was which one was it buy some milk or sleep more that I crossed out sleep more so this document right here whenever refresh should be gone which it is and also when I refresh over here then it should be gone as well because remember when we first load the page we fetch the documents from scratch and since it doesn't exist over here anymore then we're not fetching that document we don't see it on the page anymore so we are successfully deleting those documents now and this is the same kind of thing as when we added some documents right if we Tred to add something then although it gets added over here we don't see it straight away over here we have to refresh to refetch those documents and then we see so we are going to combat this using real time uh subscriptions in the next lesson whereby when we make changes to the database the database notifies us of those changes and we can update the state locally within the component to reflect that change in the browser as well