Mastering API Request in React Native Using Fetch and Axios In One Video| GET, POST All Crud Method

hey guys welcome to Z cod in this video we're going to master the C operation in react native using the F and xos mastering means we're going to learn how to make API call in react native and how to perform all the request like get request post request put request and delete request using the Fetch and xos so after this video you will be able to master like making API call okay so let's see so first what we're going to do we're going to see that how to implement API request using the fetch in tract native we'll see the syntax and basic implementation of API request using Fetch and we're going to make the crud request handling and after that we will see like how to handle error and the response after that uh we going to see the exos library like we going to understand like what is the exos library so exos Library just like a fish which much more uh powerful uh feature like uh whenever we make API call using F we have to stingy that data before making API call but if you're using xos then you don't have to stringify that it's automatically stringify that so we will cover we will take a look that all the things the syntax difference all the things how to uh implement the card operation using F and XO so we will see that all the stuff uh using code and now the questions come up like you know which uh Library should we choose like should we choose F or xos so you know to if you compare we will also compare that like which so the F has longer syntax but the xos has some simple and shorter syntax and it is you know it become simpler for you so we will see like which Library should we use okay now after that uh uh so let's see how we can do it so first what we're going to do we going to we am going to create cre one server uh what I'm going to create a Json server for the backend apis so if you guys don't know what is Json server so Json server is just a uh Library which help us to build a server in less than 30 second so what you have to do for to build a Json server you have to open browser and type Json server when you hit Json server so why we using J server like you can use any apis but I'm going to use J server so we can build your own apis quickly so whenever you have to open Jon server and you have to install this globally so you have to open your terminal and install as a globally like this okay but I have already installed the Json server so I'm creating this and you have to type Json server so it will return that version if you have not installed it so it will throw error okay now after installing this what you have to do you can create uh things like that uh so let's see how we can do so I'm creating one folder called server inside this folder I'm going to open in BS code okay and I'm going to create sdb do Json file okay and I'm going to put put that data like this data uh post data like seems to be cool so we're going to have a post API where user can post the data like we have title let's remove the use for now we going to have a just title okay so we are in a API quickly and what you have to type to run this API Json servers that as watch and the file name whatever the file name is it and press enter so it will start okay my bad there's one syntax error so you just you have to hit it will start your server so if you click on this so you can see that we are running we are created one API and we can able to access this okay now after this let's see how how we can do uh you know F or how we can do crud using fit uh in react native so if you see that we are inside the root app component and our root app component is clear right there's nothing you can see that we have view inside view we have a text and we are just learning that text okay so first what we going to do we going to see like how to make API how to make API call get request uh using fit get request using fet Okay so let's see how we can do that so I'm going to make call get uh request using uh using fetch okay and we will understand what is the difference between using the F and xos we will see that all So currently I'm going to use x ASN like async and arrow function okay this is how we create a sing and arrow function and what we have to do uh we have to pass the URL you know so I'm going to create one API URL uh here like const API URL and you know our emulator doesn't understand the Local Host so what we have to do we have to pass our IP address okay instead of writing a local host so let me open my terminal and I have to write ip config okay and let me copy this address and place with the placeholder okay so this is our API URL become so you know you guys can have a you know different URL or different API URL like you can use uh this URL as well like Json uh placeholder API so you have to just type Json placeholder apis okay so when you hit this you can get this API also and you can uh test like you can use it for the testing purpose so oh my gosh okay so this this is the API uh you can use it so you can use this API as well so we'll also see that okay so currently I'm using my local API which I create like using the Json server in less than 30 second okay now I'm going to make this uh you know API URL as a global because we are going to use in multiple request okay and what we're going to do we're going to have a Fitch request so first parameter is called Fitch and what we have to pass we have to pass the API URL okay now after the passing the API URL we have to pass Define the method inside a second object so let's write the method so the method will be get request okay and after that we have to pass the headers as well and inside the headers we have to pass content type and we going to have application slj okay and I'm going to to use you know uh I'm going to use uh asyn of so we have to write like you know response and have to add a AIT as well before because it's f f is a Asing cooperation and we have to await until this uh data is come up okay so F text to parameter the first parameter is like API URL like currently I sign up one variable and passing that URL you can directly pass that URL as well okay that's up to you and the second parameter in the second parameter we are we have to pass an object and the keys like we have can pass method what method you are doing we have to pass headers as well and we can pass like all the headers like authorization token and if you can want to pass okay now after you know making a response you have to convert this response into Json Json format so we can have await response. Jon format okay now after this you can console the data if I console the data quickly console.log uh data from Fage and we can see okay so let me create one button uh here as well so title will be get request using fetch get request using fetch okay and on press event will be get request using fit okay so you can see that whenever I click on this let's open my terminal as well so if I click on this button so it's calling the API and we can see that we are getting this data perfect so you can see that what we have what we have to do we have to uh you know we have to write phage inside that we have to write the end point and the second parameter we have to pass the method headers and after the getting the data we have to convert that respon into Json format and that's how we can use it there's one more thing which I just want to add we have to use also try catch as well so if something wrong happen let's suppose your API get break or it's throwing some error so it will it will you know throw some error on this error block so try to use catch block as well so if you get any error like let's suppose if I do typo let me show you error so let's suppose uh if our endpoint is wrong okay so let's suppose if you don't have an endpoint I make a mistake on this URL and if I reload this okay and if I click on get request so you can see that we are getting error and we are consoling that error okay so if you get any error on this uh code so that will go into the cat block as you can see that we have mistake uh make the API is wrong and we are getting error snx error right and it went to the cash block automatically okay so this is how we make uh get request using the F now after this what we're going to do we going to uh learn like how to make uh get request using the xos and let me make this code much more bigger because in the last video I get a comment uh they are not able to read it okay so what we going to do we're going to install the xos as well so let me open the browser and I have to type npmi xos so you can see that we are getting this uh you know exos library and you can see that the installation is too high so let me install this as well so I have to just copy this I have to open my terminal so let me bigger this and just paste npmi xos okay so it will install the xos in some second as now after installing any packages we have to again install our app so you can see that it is started installing the app again okay so meanwhile it's installing the app now let's do our stuff okay so what we're going to do basically we're going to use the get request using the exos instead of using the fetch so what we have to do we have I'm going to create one function called get a request uh using exos okay and it's would be a Asing function okay now after that I'm going to have a TR catch block okay now having a TR catch block we have to use response await I have to import the xos so you can see that we are not getting any suggestion again let me okay so I'm not getting any suggestion so if we see oh my gosh okay let me import the xos from exos uh how we have to import import if we see the documentation like's suppose you don't know about the xus so what we have to do after installing this you can see that we have to import the xos like this import xos from xos and there's a lot of things like all the example how to make get request how to do all this stuff now we have to import the exos from exos okay now you can see that I imported the xos okay now let's see what is the difference between you know using the exos and fish so after importing exos we have to type xos doget and I have to just pass the URL so my URL I already assigned the API URL if you can see that okay and let me you know make the terminal is a smaller size right now so you can see that I have written the X API URL okay now once we get the data we don't have to stringify the data so I can just console this response if I console the response let me add a error as well okay and let me add one more button get request using using xos okay and let me call this function as well and let's add some you know some padding as well okay let's add some text so we get some uh spaces as well get request using fetch okay so you can see that we have another button called get request using xos now if I click on this and if I show you what I'm getting get request using xos so you can see that I'm getting the data like this so we have to do response. data okay and if I reload this again and again if I make request get request using xos so you can see that we are getting the data right means it's working right perfect now let's understand what is the difference between these two code is snippet using the xos in the F so you can see that if you're using xos so you have to just write xos and what method you are using xos dog x. delete that's up to you and the second end point is called the second parameter is called API so we have to pass the API URL and after that in the next line we are able to get the data in the response. data we also get the status like what is the status code 200 400 and if you get any error so it went to the error block okay now you can see that uh in the F if you're using F you have to write uh like almost five line but if you're using exos so it works in a one line and that's is the magic of exos you don't have to write another object you don't you don't have to do like this okay so this is the use of xos like it's become you you can see that like the number of code becomes too much smaller okay now after that let's see how we make a post post request so let's uh summarize this again what we have learned like get request using fet so what we are doing uh if you're using fetch so you have to write fet you have to define the end point now you have to define the method in the second object uh second parameter and we have to pass the headers okay and after that once you get the response you have to convert that response into J format okay and after that you will able to get the data but in exos you have to just type exos which method like get post and endpoint whatever your API URL and after that you will get the data response. data you don't have to uh convert in the Json format EXs already convert that under the hood in the Json format and this is the magic like which I love xos that's why I use xos okay and you guys should also use xos instead of using fetch it's much more readable it's much more sorter it's much more concise okay now after you know learning a get request using F xos or Fage now let's learn about the post request post request okay so I'm going to make a function called uh post request uh post request using fet for now okay and I'm going to create a Asing function okay uh you can use do then do catch as well if you are like let's use dot then okay let's use asyn like ASN I use because it's much more readable and maintainable code if that's why I use asit and let me add a tras block okay now after that uh let's conson response await so we are performing a you know as a operation so we have to use await F TT the first parameter as the URL so let's pass the API URL now the second parameter looks like this we have to pass the method like what method you are performing so I'm doing post request for now now let's pass the headers as well headress will be content type application Json application slj okay now the third parameter is called Data okay and we we have to stringify that data whatever you are passing so J do stringify okay and let's uh create one data like post data so const data is equal to title will be title will be learn API request in react native okay now let's pass this data okay now you can see that what we have done we have defined the we have written the Fage we have passing the endpoint and the second parameter we have defined the method headers and the data okay and we are converting this object into jon. stringify format before passing oh my gosh so know data will be almost after the head is not inside there that's I mistake or typo sorry for that it should be you know after the headers now after once you uh it's make a post request okay you have to convert again into Json format to cons data is equal to to await response. Json format okay now once we get into Jon format let's console this as well console.log data okay now you can see that we are getting error because we have already used uh response a data variable so let's make his uh response uh data response data and let's add response data okay now if you're getting any error regarding this so let's console the error as well so it will know that what is the error is coming now we have created a function called postquit using fetch let's understand this quickly so we are one having one object like title on API re react native we have to post this object okay we are using fish so we have using async AIT so we have to use AIT before the any time consuming or before the API call we have to use f inside the F the pass parameter is called API URL so we have to pass the API URL second parameter like you know object where we Define all the properties like we have to pass the method headers and the data okay and after that we are converting that response data into the Json format and we are just consoling that and if we are if we are getting any error in this block so it will throw the error into the error block okay now let's call this function by creating one another button so let's uh redem this with post request using F and let's rename this uh title as well post request uh post uh request using fetch so you can see that we created another another button called post request using Fetch and whenever we click that on press event so this will make a API call Post request using fetch okay now let's make our terminal bigger okay and let's click on post request using F and you can see that we are getting a data only we have ID not we are having getting all the data so let's see what uh it is doing so you can see that it's not creating a title it's just creating ID and that's weird for me but yeah it's making a post request and I think I'm doing some mistake let's what we have to do you have to do like fetch post request okay and once you do that let's click on this now you can see that uh whenever we make API call we have to pass body not a data so I was doing a mistake this okay now again let's do uh make API call Post request using fit and you can see that it's uh successfully uh done and you can see that in our server we had created a data okay so let's understand this so we are making a post request using fish so what we have do we have to write object like whatever we want to post post the data okay now in the after that we are assigning one variable response and we ating uh for the F uh and we have to pass the API URL and we defined the method as a post we have passed the headers and we have defined the body as well and we SFI that data uh before making the API call and that's what mistak you know I by mistake I make it data but it should be a body okay because we are sending in the body okay now once we get the data we are converting that data into this J format and after that we are consoling that as you can see that we have like you know if I make react only learn API request and react and make a request post request using Fage so you can see that it's created one entry in our DB as well and you can see that in our server okay now you can see that so this is how we make post request using the fetch using fetch but now after this let's see uh f squ using the xos and like how much is simpler with uh xos so I'm going to write a function called post uh request using axos okay I'm going to assign as a Asing function and let's uh do you want to use dot then do catch as look let's use dot then do catch as well right now and as you guys know like dot then. catch people usually use so let's use Dot do catch so what I have to do I have to write xos dot whatever method we want to use I'm going to use post method right now okay the first parameter is like you know API URL and the second parameter is just you have to pass the data nothing else you have to just pass the data you don't have to stringify the data nothing you don't have to create an object so you have to just uh write this data like you know uh like let's name as a data as well so I have to pass this data like this okay and learn exos Library so this is the data which you have passing exos dopost and after that let's add 10 we will get the response okay and once we get the response we have to just console the response do data okay and that's it's too simple and we can have a do catch as well to get any error okay and let's console the error as as well and let's see okay now you can see that post request using XO so first what we had done we had created one object cons data now currently you know for example showing you guys we are using a DOT then. catch method you can also use ASN of it but as you already know like we can use ASN of it but we using do then do catch xos then after the xos we have to import Define the metod like what method you want to do so so xs. poost API URL like we have already taken that you can see that this is the API URL the data which you want to make a post okay you don't have to stringify this it's just already it will stringify this object under the hood now after that we will get the response uh and we are consoling that response response. data and if you can get any error so it will went to the error block now let's uh call this function on a somewhere so let's uh I'm going to call this here now uh I'm going to call as post request using xos and let's rename is uh using axio okay so you can see that we had created one function one button called post request using xos and whenever we click whenever we press on that button we are calling a function called post request using F exos sorry and let's see now let me make my terminal bigger and if we get response will will get into this otherwise we'll get into it now let's click on this and you can see that it will just post the request and if you see our database a server so you can see that it's created one entry okay now this is how we can make post request using exos it's too Simple Man like you don't have to stringify the data you don't have to write another key body it will all automatically take the body data is a body like second parameter will become a body okay so that's uh one thing which about the XO so let's understand by comparison so if you're using fit so you have to pass the API URL and that's all the parameter like body all the stuff but if you're using exos xs. poost API URL the data and after that we will get the data okay but if you're using U this fish so you have to exify the data before making the API call and after the getting the API call you have to again convert the Jon format but post you can see that xos how much is it simple and that's why you use exos okay now we have seen the post request get request post request now let's see the put request put uh request using using uh using fetch okay so let's let's see that con and you guys there is one one homework like we are using do then do catch method you have to use ASN of it you can have to write it on your own and please let me know if you guys have any doubt on this okay now let's learn the post request put request using fetch so let's call a function called put request using fetch okay and again I'm going to use aing as you can see that it's much more readable much more clear and that's why I use a of8 and let me open my TR catch blog okay now uh what we have to do we have to write const response okay and await again and fetch and we have to pass the API URL okay now after the passing the API URL there's one more thing which I just letting you know guys you have to pass the ID like which item you want to update okay so basically the how does URL going to look like uh let me copy this URL you have to uh do like this you have to open the termin operator by just pressing the you know ternary operator on the first key on the second row you can get this keys and again you have to type slash and you have to pass the item which item you want to update okay which item let's suppose I want to update uh uh which item three like learn exos Library okay I have to update this so what we have to do we have to pass the ID like this okay 3184 four now after that as you know that we have to pass the all the things like we have to pass the method inside the second parameter object so the method is put okay now after the passing the method we have to write what we have to write headers and inside the headers we have to write content uh type application slj okay now after that we have to write the body as well so let's write the body and we have to stringify the data just do stringify and you have to pass the whole object whole object means uh whole object like uh update data okay and we're going to update the title will be title will make uh updated value okay and if I click on updated data like we have to pass the data by stringifying this and the title will become like for this 3184 will become uh the title will become updated value okay now after uh getting the response we have to convert that response in Json format as well so AIT response. Json okay now after that we can console the data and if you're getting eror any error so we can console the error as well okay now uh let's create one function called one button called post request using switch and we will call that okay so I'm going to create one button post request using fetch post request put request using fetch for now so you can see that we had created one button called put request using Fetch and let's open my terminal okay and let's me reload this okay now whenever we click on this uh button we are calling this function called output request using fet so we have defined one object upgrate a value and we are you know passing the ID like this on this URL and we are passing the body as well okay the this new object okay now if I reload this and if I click on put request using xos so you can see this we are getting the response as updated value and if I show you the server so this item is updated okay So This Is How We Do put request using the fit this is one thing which I just love to you know tell you guys as well so let's suppose if we have one parameter called age will be 12 and if we are making a put request okay and you are just passing this value like you know uh new updated value okay so what we're going to do basically it will replace this whole uh key this whole object with new object basically this whole object with the new object but the ID will be remain the same okay so let me show you so whenever we make a put request you have to pass the whole object not a single object whole object data okay just keep in mind this so now this I click on this so it should be update only title now but it will update this whole object so let me click on this put request using F so you can see that as it get removed only the title updated okay and if you want to you know just update one fil so you can use a patch request okay I know like it's bit confusing for now so just remember this like whatever you understand now we have seen the push request using the F so what we are doing we have defined the URL and the second parameter we have defined the method we are passing the headers and after that we are passing the body okay now uh let's do with the fetch as well like how much simpler in a fetch so I'm going to write a function called put request uh put request uh using uh using AOS okay sing function and again Arrow function as well and we're going to have a TR catch blog as well okay now after that uh what we're going to do we're going to add a response a wait and exos do whatever method we're going to use put method okay my bad and we have to define the URL so we going to again update that same item so let me copy this ID as well and instead of having a string we have to use template literal and you can see that our template literal looks like this and on the second parameter we have to pass this updated object so let me get one object quickly const update object will be title till will be welcome to 0 Dee coder okay I want to update with this value now we have to just pass this here okay now after that what we have to do we have to cons uh you know console the response and response. data so I'm consoling the response. data okay and if we get any error so we will calling this method as well so let's understand this code is snippet so we have defined one object which we want to which we want to replace with this uh new object okay and we have defined the this endpoint and we are passing this uh ID like which item I want to update okay and after that we are consoling the response. data and if you get any error so it will console error so I just let you know what do you understand by put request put request means let's suppose you have something at certain place and if you want to put something on that means the existing things will remove from there and put means like there will be something get put okay so if you're making a put request the existing things will get removed and new things will be updated or new things will be there now let's see put request using F so I'm going to create one button oh my God so this will be put request using the fetch we have seen in the last video now in this video we're going to see with the put request using the fetch okay so you can see that we have defined a put request using xos my bad put request using the axos okay now let me reload our app so you can see that we have one button called put request using uh using exos and we are calling this method we are calling this function so we are having a Asing operation Asing function and on the XS we have defined the uh you know you L and the updated update object now if I click on this put request using xio so you can see this this item is updated 3184 ID item is updated with the welcome to 0 degre coder okay now this is how we make update request using exos now let's understand the difference between the uh the difference code is snipp it between the fet and xos so for the put request we we have defined the fetch inside the fetch we have defined the URL okay now after that we have defined the method as a put and after that we are passing the body okay and inside the body we have to stringify that data and after that again we have to convert that into Json format but if you're using put request using xos we have to pass the endpoint along with the ID which item you want to update you can see here we have to pass the ID along with the ID which item you want to update okay now in the exos uh second parameter will be update object object just a normal object it will automatically under the it will convert that value into the stringify format and we are getting that data okay so this is how make a put request using xos as you can see that much more rable much more shorter much more simpler index so we have seen the get request post request put request now what we're going to do what we going to see we're going to see the delete request using the f as well as exos so delete request uh using fetch okay normal Arrow function this is how we create Arrow function you can use any function as you want and it's going to be async function because we are using asyn a okay now const response a okay F and the URL which you want to delete uh which item you want to delete so this is the item which I want to delete for now so let's update this URL okay now the second parameter we have to pass where we have to type the method method will be delete delete delete okay D okay now after that we have to pass headers inside the headers we have to pass content content type and applications SL Json okay now after that we have to also pass called body no we don't have to pass a body for now for sure now after that uh we are getting the response and again uh let me add a TR catch blog as well which I love to have a TR catch so I know what error we are getting so let's add a console to the hair okay now let's uh do like this const const uh basically const uh data and we convert the response in the Jon format respon await we have to use await as well await response. Json and after that let me console the data okay now let's understand the code so we are having a Fitch inside the fch we have defined the URL along with the item which item you want which you which I want to delete and after that second parameter in the in the second object or second parameter we have find the method and we are passing the headers as well and once we get the data we are converting that data into response. format and we are consoling that data and if I getting any error so it went to the error block now let's cre one button delete request using Fetch and we will call this function on that button click okay so let me replace this text delete request using fetch okay and delete delete request using fetch you can see that we had created one button called delete request using fetch whenever we press that button we are calling this function called delete us using Fetch and if I show you on the terminal so let's click on this and let's see on the terminal so I click on this and this item is deleted and let's see on the server so you can see that here this uh 0 degre Corder item is deleted from here okay so this is how we do uh Delete request using the fetch so let's understand the code once more on the fetch par on the Fage we have to pass the URL and the SEC URL along with the ID which item you want to delete and in the second object we have to pass the method address as well okay now let's do with the delete request using the exos as well delate uh request using using uh uh AOS it's it's much more simpler you know it's too shorter too concise so we have to use a sync of it like as I love Asing of each okay now after that we get the we assign a variable con response a exos and I have to pass the URL which item you want I want to delete so let me pass the URL uh and the id id will be let's delete uh the item will be let's delete this item learn API request in react so I'm going to delete this item so let me copy that ID and replace this ID with here okay and it should be not like this it should be like this okay now after that uh X oh my bad xs. delete and the delete will looks like this and we have to just pass the ID okay now uh you can see see this uh the ID is like this uh okay this ID could be like this you know const ID uh ID and we going to have a ID like this the item id okay and we have to just pass the ID like this and that's why using you know uh this uh turn this what you it turn template literals in JavaScript that's why you use okay now let's con let's see that response. data okay respon on. data and if you get any error it will wi to the error block as well okay delete request using xos so what we had done we have called the exos do delete and we passing the URL along with the ID okay the ID is this E9 2A E9 2A line number 19 learn API question react okay now let's uh create one button and call this on button click so I'm going to create one button uh Delete request using exos using AOS you can see that we had created one button called delete request using xos when we click on this we are calling a function called delete request using xos we are passing the ID which item we want to delete xos do delete method and we are conver consoling the data okay let me load this and let's see when I click on this uh Delete request using X let's see it's deleting or not so you can that the item get deleted okay let's delete this item as well learn API request in react native so I app have to just replace the ID okay and you can see that on the response we are getting it deleted okay now let's delete this item as we can see the B 092 we had passed the ID here and now I'm deleting again so you can see that the item get deleted okay so we have seen the get request using the f exos post request put request delete request now let's also see the patch request as well so that will complete the all the CR operation and you don't have to again learn this all the requested const uh patch request using of fch okay Asing operate Asing method and we're going to have a try catch okay now here what we're going to do we're going to use first of all exos as you know await F and the URL so now what we're going to do we're going to update this item so let me uh paste the URL and the ID will be this uh ID will be what let me remove this let me remove this whole object okay now what we're going to do we're going to want hand object title will be title uh title will be learn react native price will be free for now okay and yeah for sure just like this and we're going to have a ID as well okay we're going to have one id id will be one for now okay now if we make a put request uh okay now let's see with the patch request so that that ID is one okay now let's pass the ID as well const ID will be one okay so you can see that we had passed the URL await Fetch and we have written the URL post along with the ID okay now in the second parameter we have to pass that all the things whatever you want so first thing which you want to do method will be patch okay now headers headers will be content type content type application SL gestion okay now after this we have to pass the data as well okay the data uh in the body basically the body and body will be Json do uh Json do stringify Jon do stringify and let's add a object con patch data okay so basically what I want to do I want to just update the price okay the price will have to become uh at the place of you know we have uh if I show you the price So currently the price is free but I want to make out the price as a $120 okay so how we can do so we have to pass the data like this okay and we have to console the response okay first we have to convert that respon into Jon format response. J and we have to use await as well here await okay now let's console the data and let's console the error as well okay so we are consoling the error now uh patch request using F so what we going to do what we are doing we had passed the URL along with the it which item I want to patch patch means update patch means like you know while updating if you want to update only one field let's suppose I want to use only price I want to update the price value so that that point of time we have to use patch okay and we are passing the body by stringifying that data we are getting the data and converting that in a Jon form it okay now see let's see uh we going to create one Moree button okay patch request using a fet okay and let's create a title as well patch patch request using using fetch okay now if I click on this patch request using fetch you can see that it's we are getting any error unexpected and something error we are getting and and that's too weird like what the issue is it so we are passing the method as a patch okay and okay let's do a Google quickly so let me open this and let's go back and what we have to do fetch patch fetch patch request okay so I just enter it and you can see that uh we got some article okay and let's see what mistake we are doing so we are passing the ID we are Ming a a patch and and we are doing well man like what the mistake so let's summarize await F okay and what we are passing the URL and we are having ID as a one not a big deal method as a patch so let's see method is a patch yes it's correct patch headers and after that headers content type application slj and body jon. stingy patch data and await response. okay and we are consoling the data okay J pass error unexpected characters n okay let's again see that and if you click on patch request we are still getting that error and let's see it is updating no it's not updating okay so let's do like this the ID will go on the top and again if I do and we are still getting this error Okay so why we are getting error price will be uh price is also correct so that's too weird okay so you can see that on the content type we have to pass like this let's give a sort by doing like this headers and again let me reload this and it's still okay so let's do one thing so I'm going to do get request po request using the fetch so we can see one data is created on this uh DB and now let's update this uh ID will be this one ID will be we had passed the ID and we updating a patch request on the title the title will become uh 120 and let's update now you can see that updated so maybe I was doing some mistake on that it was not working because it is cre by me that's why it could be so you can see that it's created one another Field title so let's see one more times so we're going to have a uh not title we going to create a uh one price here okay now patch request and let's see price is created or not you can see that the price is created okay now basically what what I was telling you if you're using patch request okay if you're using patch request it will not update the whole object it will just update a one single field okay and if you're using put request so it will update with the uh uh that new object okay whatever you are passing okay that's means now let's see what we are doing here like we have passed the ID con ID inside the here and we are having a patch data we are passing the patch and we are having a price is a 120 uh whatever you want to do and response a wait okay the mistake of which I was doing now we have to stringify this ID I was not stringifying this that's why I was getting error and I have to pass the method as a patch and we have to stringify this data whenever we have to pass and we get the response now let's do the patch request using the exos as well patch uh request using AOS Asing again async and we have to use like this try catch and const response await exos exos uh dot patch okay and we have to pass the URL so again we going to uh update this uh URL so let me copy paste okay now now the ID will be let me copy this ID as well so this is the ID which I want to update okay and okay this is the mistake so you can see that uh this is the URL which you want to go to patch and the ID will be here and the updated the patch object const uh const patch value okay patch value and there we going to have a uh let's add one mode fi here we're going to have a name name will be uh 0 Dee coder okay and let's pass the patch value as well here okay and after indicating that we going to convert that response. data response. data and if you get any error so we'll console that error as well so let's see error patch request using xos now let's create one button so I'm going to create one button patch request using exos okay and let me reload this and if I click on patch request using axio button okay so it will call this function patch request using exos we are updating with the name inside this object with a z degree coder so if I click on this okay and click on patch request using XO so you can see that there's a name added Z degree coder okay so you know whenever we make a patch request so it will update the existing field with a new value let's suppose if you want to update zero Gorder updated okay I want to update this object okay uh this key with the new one updated value so again I have to make a patch request and you can see that this is updated okay so patch request mean it will update a certain field okay but if you're using put request so let's see if I make a put request and if I show you you can see that I make this request is a put request and if I call this button patch request button so you can see that it will replace only there will be only name okay and that's the difference between put and Patch put means it will put that new object it will put this new object patch means it will update it will add a new object or or it will update that that's a difference and people usually ask in interview so that's all the CED operation using Fetch and X which we have seen in react native okay let's summarize this all this stuff quickly and first we have seen like how to make get request using fetch so you have to you know we have to use fetch you have to define the URL and inside the object we have to type method headers and after that we have to convert the ingg format and you can use but if you're using X your you have to just pass the URL and you get the data response to data and post using fetch you have to write fetch P URL you have to define the method and when you have passing the data in a body you have to exify that data and after that you have to convert that data into Json format but if you're using exos you have to just pass the endpoint the data you don't have to stringify that and you get the object okay put request again uh using fetch so you have to pass the endpoint along with the ID okay and after that you have to define the method and we have to stringify the body and same if you get the data you have to convert into Json format but if you're using XS you have to just pass the URL along with the ID you don't have to stingy the body as you can see that and you get the data and it works well now delete request you have to just pass the uh you know URL along with the ID and on the object we have to pass the method okay and you get the respon you have to convert that response in the Json format but if you're using xos you don't have to you have to just pass the URL x. delete method and you will get the response okay and same for the patch request uh we have to pass the URL method patch and stringify that uh body data and you have to convert that response injestion format but if you're using exos patch request so what you have to do you have to pass the URL you have to pass the object directly you don't have to stringify that and you get the object so this is all about the uh how to make API call in react native how to make croud operation in react native this is the complete tutorial which uh you guys learn from here so you can see that like which which which uh Library should you choose should you go with the F or like X so I say like you know you should go with the X because it's shorter simpler concise and you don't have to write lot of code that's why you use exos so yeah that's all in this video guys importing your react creative Journey we will be creating more videos on react native so please let me know what next topic you guys want and thank you and we will catch up with the next video thank you bye

Channel: Zero Degree Coder

Views: 233

Keywords: react native tutorial, react tutorial, fetching data using http request, fetch api in react native, react native tutorial for beginners, react fetch, react axios get request, get request in react js, react tutorial for beginners, axios react native tutorial, master api request in react native, learn api request in react native, Mastering API Request in React Native, learn axios and fetch, learn crud with axios, learn crud in react native, fetch, fetch vs axios in react native

Id: jmZKhhYEQOo

Length: 57min 21sec (3441 seconds)

Published: Sun Mar 10 2024