Learn React Query In 50 Minutes

As you can see, I've been busy taking notes on

react

query

, which is one of my favorite

react

libraries, and in this video I'm going to cover everything you need to know about react

query

and when you're done watching this. video I guarantee you will love it so much that you will never want to go back to the old way of doing recovery request welcome back to web development made easy. My name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video I talk all about the tan stack query, which you may have also heard of as a react query Now if you want an overview of exactly what this library is and what it can do. do it in depth.

I have a video that covers exactly that. It's great to watch it before this video so you can get an idea of ​​whether it's worth your time to watch this long video. It's something you'll want to use, but a quick look. An overview of what tan stack query does is an asynchronous state management library, the key behind this is that it makes asynchronous state management more likely to come from an API, such as when you make a request. recovery or an axios lookup, it makes dealing with that state incredibly easy because it handles caching very well it handles prefetching it handles all updates and getting data from your server it just makes everything smooth and easy and it does almost everything the hard work behind the scenes for you if we scroll down a little bit here you can see all these different things that stack query is doing for you and we're going to cover almost all of them in this video.

Now to get started, the first thing I want to do is show you how to get started. 10 fairness in a react app and how you can build a very basic shell using the most basic functions so the first thing you will need is some type of react app. I created a simple Veet app, removed everything and it only has one. H1 so now it's very simple to use this you just need to type npmi and you want to type in so stack slash react Dash query and this will install the react specific react query library now if you want to use view or stealth. would need to install the specific version of the spell now the next thing we can do is add to it we also want to install the dev tools so it's react query Dev Tools these are tools built into react query that just do the development is a little easier and will allow you to really see how things work behind the scenes, which will be great for this video tutorial.

Now let's start our app, here we go, that way it will render here and you can see if I make a change, it will change on the right side of the screen, that's perfect now. The first thing you need to do to get started with the tan stack query is to create a provider that wraps pretty much your entire application or at least everywhere you plan to use the react query, which let's be honest is probably your entire application, so we can go in here and we can do a simple import and we want to import the query client and the query client provider I want to get them from the tan stack react query library that we just installed so this provider will just wrap all of its app, so I like to just put it inside my app like this and put my app right there so it wraps your entire app. application and this query client is the actual client that you're going to create and we can do that right here so we can say that the constant query client is equal to the new query client, just like that and inside of here you could pass some default values ​​to your query client, but for now we're going to leave everything exactly as it is in stock, so now what we can do is pass our client here, which is our query client, and if we save, you can see that our application is working the same . before, but now our entire application has access to this query client, so we can do all the different things with the react query.

Now that we've done that, I want to show you a basic overview of all the different core features you can do with react query and after that, let's dive into each individual feature, going over exactly what's going on. I just want to do it this way so you can really see what you can do with the react query and why it's so amazing. The first thing I want to do is create a really simple function called weight. This will only allow us to simulate some artificial loading times. I could manually reduce my network speed, but in my opinion this is easier to do and allows me to really fine-tune what I'm showing you, so now the two main things you can do in the react query are: you can make a query and they can make a mutation.

A query is just getting data from somewhere and then a mutation is changing it. some type of data, for example if you want to get a list of posts which would be a query and if you want to create a new post which would be a mutation, those would be really the only two things you can do with react. query, so it's pretty easy to understand what's going on there, so for now I'm just going to encode our post data, so I'll just say that const post is equal to a series of two different posts, super simple and after?

What I want to do is import what we're going to do, we're going to use Query, we're going to use mutation, so these are two custom hooks that come from that react query library and allow us to get data. and change data, so let's first take a look at a used query, so if we go in here and call use Query use Query takes an object and as you can see, if we go in here, there's a lot of different things that we can specify. this item, but there are really only two things you need to worry about.

We have a query key and this will be a key that will uniquely identify this query. In our case, we want to get all the posts, so let's move on. This is an array whose first value is post. This always takes an array in our case, we are only receiving one post, so we pass it the post tag, like I said. I'll talk more about exactly what all this does later. but the main thing to keep in mind is that this is just a unique identifier for your query. You can make it have multiple things in the array.

It just has to be unique. The next thing we will need to do is I need to give it a query function, this is what will be executed to query our data, so in our case our query function here we just want to return a promise, this always accepts a promise, so which is any asynchronous code, that's why it's needed. a promise so let's pass it a function here we can use that weight keyword so we can say weight 1000 which will wait a second in total and then after a second has passed I just want to return all of our different posts in a new array , so we will receive all of our posts after a one second delay, that's all this will do and then it will return a bunch of different information to us.

I'm just going to call it my post query if I can spell it correctly like this, if we come down here and I say post query dot, you can see that I have a bunch of different information related to what's inside my post query, but some of the main ones What you see is like data. error loading successfully etc. so if we quickly save this here you'll notice that everything seems to be working, we're not getting any errors which is really cool so let's go ahead and implement this post query first. I have a couple of if statements, so if my post query point loads fine, that means I'm currently in the loading state, so what I'm going to do is come back in H1 which says loading like this and now, if I save and refresh here, you can see that we get the loading text for a second and then my poster came back, so we are no longer in the loading state.

Let's do the same if we have an error. I'm just going to return a previous label here. This pre tag is going to Json dot encode my error so we can say post query dot error to get the actual error, so it's going to be like your generic error message or whatever is returned, I'm going to put this on another line to make it a little easier to read, here we go, so now, if for some reason this returns an error, what we can do is simply make this reject a promise, so I can say error message promise point rejection now, if we quickly save each update here, we'll load for a while and it's loading, it's loading and loading and eventually it will give us back our error message, now you'll notice. loading is taking much longer and that is because you are constantly retrying over and over to make sure your function fails multiple times, so you will make multiple retries of your query function and wait between each retry until it fails multiple times. in a row and then it will come back to your error your error and that's why you saw that the upload took a lot longer because it was trying and then it waited and then it tried again and then it waited and then I tried again and it failed the third time it showed me the message mistake.

It's a really useful feature to have those automatic retries built into the system. Now, obviously, let's get that back, so we'll return our post like this, so after a second it'll finish loading. and now we want to display information related to our post, so I'm just going to put a div here and inside of here what I want to do is loop through my post query. data and the important thing to note is that if we are not in the loading state and we are not in the error state, that means that by default we have succeeded, which means that our data will already be complete for us , so we can simply map.

On this data for each of our posts and for each of our posts, what I want to do is return an element for our post, so let me set all the spacing here, so let's create a div that has a key that It's going to be our publish point ID and we're going to have inside that a value that is our publish point title. I think that's what we call it, yeah, post point title, there we close that div. and now if we save, you can see it says loading and now it shows our different posts, post one and post 2, just like what we have here, that's basically how you do a query.

Basically it just gives you a unique identifier. give it a function to get your data, usually this will be some kind of fetch or axios request, then you can check all your different states and finally you can display your data here and the next thing I want to talk about is how exactly a mutation is done, so we have used mutation here, it works very similar to using Query, so we can say we want to create a new post, so let's say new post mutation. I'm going to set that equal to use mutation and this again takes some objects, but you only need to pass one thing specifically here and that is the mutation function, just like you have a query function, you have a mutation function and again you expect to return a promise , so in here is what we want.

What we need to do is we want the first weight to be 1000, that will again simulate what would happen if we actually had a network request because right now everything is instantaneous and then what I want to do is create a completely new post. I'm just going to copy this code to see exactly what's happening here and I'll explain it in just a second here and I want to make sure that we pass a title like this, so what are we doing at this point? is that I'm just taking my posts array. I'm inserting a completely new value inside that that has a randomly generated id as well as a title that is passed to our function.

Now the key here about the mutation function is what it can take. on any data you want, it just takes a single property, in our case it's a single title and it will be placed right here, but we can make this whatever we want, it's just the singular thing that is passed to our mutation function. will always be a single value, so what we can do is use that mutation at a later time so that we have the same, load is an error, etc., properties and data, etc., but the key is that we also have a function of mutation that we can invoke on this, let me show you exactly what I'm talking about, let's create a new button and this button will just have the add new text, there we go and when we click on this button, what I want to do is add something new here, so what we can do is say we have our new postmutation and we can call the functionmutation and this mutation function will take whatever value we have.

I want to pass in our case it's a title I'm just going to say new post whatever we're not going to make it dynamic it's just going to be a static new post value and now when I save and click add new it's adding a new post, but you'll notice that nothing actually happens, it doesn't appear on my screen. You'll be able to see if I do a quick console.log of our posts array here, you'll see that it does show up. if I just do this, refresh my page, give it a second load, click add new, you can see here it's showing up, we have that new value that has the new post that's showing up in here, but it's not showing up in our posts list actual and The reason for this is because of the way caching and everything works within the react query to make this a little easier to understand.

What I want to do is just update this real quick. We're going to go back to our main page here and In fact, I want to show my dev tools so we can come in here with another import and this is going to be from that version of dev tools and I. We just want to import our dev tools and we're going to add this as a single component to our page like that, it's that simple. Now, if I click Save, you'll notice that if I move my camera out of the way, we have a bunch of Developer Tools appear at the bottom of our screen and these Developer Tools essentially allow us to see exactly what's going on with all the different fetch requests, queries and mutations and everything all over our page so you can see we have this post request here.

I'm going to expand my page and move my camera even further out of the way, let's get rid of it, there we go, so with our post, if we click on this, you can see that we have a bunch of different details that you can see. The key to my query, you know, is here. You can see all the different data that is returned to you. You can see that it is currently in a stale state and we can update it and validate it, so if I click Search again, it will search that data again. For us, if I invalidate it, it will be obsolete, which will require updating it on our page.

I can delete it, etc., so I can do everything I want inside here, but the most important thing is that I can actually see the status of everything. is inside and you can see that it is currently in an obsolete state. Now let's go ahead and close that and get our code back to where we had it before. I'll bring my camera back and put it back in the corner. For us, now understanding how all this data is cached helps a little bit because now we know why our data is not automatically fetched and that's because we have this post query key right here and it queried all the information for our La post showed it on our page and it was like okay we're good to go this mutation is changing our underlying data for this query key right here so what we really need to do is set up a success and this success is saying every once we have some successful data what do you want to do and in our case I just want to override the query that we have here and to do that we need to use the query client hook to get our query client so we can say constant query client equals to use the query client and this will basically return what we created right here, that's all we're going to do, but it has some cool features, so we can say point override queries and whatever we want.

What we want to do is override the posts query, so every time we have a successful mutation where we add a new post, I want to override my previous post, so now if I click Add New and wait for all of them to pass my different weights, you can I see it retrieve that data immediately for us if we go ahead here and go in and make sure to disable this button every time we're voting so we can say that a new postmutation DOT point is being loaded, it will be disabled, like this which now if you click on add new, you can see that it is currently disabled and now it finished adding the new thing and now it is fetching in the background to get that actual new thing.

We just do an update right here and I can show you right here if I move my camera. Out of the way again, exactly what's happening in the background, so I click Add New. You can see that now it's retrieving all of my post information and that's how I get the new post, so every time I click Add New, it goes back and fetches all that different data again for us and shows that new post in the ready now. I know this all may seem a bit complicated, but this is an overview of exactly what you can do with the react query.

You can see you can do queries, you can do mutations and you can actually modify an underlying cache of how it all works behind the scenes and the next thing I want to talk about is specifically everything that has to do with using queries that They will generate much of what we have done. It's understandable a little bit more and I'm going to really get into the nitty-gritty of all the different possible things you can do with the use of the query hook. Now, the first thing I want to talk about when I talk about this use of the query hook. we can get rid of all the mutation stuff because we don't need any of that right now.

What we want to understand is how exactly this query key works, which is one of the most important parts of this entire Query Hook usage the key about this key is that it must be unique to the actual query that you are performing, so in our case we are creating all the posts, that's why we call this post. What happens if we receive an individual publication? like, let's take a look at some URLs, let's say we wanted to get the posts with URL slash, we wanted to get the URL slash, slash one to get an individual URL, let's say we wanted to filter our post by author ID where the ID of author is equal to one and let's say we also want to get all the posts that have a specific comment, so we'll say all the comments for that specific post, how exactly would we write the query keys for all of them?

Well, it's what I like to do. In my opinion, I like to split my URL whenever I have a slash. I like to think of that as a new element inside my array and then I just pass it the value so this one here looks like this, where we just have our pretty simple post, that's exactly what we've done here, the next one here. I would have the same post with slash at the beginning, but I would also put my one ID here so you can have something like post period. The ID that you would put inside the array like this for the next one will be pretty similar, but whenever I have a filtering that I do like this, I like to put it inside an object, so I would say the author ID is one or you know what yeah, so we'll say like this, that's going to be the filter that I'm going to use for this one and finally this last one is going to be very similar to what we did here with our post ID, but I'm also going to put my comments at the end, so this is the style that I like to use.

The main thing to keep in mind is whenever you pass data like a post ID or an author. ID in your query key here you want to make sure that any function you define actually uses that data that way you can make sure that your actual key and what you are querying and your function are synchronized together and that way when you need to do some kind Invalidation, you are invalidating all queries that have that particular key. Now our query function here is something we've already talked about, the key is that it should always return a promise because this is going to be for asynchronous data and it actually takes a parameter inside of it, so what I can do is print that value, we can say object and then at this point, here I can print that object so you can see it. exactly what is returned here console.log object there we go and I make sure that this is a return and now if we just inspect our page, go to the console and make sure that it does an update here, there we go, you can see that es returned us a bunch of information we have a meta we have a page parameter we have a signal none of those are important at all the real key here is we have our query key, so if for some reason you need to access whatever happens in your query key, you can do that right here by just saying query key like this, this is something that you're going to use quite often, so I would say it's important to know that it exists.

The other important thing to keep in mind is if you have any. any errors that are thrown here or if you reject a promise will all appear in the error object down here for your actual query and if you're using something like find that doesn't actually throw errors by default, that's something you want to take note of and throw those errors, but in general you'll probably use something like axios instead of Fetch and in that case you have nothing to worry about and lastly, I want to talk about some important properties here, so if we say post query point, you can see that we have our data, which is really important, we have our error property, which is also important, we have a bunch of states, so the error we have is load, we succeed, that's all of them. really useful and then we also have a state property that we can compare to the error load or success, so essentially we have ways to check all of our different states that are really useful as well as get the data or error based on what state Now we're onto one of the last query-specific things used that I want to talk about, is actually how all the state management works for invalidated stale retrieval, etc., to understand that I actually need to change my code a little bit.

I'm going to modify the code and then bring them back here, okay, here we go. I've made quite a few changes to the code, but they will be fairly simple changes. Basically, we have two different lists that we can display. and these lists represent almost exactly the same code, like if we look at post list one, you can see it's very similar to everything we've talked about so far, it shows our loading and our error status and it shows my post here very simple. things that are happening, but listing two is literally the exact same code.

I just changed the number here to two, so I choose exactly the same query key, which is the important thing. These two things use the exact same query key but are on different pages and cause a full app refresh, so they are the same query key but are in two different locations in our app which is really important for How does this work. So I just have this get posts function that just queries a simple API for us and returns this to a list of all of our different posts, pretty simple things that are happening and as you can see when I switch between these pages my list gets shows fine now, if I wanted to I could slow my network down as much as I can.

What I have to do is just change my acceleration here to be like a slow 3G and now when I switch between these pages, if I just refresh my page first, it will refresh my entire page which will take a little bit of time and now, When you switch between pages you will see the loading status etc so if I give it a second to load very fast it will take quite a while to work on that slow 3G acceleration connection but once it loads you will see that let's say the text is loading because that's what we're rendering here and then once it's done loading it's going to show the posts list one because that's the default page that I'm rendering here, there you go, you can see it, just appeared.

He said charging and then he actually charged. If we look here, you can see that our post query is currently in stale state. Now when I go to my list number two and click on it, you'll notice that my data is here and it's complete. ok but I was in the recovery state for a while before it became stale again and that's because the react query is smart enough to fetch its data in the background, essentially what that means is when Switch between different pages or anytime you need. to get your data back, so if you remount a hook, in our case here we swap pages, which means we are doing this, we use the query hook for the first time, so it is being mounted, so says: "Hey, this data is outdated in our case, yes, yes." is obsolete so what you need to do is fetch that data again and then onceto be searched again, it will show us the new data on our page, also if I unfocus my page and refocus it, that will cause it to be searched again or if for some reason The reason why my page lost the Internet connection and then reconnected will obviously do some searching in that case.

Now the important thing about this is that I have my post here cached. Everything in this query. Kia slash post is cached and stored in memory so when I detect Pages it can show me the cached version of that page while fetching it in the background and then show me the new data once it has finished fetching . This is really interesting, really powerful, and something that is absolutely difficult to write on your own. See all this recovery information. If I just got here after the query.fetch state, you can see that that will equate to idle or paused fetch and the way this fetch state works is anytime you fetch your query again. be in that state of recovery if you are not currently doing anything, i.e. you are not recovering.

It's done, it will be in idle state or for some reason, like if you lose internet connectivity, it will be paused. state if you were in the recovery process and then for some reason it couldn't finish, to fully understand how the recovery state and the actual normal state work together, is when your component is mounted for the first time what will happen its the fetch state will be in that fetch state and its state will be in the loading state because the first time you load the page it will fetch the data and load it, this is the first time something with this query key has been load, then if your data returns successfully, this will change to success and it will change to inactive; if it is an error this will change to error and the data or error property will be set accordingly depending on whether you will have an error or success now if you go ahead and load a new page that uses this query key and you already succeeded e.g. the status will still be successful but your recovery status will change to recovering because you are now recovering the information in the background once you are done recovering it will go back to being idle and will update your data and status depending on what actually happened.

You probably noticed an interesting fact, although as soon as we recover the data, it immediately becomes obsolete. of stay cool and that is the defaultBehavior, if you don't want that behavior what you can do is change the stale timer settings, so in our case we can change it as default by entering here. All we must do is change. our default options we want to change our default options every time we are doing a query and we want to change the idle time and this will be in milliseconds so if I do a thousand times 60 times 5, that will be essentially What we need to do is tell us that we don't want our data is going to be stale until it's been in our cache for more than five

minutes

, so now if we give it a quick refresh here, it'll refresh everything.

I'm just going to inspect my page. and turn off all my limitations so I can get back to normal speed. Now you can see that our data is currently up to date and when I change pages, you'll notice that it never actually gets to this recovery state; It stays in the new state until it actually becomes obsolete and that means it hasn't been recovered for a long time. However, my stale timer is set to which we can set it here or if we want, we can set it specifically on an individual query, for example, if I would like the query to become stale after one second.

I would do it like this, now the last thing that's important to understand about recovery is that you can manually make something recover on its own, so let's put this back to exactly what we had before and say I wanted to recover some data from time to time . Often what I might do is set a fetch interval and just give it a time, so let's say every second I want to fetch my data, so if I'm on post list one, it should refresh every second and you'll notice. flashes briefly to fetch every second and fetches that data and again and again every second it fetches that data again for me now the final basic feature of use The query I want to talk about actually requires me to change my code yet Again, if we look back at our app, we have a new button here to go to our first post, post id one and if we look at that post function here, you can see that we have a post query that is getting a single post from a git release function that is stored within our API.

It's super simple. You'll notice that our query key now contains that ID, which is really important, so it's separate from our original post and you can see here that we have. a user query that is commented out for now we have some data on our post super simple loading state we have our title showing our body and then we are trying to display some information about our user the reason we are doing this is because By default, our post doesn't have the user name, it just has the real name or it has the user id, so what we can do is print host.user ID like this, I think that's what it's called, yeah, user.

ID, so if I do the Post query.data dot user ID and save it, go to my first post. You can see that we are trying to get the user with the ID of one. I want to get the name of that user which requires me to query my API, but the problem is that I only want to run this user query after my post query has finished because otherwise I don't have a user id to reference, there is where the enabled key comes in, so what we can do is say enabled. and we can set this to false or true or an expression that evaluates to false or true, so what I can do here is say I only want this to be enabled when it is not equal to null, as long as it has a user id, so I really want to be able to run this function; otherwise don't run this at all and now if I just comment out the rest of this code, you can see this will work fine if I save it, now you can see that. if I get rid of that user id, it shows the real name of the user, so it first does this query and then it does this query and we can see that if I just slow down my page, so if I go to inspect, I change my network. tab here to make it a slow 3G again just like that and actually, let's not make it speed up, refresh our page and then we'll go slow.

I click here and you can see we're loading our entire post now that it's loaded, so now we're loading. our user information and now that user information is loaded, so it is done one after another in order. I really love this enabled key because it ensures that you only render queries when you want them, so if one query depends on another, you can do that very easily. do it with enabled or if you just want to disable query for some reason you can do that too Now that covers everything you need to know about using Query at least the basics so the next thing I want to talk about is using mutation, which fortunately there is much less that we need to cover, so again I modified our code a little.

If we go to our application, here you can see. I added a button to create a new post when I click this. See, we get a page that accepts a title and body and click the Create button to create a new post for us. If we go to this post creation page, it's pretty simple, we have our title and our body reference, we have the mutation. here, which just calls create post and that's the create post function, all it does is call our API and it creates a new post really super simple, all these different functions, they just call our API, that's it what they do and then what.

What we do is every time we submit our form, we simply call the mutation function of our post-mutation creation and down here, if we have an error, we display it, we make sure that if we are in the loading state. that we render specific text and make sure our button is disabled, really simple stuff, this is a super basic way and we've already covered this at the beginning of the video, but I want to go a little deeper. depth on everything you can do with using mutation, so as I mentioned you only need one property if you use mutation and that is your mutation function.

This is very similar to your query function, it should return a promise and that's really all you need to know. this also accepts a first parameter which will be whatever variable you pass in to create the post, so in our case we just do something like this, there we go every time I pass in here some variables which will be the first thing passed. in my mutation function, so down here, when I call that mutation function, you can see that I'm passing in an object with a title and a body, that's what this variable is going to be here now.

I'm just going to put this code back to how it was before it's a little bit more concise a little bit easier to read there we go everything will work exactly the same now the key here is that we have a few different things that we can pass in here for example having a success, this will happen every time we succeed, this will take a function that has our data, it has our variables and these variables are the same variables that you pass in to mutate, so it's just whatever you pass in to mutate and then we're also going to have a context.

I'll talk more about context a little later, but for now it's not that important, it's just something that you can save and store in all your different mutations, for example, I can set a context like this, so on success, we obviously know what is it, we have an air that is exactly the same, but we have a bug here instead of our data, we have an unstable matter, this is something like finally, if you are used to promises, this is We will take our data, our error and then our variables in our context and finally we will have a mutation or a mutation.

Sorry, this is kind of interesting because all it takes are variables like this. and this will actually be called before your mutate function, so if you have both set, on mutate will be called First and here is Gen, finally, where it will set your context, so if I go in here and it just returns as something that says Hi, buy and then I'm successful and I get that context, so I make sure I go to the data variables context and comfort. register my context, that context will be whatever I return when mutating and we can Actually, I see this happening if I go in here, inspect my page, go to my console, I can see that there's nothing on it currently, if I click Create, I can see it's being logged out on High and that's because that's my context variable, which is set to The return value for on mutate, so mutate is really great if you need to do something before for your mutation to work or if you need to set some data within its context.

Another important thing to keep in mind about using mutation is if you perform your mutation and it fails. It doesn't do any kind of retry like it normally would with a query, this is to make sure that you don't know or accidentally create seven posts if you retry seven times, although it returns an error if you still create them on the backend in general, this It's a good thing, but if you want, you can pass the retry and you know, say three and now it will retry three times before showing as an error. Generally I wouldn't do this with mutations and the following.

I want to talk about the important properties in creating the postmutation object so that we have our data, so for some reason your API returns some kind of data that will be available right here, we have a self explanatory error, we have our state and our state will be set to a few different properties. Here we have an error, we have load and success just like with the query, but we also have idle and that is because the mutation may be waiting to happen because in our case the mutation is not working. anything until we press create, so it will be in inactive state until we press create, we also have boolean versions of these, so we have like Inactive, we have an error, etc., Success, those you can also use and finally Lo Last thing I want to talk about is the mutation function, which we already know very simple, that's what it's called if you want to mutate, but we also have an asynchronous version and this asynchronous version actually uses promises, so we have a point and then here and you know we can do a DOT capture and so on, so if you need to do specific things whenmutate, you can use mutate async instead if you really want something else to note about the mutate function, let's say you pass it an object.

It also takes a second object so you can do things like on success or inline for each individual mutation you're doing. Generally I find that I don't need to do it this way and prefer to set my function on success. My actual creation of mutation here, but if you need to do it at the actual time you call mutate, you can also do it by passing a second property to the mutate function to understand exactly what's going on here, let's say every time we succeed. create a post I want to render the page for that post so let's remove this in mutation we don't need any of these variables or context information we just need our data which will be the post we just created and what I want to do is go to that post page, so what I can do is make sure that I pass the ability to set current page and if we go to our main page here or Sorry, our application, we can make sure that we pass Set current page equal to set current page like so so now every time we create a post we pass it and inside here what we can do is set the current page to the current post that we go to so in our case we want to render the post and we want to pass the ID of the post we are using, which in our case is just ID, it's just data.id.

I think so now yes I just make sure I import this post object here we go and now I save it, let's say the new post body is new and if I click create, you can see we have an error that looks like down here. I just have to say create mutation post. point error so I messed it up so let's see it looks like we probably had an error when we created our post so let's say great and that actually worked that time so I had an error for some reason but not now. but as you can see it took us to that post page and as you can see it shows all the information for that post.

We return to our list. You can see that that data is there. You will notice something really interesting. Let me update. my page very fast I'm going to do a inspection and I'm going to create a post, but after I create the post before I go back to my posts list, I'm going to turn us on at a slow speed, so slow throat, slow 3G. and let's go back to our list, we should have an ASDF ASDF in our list, so I'm going to post list one. You can see there's one there, but that's the old one and then it took a while until the new one showed up. let's create a new one this one I'm just going to call a bunch of these so it's going to be very easy this will pop up if I click create you can see it's loading and then it'll take us to that page which is I'm going to have more loads, but now we have this post, so let's go to our posts list again.

You will see that there is no B post anywhere and then it appears after a while, that is because it is fetching in the background forest. and then it gets the new data, realizes that the new data is different, and then updates our UI with that new data. Now doing it this way is fine, it will work, but it is not the ideal user experience. You probably want to show that this is old data. and override this so that it reloads every time immediately. This is especially important if you have a stale timer set so that your data does not become stale immediately.

This is because validating the query will force it into that stale state, so we go in here and I actually go back to what we had before we had that long stagnant time now, if I just come and look, move my camera, you can see this is currently in new state, it's no longer obsolete, let's create a new post, we'll give this one a bunch of C, now click create and you'll notice if I go to my posts list it doesn't appear and it won't appear until these data is no longer up to date and freezes, which will take five

minutes

.

It's obviously a horrible user experience, so you want to override your queries and pretty much every time you do a mutation, you almost always want to override any query related to that mutation because you're obviously changing the data in that query, so to do that let me move my camera back here, what we need to do is import the Query use. client hook this is something we've already done at the beginning of this video, so we want to get that query client from the hook there and we can call the invalidated queries and we can pass it in our query our query key which in our The case is our post query key like this so now if I go to my page and inspect, sorry I don't inspect, if I go to dev tools and see that this is currently updated, I'm just going to refresh our page so we're very clear here we go, we have a new query, let's create a new post cccc cccc actually, let's do a bunch of D in there, let's click create and now you can notice my actual post here. to be considered obsolete, it is down right now and it is not new data and we will be able to see that if I inspect my page, go to the network, we will make sure that we go to the slow 3G, come back to my post. you can see it's fetching that data because it's stale and now my new value with this group of D is showing as it should so by doing that override we force it to be marked as stale which means as soon as it needs to be fetched again . -presented on the page, it actually appeared and represented that data for us, this will also have a slightly unwanted side effect, even though let's say we came in here.

I'm just going to update my page so everything is back to normal and what I want. What I need to do is check out my first post, so check out the post of one that currently has new data and now what I'm going to do is create a new post, it just doesn't matter what it is. create it and now what I want to do is speed up my page again so we can do slow 3G here. I want to go back to the first post. You'll notice that it's retrieving that data and that's because this data is actually set to be stale and the reason for that is because of the way that we invalidated our data, so let's put this back to how it was without throttling and we'll come back here, we'll move my camera over there, come on, you can see that. when we invalidate our queries, we pass it this posts array like this and what it does is it actually invalidates everything that starts with this in the array, so every array that starts with post is going to be invalidated if we look here, this starts with post so all our individual queries will also be invalidated here.

That's why when you do the override, you actually need a second argument with a bunch of different filters that you can do, and in our case, if we say exactly true, that means it's just going to work. to override the query that has that exact query key right here instead of just starting with that query key, as you can see there are also a bunch of different options here for different things that you can reset if you want, it's completely up to you , but there are a lot of different things you can do in our case, we really care about the exact truth and that's what we want to do here now.

Another important thing to know about mutations is that if we come back here, I'll make sure to speed up. This page will be very slow again, what I want to do is create a new post, it doesn't matter what the name or title is, but you will notice when I create this post when I go to the new post page it needs to reload and get that data , so it's pretty slow and the reason is that I don't have that post in my cache, but at this point when I finish my mutation I obviously have this data so there should be. a way to put that data into the cache and luckily there is a way to do it with react query and this is called manually refreshing the cache so what I want to do is take my query client and I want to specifically set it to some query data , so in our case I'm going to set query data and this query data is going to be for publishing and I'm going to do it in my new publishing point ID or actually data is what I called this so this is the query key and then I want to use the data that I'm going to use in that query key, which in our case is a new post, so now what I've done here is I've created a new post inside my query, so with this line of code here allows me to create a new entry in my cache that points to this query key with this data, so now if we make sure we continue to speed up our page on our network we are on slow 3G, let's go create a new post.

I'm going to create a new post, it doesn't matter what the data is and when I click create, you can see it takes a little while to load, but as soon as it gets to this page, you can see the data appears immediately. In fact, it looks like we had a mistake. If we go to our console, you can see that the new post is not defined. This should say data. Instead, here we go, so let's go. Try again, let's create quickly, give it a second to load everything and then you can see that when it comes to our new page, it will actually show the data instantly at any second.

Now come on, you can see that it instantly showed that data, which is great. I still had to load the user because it wasn't in my cache, but all the post data was displayed instantly because it was already set manually within my cache. Now the only other thing you can do with this set query data is You can actually pass it a function and this function will take the old data as its property right here, that's really useful if you need to make changes to the old data by passing some data new, so you could combine the two. things, the only key here is that you have to make sure you don't change the old data, you can't mutate it, it has to be immutable, like when you work with react state, so that's another thing you can do, but most of the time you'll probably just pass the data like this.

The next thing I want to talk about is pagination and infinite scrolling and first we'll talk about pagination, so if we move on to In our application, you can see that I've created a new page called paginated without posts. If I go to that page, this is very similar to the code we have for our normal posts list, as you can see if we scroll down here for our data. our post looks exactly the same. You can see our list of paginated posts appears right here. The only difference is very few things rather than how we actually use our query, so you can see the first thing to notice is that when we are.

In doing our query key, I'm passing a page as an object here and that's because when I'm on my paginated page here, if I just click on this, let me make sure this works. It looks like I just need to come here and do Sure I import this, there we go, so now if I go to this page you can see two are displayed at a time and I go to the next one and so on and the previous one like this, everything works fine, so if we come back to this post. paginated list, the main difference is that I am passing the page as part of my query key because obviously I am changing the data and you will also notice that I am passing this previous data key to keep here and the reason why this is really the important thing is that it will show my old data while the new data is loading which is really important.

This will make it so that if I refresh here, come back to this when I click Next, it won't show the loading status. I'm still going to show my old data and to make sure we can see, I'm going to comment out this little snippet here, but you can see by clicking Next if I slow down my page, so we'll just go down to Speed ​​this up. I click Next. You can see that the old data is still displayed and then the new data appears. The old data is still displayed and then the new data appears in its place and obviously if the data is cached it will be displayed. immediately, so that's really helpful now, if I put this line back that I commented on, you can see here when I click Next and go to a new page, you can see it shows that I have the previous data loaded right there.

Because I have this boolean called previous data, this will appear when it's loading the previous data or when it's displaying the previous data and trying to load the next data, this will be true, so I'm just showing that that actually works here. That's the only thing you really need to worry about for this. You'll also want to know if we have a previous page or a next page. I just had this built into the API and it will tell me if there is a next page. or oneprevious page returns as part of the data, but really the only thing you need to change when handling pagination is to put the page inside the query key, you need to make sure your query function deals with the page and you.

You need to set Keep Previous Data to true and you can optionally use this as Previous Data; otherwise everything stays exactly the same, so pagination is super easy with the react query. Now the next thing I want to talk about is infinite scrolling. I have changed our code. add a button to go to this infinite scroll page and the code for this is slightly different so I'll go into it in depth but if we get to that infinite scroll page you can see we can click load more and it's going to load constantly more and more data for us, there seems to be a small bug in my code.

Here, the page parameter should be set to 1 by default, not zero, but let's update that. Come back here. You can see that it is working fine now. constantly loading more and more data and if we slow down our page we can see what's happening behind the scenes, if we click load more you can see it says loading and then once done it will show the data and so on. I'll do this until we run out of pages to load, as you can see here. I ran out of pages, so no more buttons appear, so I move my camera.

You know, you can see what exactly is happening, so understand how. this code works we need to use a different query here we are using an infinite query hook instead of the query hook and this hook is very similar it still requires a query key it still requires a query function those are exactly the same but the biggest difference here is that you need to take a print to get the next page and this is just a function that returns me what the next page is and that is being returned by my API, so this will take our previous data which is the data from our API call that are currently rendered on the page and we just return what we want, so in our case I only return the next page because it is returned by my API, it actually returns the next page, another important thing to note. our query function now takes an additional object inside it which is our page parameter and this page print is simply what the next page parameter returns so we can use it when we get our post page.

I'm just using that paginated request. So to really understand what's happening here, every time I try to load the next page, what happens is it calls this function and it gives me a page number for what the next page is and then it passes it to my function. consultation. Here is this pagepram and I use it to get my next page of data, so that's where the biggest difference comes from using infinite queries. The other big difference is how the data is actually used, so we have our typical status error data, which is really normal, but also This is the next page and the find next page feature.

This find next page function is just what you call when you want to get more data, so in our button we call that function right here. The following page is recoverable. like our loading state to determine if we are loading our data and finally the last thing you have is the next page, it only determines if we have another page, so if this comes back to us undefined, that means we have no more pages, so which will be set to false, otherwise if this returns any value it will be set to True. Another important thing to note is that our data property is slightly different than it used to be, it is now split into pages and each page represents the data for that individual page, so we have the pages shown here we also have here page parameters and that's the actual parameter that we got for the individual page, so it would be like one two three four for the page number that we're on, it's just what's returned from here, so we need to make sure that we do our data slightly differently because we need to loop through each individual page.

Another important thing to note is that we can go back by getting previous data using the get previous page parameter which works exactly the same as the next one but it is for the above we also have the previous page and we are also getting a previous page if you want to go forward and Going back with your infinite list now that covers all the basics related to react query so I want to cover some advanced features that are really useful that you will probably come across with your projects and the first one is using query bindings which is very similar to using Query, but it's one you need to run multiple queries at once, let's go to my posts list page and What if I want to run a query for each of my posts that I returned from here?

I would think that I would just do a post query and then get the data and then map it and for each post I would run a query inside here like this but the problem is that you can't use hooks inside anything like a function for mapping or a loop for or an if statement you just can't use hooks that way so to get around that you need to use the using query hook and the using query hook is very similar to using Query but it allows you to simply pass it a series of queries that are they'll run so I can do the exact same thing here, map my data to each of my posts, so I can say, for example, a post like this and I want to make sure I approve it. this as my queries property like this here we go so in here I just need to essentially return an object and this object worked just like the normal use query that we have so for example we have a query key which in our case It's going to be a post and it's going to be a post point ID.

We'll also have our query function, which in our case will be git post, there we go and this get post function should include our post.id, there we go, so we're passing it all the normal stuff that we would pass to our query itself , then what we could do is get those queries so we can say that the constant queries are equal to this and I could just say the dot map of the console.log queries. and let's say we wanted to get the data, for example, so we can get the data from all of our different queries like this, if I make sure to put some question marks inside here, I hope this works.

I just do this quick save. go to my post page of course not that's because if this data is null I obviously want to return an empty array so we'll just say we're going to convert an empty array if this data doesn't exist and there Go now , our posts list appears and if I inspect my page and go to the console, you can see that we get an array with 17 different data values, all of them are undefined, it doesn't really matter what the data is, but it's showing you that it works is because git post is not defined, there we go, so now if we inspect our page, hopefully it should work, we have arrays of values.

If I refresh our page, you can see that it now shows all the different data for everyone. of our different objects because it's querying all of them for us, so if you need to do a bunch of different queries inside an array, you should use using queries instead of using an actual array syntax and then you pass the array inside here same. It's much more common if, for example, you have a list of IDs that you want to render, you probably wouldn't do that in a scenario like this. Another thing that's very common that you might want to do is prefetch data, so let me. just get rid of all this nonsense we had here, everything is working just as it was before we left.

I want to go back to the main page of my app and let's say every time I hover over a link I want to query the data for that, so when I hover over my first post. I actually want to get the data for that by prefetching that data, so on mouse input, what I want to do is call mouse post a link which is just a function that we're going to create. Here on hover post a link and what I want to do is prefetch my data and to do that I need to get my query client so I can say query client is equal to using query client which I'm importing. there is a query client point prefetch query and where it works just pass it in some options so we have our query key the query key will be for our host in the first index and then what I want to do is what wanna. to pass it a query function which in our case is just get post, make sure you import git post, there we go and this get post I'm just going to pass one so what this is going to do is it's actually going to pre-fetch my data, so it will essentially prefill the data inside my cache every time I hover over this link, which is when I call this function, so to see that this actually works, let's go ahead and open this up.

I'll take out my camera. of the path here and what I'm going to do is refresh the page so that we have a new board here. I'm going to hover over the first post, you can see it immediately and get the data that appeared here, so now when I click On that page you can see that the data is already there, no need to search for it again. This is really useful because you can say, "Oh, is the user going to need this data soon? I'm going to prefetch it in the background." for them that way, when they go to that page, it will already be cached and loaded for them.

Now the last thing I want to cover is how seed data and placeholder data are handled, so let's get to my posts list. we have here and what I want to do is say we're going to have some initial data, so I can pass the initial data here and let's say my initial data is going to be an array that will have an id of one and it will say an initial data title like this, like this that now if I go to my posts list, I just refresh my page, you can see that it first shows my initial data and you'll also notice that it's not actually doing anything. other fetches and that is because when you set initial data it says it is legitimate valid data and it is stored in the cache and this data is no longer stale because we have that stale timer as you can see this data is actually set as new . right here, that's really important because if you put placeholder data inside, like we've done in this case, it will persist as part of your cache, so if you want to use placeholder data, just set placeholder data position in place and now if we refresh our page and make sure to speed this up so it's a little bit slower so it's not so fast and let's move this here, let's go, so if we refresh our page, it's going to take a while to load for the first time. time. time but what you will notice is that first it will show us the initial data and then it will load our post and then it will show us the actual post data so I will first show the placeholder and then it will show the newly fetched data which is the difference between the placeholder and the initial data.

The placeholder data will be immediately replaced by any query that is essentially always marked as stale, while the initial data will be delivered and saved within your cache and will be marked as new if you have any sort of stale timer set, so that now that it's finished loading you can see we had our initial data there very briefly and then it showed our current data being processed and that's it. I need to know about react query now if you enjoyed this video you will definitely love my full react course where I go in depth on react this way but everything you need to know about react that course will be linked in the description I recommend you give it a try look and with that said, thank you very much for looking and have a good day.