Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:18Length:1.9 hours
Introduction to koa javascript framework 400x277
  • Overview
  • Transcript

3.10 Creating and Getting Individual Tasks

The next thing that we wanna take care of is the ability to get in individual task by ID through a get, and we also wanna be able to create one. So before we really are able to get one, we have to be able to create one. And you can just go ahead and start doing this right away and implementing these on your own. But I'm gonna give you another package that I think is highly beneficial that makes the creation of objects through an API using Koa much, much easier. So here's what we're gonna do. We're gonna go back in to our shell and we're gonna use our friend npm one more time. So we're gonna do an install and this time we're going to install the koa-bodyparser. Now the koa-bodyparser is going to allow us to send data into our APIs whether it's on posts or puts or whatever, anything that has a body in the request. And it's going to actually attach it to the request that you're gonna see momentarily. As a property that is going to kinda hydrate it as an object using the JSON object, the JSON properties that are coming through in the request. It's gonna make much more sense to you in just few moments but I just wanna get this in there now so that we're able to use it. So now what we're also gonna be able to do and what I would highly recommend you doing is after you create or install something like this remember we're going to do a save dev. And then we're gonna go ahead and bring in the types for TypeScript that are associated with the body parser as well. So whether or not you're actually going to use those, it's usually a good practice to do that so that you can have access to it and be ready if you need it. So there we go, now we have that up and running. One final thing that we are gonna need to do and actually I can go ahead and get this started again so I can say npm run watch-server. So that'll get our server back up and running again. But now before we can actually use that body parser, we are gonna need to make one additional change. We're gonna come back into our server.ts file and we need to bring that body parser in so that we can actually use it. So let's go ahead and do an import bodyparser and were gonna set that equal to will do a require and we'll go ahead and bring in the bodyparser. And the bodyparser works as middleware as we talked before similarly to the way that the logger does. So right after this logger like here, we're gonna do an app.use and we're gonna go ahead and bring in our bodyparser, so let's go ahead and save that. All right, so now that we've had that taken care of what we can start to do is we can move back over to our tasks route. And start to implement the get of an individual task and the posting or creating of a task. So let's go ahead and handle the get first. So let's come in here, we're gonna get rid this line. And really when it comes to a get it's pretty simplistic. All we really wanna do Is we wanna get the task that has an ID that's being passed in via this URL parameter right here. So let's go ahead and do that, we're gonna say const task equal to, and we're going to once again do an await. Then we can say service, we're gonna once again use our service, we're going to get a task. And that task that we wanna get is going to have an ID, and the way that we get that is actually using our context. So we're gonna use the context. Now, when you are pulling data from the URL here, that's gonna be considered a parameter. And that's gonna be part of the params collection on the context. And then all you need to do is use the name of the property or the way that you've named it using the colon on the URL here. So we're gonna have this as .id. Now the problem that you're gonna run into here is the fact that this value is an any right now. And this is expecting to get an integer or a number, so we wanna be able to parse what’s coming in and make sure that it is a number. And so all we’re gonna do is cast that to a number just like that. Okay, so now we have this task, we’re assuming that we have this task and if we do get a task. Now remember we might not find one if we are looking for an individual one and it doesn't exist then we're gonna get back an undefined. But if we do find one then we wanna send back a successful response. So we're going to do a little check here, we'll say if task which means if it's truthy, which means if something exists in that value then we're going to do a CTX status. We're gonna return a status of 200 which means the request was successful. And then we're going to set the body equal to that particular task, so that's pretty good. So now as far as the else side of the world, which basically means we didn't find a task with that ID, then we wanna return back a value to the user letting them know that. And typically what happens in that case is you return a 404 status code, which means not found. So there is a couple of different ways you can do that but a one of the best ways that you can do that using Koa, is once again using the context. And then there is actually a throw method here that is a helper method that you can put in here the status code and it will throw the proper exception for that status code and send a response back. And the reason that we're doing it this way is that once we throw this somewhere in our server if we had additional middleware in here that was processing error requests. Then it will be able to catch that error properly and then do something with it if we needed that. But for now, this is gonna be just fine. So this is going to be our get of an individual task, we'll go ahead and save that and now it's time to do the post. So now we wanna be able to handle the creation of a task as well. So for this one, this is gonna be pretty simple too. We're going to assume that the user is passing in a task object as the body of the request. So what we're gonna need to do is we're going to say task and we're gonna set that equal to. Now when you want to retrieve data from the body of a request, typically what you're going to do is you're gonna be digging in to the actual request. And the nice thing about the bodyparser is it brings in another property as the request body. And we're going to be assuming at this point what's being passed in is going to be a task. But in order for this to actually work and become a task, we're gonna have to cast this to a task type. So we're gonna go ahead and do our casting right there. We're gonna import task so we can do that procedure there. Now we're gonna go ahead and create this new task. So we'll say const new task is gonna be equal to, we're going to await once again, we're gonna go into our service. We're gonna say we want to create a task and we're going to create this task. Now if everything is successful we get a new task object out and its gonna have an ID on it. Now typically the way that responses work for posts, if things work correctly you're gonna get back a status of 201 which means that it was created. And then you're going to get the actual body equal to that new task object that you created. And also you're typically going to get a header in the response known as the location header. So in order to set headers in Koa, you can once again use the context. And we're simply gonna be using a set method. And what the set method allows us to do is pass in kind of key value pairs that are going to be mapped into headers. So this one is going to be the location header. And what the location header typically contains is a URL so that the user or the consumer knows where the location of this newly created object is. So we're simply gonna say this is gonna be found at HTTP localhost, port 3000/tasks/, and then the ID that was created, so the newTask.id. So that's what's gonna be contained in the header. All right, so let's save all these changes and let's test this out a little bit. So in order to test this, we're gonna once again employ the postman tools. So let's go ahead and open up our terminal to make sure everything is up and running successfully. Then we're gonna open up postman. And let's shrink this down just a little bit. And so now, what we wanna do is, let's verify if we have any tasks. So let's go ahead and issue a get request to tasks, and you're gonna see that the response here is empty so that's good. Now if we were to go in here and say, I wanna get a task number one and then hit Send, you're gonna get a Not Found. And you can actually see we're getting a status code of that 404 that we talked about, so that's good. So now I actually want to do a post. So let's open up a new tab here. Let's do a post. We're going to post to our Tasks URL. We'll put that in there and now we wanna be able to send a body. So we're gonna select body, we're gonna select raw, and we're gonna select the fact that we are sending application JSON. So this is going to say what the format of the body is that we're sending and that we're sending in JSON. And remember the object that we're passing in is gonna have a couple properties. We're gonna have a name and we're gonna call this Sample Task. And then we're also going to have an is complete, which is actually going to be false to begin with. So this is gonna be our body, we're gonna make sure we have the application JSON specified, it's gonna be raw, headers are not gonna matter for this particular one. So let's go ahead and hit Send and we got back a response here. We got back a response of, the name is sample task is complete, is false, just like we said. But now we got back an ID of 1, cuz now it created that task in our in memory collection and it'll assign the next value to it, which was. So now, and also if you look in the headers you're gonna see that there's a location header that's gonna tell you exactly where you can get this from. And if we were to head back to our previous tab where we have a get and we're trying to get that individual task. We'll go ahead and hit Send. And there you have it, we're getting back the task that we created. So now in this lesson, we kind of covered a lot. There's a lot of things going on here, but some basic things. We've seen how we can set statuses on bodies, how we can throw errors if we don't do something correctly, or if there's something wrong with the request. And we also did some casting of the body coming through on a post, which we're gonna be taking advantage of again. And we can also see how to set some headers. So now that we have those things taken care of, we wanna be able to not only create and get these, but we also wanna be able to update and delete them. So that's what we're gonna take care of in the next lesson.

Back to the top