Making GET, PUT, POST and DELETE HTTP Requests using Fetch from a React Native App

hi everyone today i'm going to show you how to make api requests from your react native app i have shown this before but just with the simple get request this one's going to go into a bit more detail so first off i'm just going to show you how to set up my local python api that i've developed i'll also link the code to the github repo below and also the video tutorial where i actually created this api so once i've got the api running i can head over to the app.js what i'm going to want to do is i'm going to want to be able to press a button and call different apis so my first api is just going to be a really simple get demo so it's just going to get employees and they'll just call the employees endpoint of my api running on local host port 5000. so we're going to use that fetch call to call the api and we'll pass the api in point in so once again that's just going to be localhost 5000. now they've copied that link i'm going to go ahead and restart that api just going to add slash employees to the end of that so you can see that matches with the app route once i've done that it's going to basically return a response um what i'm not going to want to do with that response is i'm going to want to log the status and the headers that just sort of can give you a better idea of what's going on for example with the post it'll have a location header which can be used to see where your other resources you can access them from or delete them from so with where you can put delete or get a specific resource that you've just created it basically gives you what id the resource was created with then i'm going to want to return the json response that's just going to be a promise that then evaluates to some json so then i'm going to need to handle that json response so inside this i'm going to provide the handling for the result which is the json and also if there's any error then i'll handle that as well i'm just going to console log that result in your actual application you'd be doing more than console logging but for the purposes of this simple demo and for making this a reasonably short tutorial that demonstrates what it needs to i'm just going to console.log it and you can choose to do whatever you want with the results i'm also going to use that same code for get employees multiple the fetch part of that code i'm just going to reuse that multiple times i'm not going to bother about keeping the code tidy i'm just going to do a simple copy and paste um it'll just sort of make things a bit more simplistic to read and follow along with so i'm going to have a button that when i press it we'll get the employees and console log them if i go ahead and save that then you'll see my get button appear i can open up my terminal and when i click get at console logs the status the headers and the response which is the different employees so you can see it's status of 200 which is successful and you can see different headers including a bit of detail on what the server is i'm going to go ahead and add another get endpoint which allows me to get a very specific employee so you can you can access employees by their id and it will return a single employee so i'm just going to pass an id in here and all i'm going to need to do is update this api endpoint to also include the id of the employee i'm also going to want to add a new text input the reason i'm wanting to add a new text input is so that i can get the id from the user and then show that employee back so it basically will get whatever employee the user is requesting i'm going to need a bit of state management for that and i'm just going to specify the placeholder of employee id so people know what to enter i'm not doing any validation here if you were creating a production app you'd do that and i'm just going to specify some site styling for the input basically i'm going to want it to stretch out the width of the screen and have some padding and margin so that's why i've got a line self stretch and then just some margin and padding that'll just make it easier to interact with so apply that style to the text input and then i want to specify the value which will be employee id and i'll set that up in a minute and then i want to set my value when the text changes so i'm going to use set employee id to do that now if i go up i'm going to be able to specify the state but i'm going to first import use state from react now they've imported use state i can define my state variable so i've got employee id and the setter for that is set employee id i'll use state and pass the default value in which will be empty string basically that's saying that to start with there'll be no string set against the employee id text input and i'll show that placeholder instead now when i was actually calling set employee id i didn't actually pass the value to it i'm going to need to go ahead and do that so i'm just going to do that here and then i'm going to add a new button which is get by id and what that's going to do is basically call that get employee function and pass in that game the employee id that's specified in the text input so if you look here you can see one two and three for id i'm going to get employee id2 and you can see it returns the correct employee id with the id of two if i enter one that doesn't exist it will give me a 404 you can see that in the terminal in the status and also this error message that employee does not exist you can also see that in the terminal that's running my api below now that i've got my two gets set up i can go ahead and i can make a simple delete the delete is basically going to take in the employee id much like the get except it's going to go ahead and delete the employee rather than get the employee i'm just going to copy this method once again for simplicity this isn't great in terms of code reuse but it will make it easier for people to sort of understand and follow what's going on if they only need a specific http call so that's why i'm going about it this way so basically you can pass some options to the fetch and i'm going to pass a method which is the delete method which basically means my delete http endpoint will be called you can also pass headers but i don't actually need that for the delete so if i click on if i enter a try to delete an employee that doesn't exist it gives me a 404 and says employee does not exist now if i go ahead and try to delete an employee that does exist so too we can see that it works and that this employee's been deleted if i do a get you can see that the employee with id 2 no longer exists and that's just because my delete has been successful so now that we've got a delete going we can actually go ahead and add an update so an update is very similar in terms of code but what we're going to need is another text input which takes in the employee name and that's because that's the property we're going to want to update on the different employee models so this time i'm going to have a set employee name and an employee name state variable and i'm going to go ahead and define those above as well so you can see i've got that text input now but i still need to go ahead and add my function that will allow me to update the employee and i also need to add a button that will allow me to update the employee the update is actually represented in http request by the put method so that's the method that we're going to use this time instead of the delete and also you can pass a body in which will be the value that you want to update represent the model you want to update so i'm going to show you how to do that now i'm also going to need the name of the employee that i'm going to update the endpoint will stay the same because i need to specify what id i want to update so the method is put i can specify some headers for the content type which is going to be json content type that's a very typical format of sending data so just specify the headers inside this little header object here then i'm going to want to specify the body what i'm going to want to do is i want that to be jason so i can use the function uh json.stringify here that's just a built-in javascript function and i want to specify the name so it's basically going to pass json data to my put endpoint with the name that i want to update the specific employee's id's name to so i've got my get you can see i've got mary and sally i'm wanting to update employee id free and i'm going to give them the name they want to update them to i'm going to update them to joan if i go click update it says that it's been successful i've got 200 returned if i click that get by id i can see that id employee id free has the name joan and if i get all it still has the name joan so you can see that it's been successfully updated finally the last thing you might want to do is you might want to create a new resource so a new employee to do that you're going to use the post method and it's going to look much like update employee except because you're creating it's going to create the id for you you don't need to specify the id so i'm going to remove that id parameter from my end point i'm going to update the method to a post and from there it should work pretty much the same as my put or my update so i'm going to copy that button and i'm just going to change that text to create employee and i don't need to pass the employee id this time just the name i'm also going to update the title of the button to just say create a reminder that i don't have any validation on the text input if you did want to do that you'd need to go ahead and add that yourself um in a production app you would want to do so so yeah i've got this post and if i um change the name it's going to pass this new employee and create this new gerald employee it's got 201 status which means created and you can see that location header which basically shows you where you can access that that new resource from if i do a get you can see that my new employee with the idea for is existing in there with the with the name of gerald so it's all working correctly so yeah you can basically call any of the post uh any of the get put or delete using that location header that's basically a key thing to remember and i really hope you've enjoyed this tutorial and that it helps you call apis from your react native app all this code will be on github and if you've liked this tutorial please like and subscribe for more content

Channel: MissCoding

Views: 10,331

Keywords: react tutorial, restful api, react native http request, react native http post request, react native fetch api, react native fetch data from api, react native http put, react native http delete, react native call api

Id: nOzaJPneCRY

Length: 16min 35sec (995 seconds)

Published: Tue Jun 14 2022