Appwrite Database Tutorial #3 - Creating New Documents

Key Takeaways

okay then so now we've set up the connection to the app right project let's go ahead and start adding some data to it now app right uses a nosql database and within that we have collections of documents where each document is a bit like a JavaScript object with key value pairs so we already set up a database collection in the first lesson called notes and we just want to now start adding documents to that now to do that we need two things the database ID and the collection ID so that we can specify EX exactly where we want to save these new documents to find those first head to your console and then you also need to select your project once you've done that go to databases which lists all of the databases that you've created for this project and you can see the database ID right here so copy and paste that in notepad or something because we'll be needing that shortly next click on the database to see a list of collections inside it and we've only got one collection called notes with an idea of notes as as well so copy that value down too because we'll be using that one as well okay so now we have those two values let's head back to the code and add the logic to save new documents all right then so we already have a new note form component set up and ready to go so inside here we're storing whatever user types into the text area using some States called content and that updates every time the text area value changes and currently when this form gets submitted it triggers a handle submit function which then prevents the default action of the page refreshing after that it checks the content isn't empty and then resets the value of the content so it's inside this if check right here before we reset the content value that we need to save that new content as a note document to the database now instead of writing all of that logic inside this function instead I'm going to create an action for this logic and put all of that in inside an actions file Now actions are a relatively new feature of nextjs and they're basically functions which can be run on the server and return a value to the clients and we can invoke those actions directly from client components like this one so then let's make a new actions folder over here to store this action file inside of and then inside that folder we want to create a new file called note actions. TS and now for any database interaction that we need we're going to make an action for that inside this file so then to make an action we just need to export a function and put the action logic inside that function to begin with we'll export an async function which I'm going to call add notes and this function should take in an argument called content and the type of that content should be a string now the return value is going to be a promise because this is an asynchronous function but that promise will eventually resolve to be a note object and that's going to be the note that we save to the database now remember at the start of this course I showed you a file down here called types. D.S where we registered a custom interface or type if you like that we can use in this application called notes and that interface said that any note objects must have these three Fields an ID field a created app field and a Content field all strings also notice these first two Fields have dollar signs at the start and that's because these are Fields generated by app right and ight adds these dollar signs to the fields to mark them as such anyway back inside the actions file we're saying the return value will eventually resolve to be of type notes with those three Fields now one thing before we go any further I've just noticed we have this utils folder right here where we have this app right file that we set up in the last lesson and I've actually put this utils folder inside the app folder but normally what I like to do is put that inside the source folder outside of the app folder as well the app folder I like to keep for things like components and actions then any utility files or service files I generally put just inside the source folder outside of the app folder so inside this function then we need to somehow create a new document inside the database and to do that we need to import the databases instance we created in the previous lesson from inside the ight file remember we exported the databases value right here and that's what we now need to import in the actions file so we can use it to interact with the database so now at the top of the actions file we can say import that we want curly braces and we want to import databases and that comes from slaight okay then we can come back down here and we can just say const uh response is equal to databases which we just imported and then we can use a method on that called create documents now this method takes in a few different arguments the first one is the database ID as a string value which for me is Notes app the second one is the collection ID as a string value which in my case is just notes remember I showed you how to get both of these ID values at the start of this lesson we also need to pass in two more arguments as well the ID of the new documents and also an object to represent the new object or document we want to save so we can tell app right to generate a unique ID for us by saying ID capitals do unique and then invoking that method but we also need to import this ID thing right here from ight in order to use it so we'll put the top of the file we can just say import curly braces and then we want ID and capitals and that just comes from the ight package we installed all right cool so finally we just need to pass in the object which we want to save as the documents inside the collection so let's actually make that new object up here at the top of the function by saying const new note is equal to just an object and I want to add a Content field to this object to specify the note contents and the value of that is just the content argument we take into this action so that's the only field we need to add and then appar right's going to add on an ID field for us as well as a couple of other automatic Fields as well which we'll see shortly anyway now we can pass that new no object in as a final argument right here and now when we invoke this action it's going to reach into the notes collection and save this new note document and it's going to apply an autogenerated unique ID to it as well now as a response to this create document function we actually get that new note document back from app right and it contains a bunch of different properties on it created by app right along with the content property we added and that document now gets stored in this response constant so we can access all those properties directly on it now remember this function returns a promise which eventually resolves to a note object so what we'll do is create a new object by saying const note is equal to an empty object and then inside this we can just add the properties of a note object which remember if we take a look at the types file are the dollar sign ID dollar sign created app and also the content and the first two properties have that dollar sign in front of them remember because ight generates those fields s so we can go back to the action and now the dollar sign ID is the first property and we can set that to be equal to the response we get back and then access the dollar sign ID property on that next we need the dollar sign created app property and the value of that is just going to be response do dollar sign created at and then finally we need the content property and the value of that is just response. content without a dollar sign because we created that property right all right so once that's all done we can just go ahead and return that not object from this action okay then so now we have this we can go back to the new Note Form component where we Tred to add a new note and inside here we want to invoke this action this add note action so I'm just going to say right here await add notes I'm going to click on this and it should Auto Import this thing for me up here from the actions file which it does awesome so remember we have to pass as an argument right here the content now we have that stored in this state so we can just pass it through like so and that's all there is to it so let's try this out now all right then so before we try this out I'm actually going to go to the database over here we can see this notes collection I'm going to click on it and we can see right now we have no documents right so if we go back over here I'm going to write something in like make a tutorial and I'm going to click add notes now apart from this clearing nothing happens on the front end we don't see any changes and that's right because we've not implemented any front end changes yet all we've done is sent a request to aight to add a new document to the notes collection but if we go over here and refresh now we should see that we have this document right here and this document ID the ight generated for us okay and you can click on that to see the data if you want so the content property make a tutorial that's the one we had the overview down here you can delete the document if you want we don't want to do that we're going to be deleting documents from the front end later on but anyway now we know that works now in the next lesson what I'd like to do is when the page first loads we want to fetch all the documents so we're going to do that and create an action for that in the next lesson