Full React Tutorial #29 - Making a POST Request

Key Takeaways

all right then so now we can submit the form and we can create these blog objects the next step is to make a post request to json server to add that data to our data file so we're not going to use the use fetch hook this time we could probably edit this so we can handle post requests as well and make a more universal hook but i don't want to do that instead i'm just going to make the post request inside this handle submit function because we're only going to make that request once in the whole application not in two different places okay so first of all i'm going to delete this console log at the bottom we don't need that and instead we're going to make a fetch request using the fetch api and this is going to be to the same end point as the get request to get all of the blogs so let's go to the home page and grab this endpoint right here copy that and paste it in here because i was too lazy to write it out from scratch get rid of the extra quotes and now what we need to do is add in a second argument and this second argument is where we tack on the data but also define the type of request we're sending the method if you like because this is going to be a post request so we say method is post we also need a headers property and that is so we can say the content type that is being sent so let's say content hyphen type like so and that is going to be application forward slash json so this is basically telling the server the type of content that we're sending with this request we're sending json data now the next property is the body which is the actual data we're sending with this request and that data is going to be this blog but we don't just say blog first of all we have to turn this from an object into a json string and to do that we use the json object then we use a method called stringify and we pass in the object we want to turn into a json string and that is the block and that's pretty much it so this will then make a post request to this endpoint which is the end point we need to make a post request to add in a new blog and that will add a new blog for us a json server will automatically add the id property as well now since this is asynchronous and it returns a promise we can tack on a then method which fires a function when this is complete so what i could say down here is console.log and we'll just say new blog added like so so let's give this a whirl first i'm just going to add this blog right here like so and it says new blog added and then if we go to the home page we should be able to see that new blog right here awesome so that's worked but what i'd also like to do is maybe add in a loading state when we add the blog and it says in the button something like loading so let's try that i'm going to create another piece of state up here const and we'll call it is pending and then set is pending like so and i'm going to set that equal to use state and to begin with it's going to be false because when we first load the page we're not making that request straight away it's only after we try to submit the form so that's right here so let's inside here say set is pending and we're going to set it equal to true now at this point down here we want to set it equal to false when it's completed so we can say set is pending to be false right here okay then so now down here what i'd like to do is output one button if is pending is false and that's this one so we can add the blog and then a different one if is pending is true because at that point i want to say on the button something like loading and also maybe make it disabled so we can't click it so i'm going to surround this in curly braces and then i'm going to say not is pending so then double ampersand and this is only going to output if this is false which is what we want and then down here below that i'm going to duplicate this and change it to just is pending so if it's true we want to output a disabled button and instead we'll say adding blog dot dot dot like so save it and now we can see that we see adding blog right here and that's because is pending is it true so is pending it should be not a string just false that's why it was true so save that and now we can see add blog right now if we try to add another blog and click it it should go to adding blog like that and then when it's complete it goes back to ad block so that's a bit better you could add a different loading message if you prefer i'm going to stick with this now it would also be nice if we could redirect the user to maybe the home screen after the blog has been added and we'll see how to do those redirects next