Appwrite Database Tutorial #4 - Fetching Documents

Key Takeaways

okay so in the last lesson we added the functionality to create new notes in the database and what I did after the lesson was complete was just go ahead and add a couple more so that we've got a bit more data to work with in this lesson so now what I'd like to do is be able to fetch all of these things and show them in the browser okay then so we want to list out all of the note documents from the database inside the note list components and that component takes in a prop called initial notes which is a list of note objects and we have this bit State set up called notes and the initial value of that state is just the initial notes prop that we Tak in so we actually render this noteless component inside the homepage component right and we pass those initial notes in as a prop right here but right now it's just an empty array so now we're going to create an action to fetch all the notes from the database and then invoke the action from this page component then we can take those notes and pass them in as the prop value so we're going to make this action inside the notes action file again right beneath the ADD no action so to do this we can say export async function we're going to call this one get notes now as a return value it's going to be a promise again which is going to resolve this time to an array of note objects because we'll have multiple notes okay then so inside this function we want to fetch all the documents for the notes collection and to do this this we're going to be using a method on the databases value which we imported from the app setup file so let's say const response is equal to a weit and then it's databases and we use a method on that called list documents we need to also pass in two arguments into this method the database ID as a string which is Notes app remember and then also the collection ID as a string which is just not notes so then this method list documents it grabs all of the documents inside this collection within this database and it returns that whole collection of documents for us inside an array which we can then access through a documents property on this response object that we get back so let's just quickly log those documents out to the console so that we can see them later when we invoke this action now if we wanted to we could just return all those documents directly but they contain a bunch of properties I'm not really interested in for the sake of this project and instead I want to return an array of note objects as defined by the note interface which just contains three properties the content the ID and the created app properties and remember the ID and the created app properties start with a dollar sign because they're generated by app right so we could map the array of documents into a new array of note objects and then return that value to do this we can say const notes which is of type note array and we say that that is equal to response which is the response object dot documents to access the array of documents and then we're going to use the map method on this now the map method FES a function for each item in this documents array and for each item we can return a new No Object which then gets stored in the notes array we're creating so let's add this function and let's take in the current documents as an argument for each iteration and then we want to return a new object inside parentheses for each documents now this object just needs those three properties first of all the ID property which we call dollar sign ID and then we'll set that equal to current doc. ID so this Doc is the argument we take you remember then we need to have a created app property with a dollar sign in front of it which is equal to Doc and then dollar sign created at and finally we need the content property which is equal to doc. content and there's no dollar sign on that one because we created that remember not ight all right and then finally we can just return this notes array so that when we invoke this action we're then returning the full list of notes right then so now we just need to go back to the homepage and we need to invoke that action and all we need to to do is set the notes equal to the action because it returns all the notes for us so we'll say get note so I'm going to click on this to make sure it gets imported up here at the top and we need to invoke this as well all right so we need to also put a wait right here because this is an asynchronous function okay then so let's try this out in the browser all right so now when you view this in a browser and you might have to refresh by the way you should see all of those three documents listed on the homepage awesome so that's working we're fetching all those documents now notice this um if I add a new document then we don't see that new document right here it is still getting added to the database but in order to see it right here we have to refresh the page because we're only fetching those documents when the component first loads in the browser okay now we will address that later on by looking at app right's real time capabilities but for now remember if you add a new note you'll need to refresh the page in order to see that