React Query Tutorial | Data Fetching with React-Query

[Music] hey guys how's it going i'm back here with another video and today i decided to make this video where i'm gonna go over the react query library and throughout the video i'm going to give you guys some examples to why you would want to use this library why um this would improve your code your um how organized your code is and and how to actually implement the library and how to actually make it so that your application is fetching data in the best way possible before we actually get into the video if you guys could leave a like i would really appreciate it would massively help push the video to more people and make the channel grow i'm putting a lot of effort into the channel so if you guys can help me grow reach the 10k subscriber mark which is something that i've been wanting for like a long time i would be really really happy about it so yeah that's basically it let's get into the tutorial so as you can see right here we already have a reacts application kind of um built and the reason why i built this before getting into the tutorial is because i want to show you guys um a clear example to why why you would want to use react query in your application you can see that this is a very simple react application i'm actually going to come over here and this is what i built it's just a simple web page which when you refresh the page it generates it fetches data from an api and shows like the image of a random dog so it's using a public api which i think it's called like um dog um a photo something like that i'm gonna put the link for the api in the description if you want to check that out but as you can see it's just just fetching data i'm fetching images of random dogs which are really cool as you can see and yeah it's pretty simple so the way i built this is pretty standard for most people who worked in react you usually want to be able to have three states one to check if it's currently loading for data one to check if there's been any errors and one to store the data that you receive so you can see over here when i refresh the page while it's making the api request it appears like it shows the thing loading right and it shows every single time while it's loading for the api request to be done so that is a boolean that is stored in a state called is loading and then we have the error which in the case if if for example we put a wrong api over here i forgot to put um the o and the n for json which is part of the url you'll see that it should say error try again because what i did is down here i said that if there's any errors i just want to display the message error try again and if i put the o n you'll see that it should fetch the data correctly now as you can see so what happens is this is kind of the standard um we're using a use effect so that whenever we want to fetch the data we have this function called the fetch data it basically sets error to false and loading to true and then it tries to fetch the data using axios as you can see right here i'm using access but you can just fetch the same thing um and it tries to fetch the data if it doesn't if if it isn't able to fetch the data then you set error to true and you don't set the data because there was some error but if it was able to fetch the data you just set data to like to the data that you receive which is the response to data and down here you set loading to false meaning that you finished loading the data and you have actually been able to receive the data and down here we just have some conditional rendering where we ask if there's any errors i want to show error try again if is loading is true which means it's it's asking like it's fetching the data we just want to display an h1 saying loading and else if none of those are true then we know that we received the data and we just want to display an image with the src equal to data.url so the api if you take a look at the documentation it just returns an object and one of the values for that object is the url which contains the url for the image so this is what we're displaying over here it's just the image of a random dog and they're really cute as you can see so why would we actually want to implement react query into this application when we are able to make this work we're making our application work without using react query well let's think about this this code like we're probably going to have to fetch and handle data several times in a large application right and this piece of logic over here it's quite annoying um we're using a use effect hook then we also have to create a function inside of it which is that it isn't actually necessary but um since we're trying to uh make it so that we receive the data asynchronously we're using an async function so that's kind of the idea um but in theory we're only using three states and we're using a use effect right so wouldn't it be easier to just like condense all of this logic into a pre-made hook and the answer for that is in my opinion yes it would be a lot easier and also we don't have a very like stable way of um controlling our states or caching our data so what react query does is it manages everything for you and it creates this um pre-made hooks um there's mainly the use query hook and the used mutation hook which is pretty similar to um if you've ever worked with graphql before and i've made videos on this in the past um how apollo client which is a famous library for graphql um handles their api requests they have both um they use mutation and they use query hooks which basically represents if you want to make a get request for example then you call the use query hook and if you want to add something to an api like make a post request a play request or a delete request you use the use mutation hook so in this video i'm going to change all of this logic over here so that it will be implemented with react query and you guys will see exactly what is the difference so let's do this right now i'm going to open this up and you'll see that i'm going to install the library react query so i'm going to write yarn add react query and if you're using npm um same thing just npm install react query so while it is installing let's let's just come up here over at the top and let's just import um from react query um query over here and let's import initially the use query hook um over here and this is the hook that we're going to be using so in order to condense all this logic into a very simple like two lines of code is you can basically just delete everything like legit just delete absolutely everything i'll just keep this um url for the api over here let me just put it over here so i don't forget but literally delete every single thing over here you can see that our code is a lot smaller now so literally to make the same thing work as before all we have to do is we just have to say const then set this equal to use query like this then first param first argument over here just to name a random name that you want to represent this query so we can call this um fetching dogs something like this um or i actually just call it dogs um basically you can give it a name that you want it's just for um organization purposes right it's just a query key as you can see over here so that you can access that later if you want to but then you have to put how are you actually going to fetch this data and this is when um it comes into place the fact that usequery or react query is not a replacement for either the factory api or the x use library basically you can use either fetch or axis over here to make the api request and what the react query library does is it handles all the state management behind it so what we can do is over here we can actually create a function an anonymous function which just gets the data from axios so we're going to copy the url that we had over here we're going to delete this over here and let's just paste it over here so that we're still um actually making the api request and this is basically it when we put this function over here what happens is this is what this is going to be returned and use query knows that whatever data is returned from this it's going to handle it and destructure it into the following variables so with react query there's many things you can destructure from this hook one of the things is there is loading which we we created before then also is error then maybe actually we can also get the error directly right um which is great because we can actually get any errors that is displayed in error messages and then we can also get the data which is amazing and there's many different things we can actually get if we want we can actually get like um is success is idle is fetching there's many variables and states that we can access because this hook is pretty complete so this is great because now we need to create three different states and we don't need to have a use effect because this will run immediately when you re-render your page so what can we do now first of all since we could have access to the error over here let's just ask if error and we can say something like error and we can display here the error like this however error is an object which contains some properties one of them is the message so there's any error messages we'll know immediately because it's going to display over here and as you can see this is basically done we don't have anything else here like we don't even need the use effect or the use state hook because we're not using them anymore and if we save this and we go to our api or our project you'll see that it's actually not working um you'll see that it will say no error no query client um set use query client provider to set one and the reason for that is because it is actually one of the first things you have to do which is you need to wrap your whole um kind of your whole ap like your whole application with something called a query provider and to do that what i like to do is you can actually come to the index.js over here or if you're if you have many pages many components you can do this in the app.js as well but in the index.js what you can do is come over here and you can actually just import query client like this and i'm going to actually say from react query over here and i also want to import the how can i say the query client provider over here and by the way you if you are if you have other components that you're rendering and you want to put this over here inside of the app.js it's totally like correct to do that i'm just doing it on the index.js because my whole logic is written inside of the app.js and i didn't create a different component to to do all of this so if you have a different component then i recommend putting it on the app.js but what you do now is you need to actually create a query client so to do that you can just come here and say query client like this and set it equal to new query client like this no not provider client and this is just standard it's just saying that we we can just wrap like a whole application around this and you will have access to all of this so it's similar as i mentioned before to how you work in apollo client if you've ever used that graphql library before and over here we have to pass a client and that client will just be the query client that we just created and this should make everything work if we refresh this page you'll see that now it doesn't give us any error and it doesn't display the images which is weird let's try again um it's not displaying let's go to our console and let's see why this is happening and the reason why it's actually not working is because um the the way you structure the variable data changed so remember before data was just the response from the access request so it was just like whatever we get as a json from the api request however if we console log data right now let me just console log data so you guys can see um the data the variable data the state variable data that we received from red query actually has some other properties so if i come over here you can see i refreshed any console logged whatever we got back and it has the following stuff it has a property called config it has a property called data inside of it and it also has like everything related to the request so if we want to access the url we can just say data.data.url instead of data.url like we were doing before so i know that sounds confusing but that's just how they structure their objects so this is what we have to do and if i refresh you'll see that this is exactly what is happening um you can refresh the page it's working perfectly and that's just part of the api um you can see pictures are appearing which means it is working and the thing is the code for this is a lot smaller and a lot like more organized than if you weren't using this so this is definitely a benefit if you want to use some sort of uh data fetching library i definitely recommend reacquiring i have made a video in the past on the swr library if you want to check that out it's pretty similar however um i prefer react query for many different reasons if you guys have like any questions just put it on the comments down below and just quick before we actually get out of the video if you're interested in um also creating mutations um just like adding stuff create like making a post request or a put request or a delete request um it's pretty similar as well i'm not actually going to show you guys because this i can't make a post request this public api however to do that you can just come here and import the use mutation hook like this and all you have to do is you just have to come over here and say const then pass a function over here so i can call it like i don't know create user something like that and we set it equal to use mutation and here i can just grab some sort of variable so like whatever the user that we want to mutate we want to add and then we just say that we want to make a post request like this x use dot post and then instead of here we can put the url to our api so i'm just going to write like api url dot com slash users something like that right i'm just making this up but then over here you can pass the object that you want to add over here so i can pass for example users right um user and that's how you actually work with the user mutation hook if you're interested in more videos on react query i can definitely make them can you i can use red query on a series that i'm going to make in the future if you guys are interested but that's basically it i really wanted to make this video because i think this topic in this library is really interesting so if you have any comments then leave the comments down below i can definitely help you out and leave a like and subscribe if you are interested in the channel if you like the video because i'm posting three times a week and i would really appreciate if you guys can help me grow the channel and yeah that's basically it i really hope you guys enjoyed it and i see you guys next time [Music]

Channel: PedroTech

Views: 11,227

Keywords: computer science, crud, css, databases, javascript, learn reactjs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, deved, pedro tech, react query, react-query, react query tutorial, data fetching react hooks, data fetching react, react fetch api tutorial, react fetch api, react hooks

Id: 46vKqPlTW2w

Length: 15min 5sec (905 seconds)

Published: Mon Mar 29 2021