React Query Tutorial #3 - React Query Dev Tools

Key Takeaways

all right then gang so as well as react query we can install another package which works with react query to help us when using the library and that package is called query dev tools and it gives us a development console in the browser that shows what's happening with our queries behind the scenes so it's really helpful so i'm going to install that separate package now first of all i'm going to open up a new terminal so i don't have to quit out of this process and i'm going to say npm iphone install save this to dependencies and it's called react query dev tools like so so hit enter and install that package first of all okay so now we have that let's close this down and import it so i'm going to go to the app root component over here and at the top i'm going to paste in this import where i import react query dev tools from react query dev tools so how do we use this down here well we need to render these dev tools to the dom and i want to do it adjacent to this app right here not inside the app so i could down here say i want to use this react query dev tools component like so and also i'm going to add a prop called initial is open and set that equal to false so by default when we open up the app in a browser we don't just see this giant box on the screen as well this dev tools we have to open it up okay so now we've done that the next thing we need to do is surround all of this in some other element because the root of this jsx has to be one element and currently we have two top level elements so let's just surround all of this with a fragment so empty angle brackets like that and this is basically an empty element just so we have one root level element and that is now fine so if i save this now and check it out in the browser then we see this little thing down here in the bottom right and that's a switch to open up these dev tools and it looks like this so you can see the queries that we have and we can already see we have one called planets that it's made in the background to grab these planets so if we click on that we can see information about the planet's request so first of all you're going to see right here we can refetch if we want to to get fresh data and also down here we can see the data itself and we can see all of the results we have in that data we also have information about the query itself and we also have some config as well so we're going to look at that in a minute that config but also over here you can see we have these little icons right here now at the minute it's saying we have one stale query meaning that already this data could be out of date it could be old because we fetched it a few seconds ago essentially and the data could have updated since then so when we first fetch the data it's fresh for a fraction of a second and then it becomes stale straight away and you're going to see that if i try to refresh keep your eye on this fresh icon right here it goes green for a millisecond and then it becomes stale again so react query uses this under the hood to decide when to refetch data in the background to keep it fresh and it does this for example when we refocus on the window for all stale data if data is stale it will try to refetch it in the background to see if we have some updated data for us so if i go away and then come back over here to refocus you see that blink again that was us refocusing the window and it re-fetched the data in the background to see if we had any updated data that we could render to the dom so again that was only fresh for a millisecond just watch this again fresh for a millisecond so it's doing that refresh in the background all the time to make sure we have up-to-date data but we're always seeing cache data in the browser anyway so we don't have to wait for anything to see which is nice so we can control how long data is fresh for in the config of react query and that's what this config option right here is all about so the stale time right here is zero meaning that as soon as we get data it's not even fresh for a millisecond it's automatically stale but if we want to wait two seconds for example or 2000 milliseconds we can specify that in a config object so how do we do that well when we use the query or the use query hook which is in planets if i can find it right here so when we use this right here we can also pass as a third argument an object which represents the config so inside here for example i could set the scale time so still time and set that to be 2 000 milliseconds and now a query will remain fresh for two seconds before it becomes stale so if i save it and come over here now you see it's fresh for longer then it becomes stale if i change this to like 5000 then it's fresh for five seconds now if i go to another browser and then come back to refocus it tries to get that but if i go quickly within that five seconds it doesn't do another refetch because it's still fresh it only re-fetches stale data so there are other things we can change in the config as well if i just open this up we can see we have this retry thing right here and that is how many times failed queries should be retried before giving an error the default for this is three times and we saw that earlier on in this series we also have the cache time right here and that's how long stale queries are cached for before they're disposed of now the default is 300 000 milliseconds which is five minutes and that means if we go to another component and then back again it will use cached data and it will be really quick to load folders five minutes since the fetch so let's try setting this to 10 milliseconds and see what that looks like so i'm going to come down here and say cache time and set that to 10 milliseconds and in fact let's change this back to zero to get the default behavior again and go back over here and notice now every time we go to these different pages it's refetching and that's only for the planets not the people because we're using this in the planets component right here so every time we go to planets we see loading data now before before we had this we didn't see that because we were using cached data so if we go to refresh first time we see loading but then if we go back to planets we don't see it because it's using cached data does that make sense now there's also other properties we can add to this such as refetch or mount and that's true by default meaning we refetch data in the background every time a new component mounts which needs the data to see if it's updated there's also properties which have functions as values that can fire at different stages of the request for example we can use the on success property right here to fire a function whenever we have a success status so let me just do a quick one right here quick arrow function which says console.log and inside that data fetched with no problemo okay so if we save that now we should see that in the console if we open it up so data fetched with no problem oh we could also have a function for on error as well if we wanted to and we could use these functions to maybe show notifications to the users when either new data has been added or something goes wrong and there's more options you can add to this as well so for a full list definitely check out the docs they're going to be in the description down below but that my friends in a nutshell is the react query dev tools and the config option right here so next up we're going to see how to pass query variables to our use query hook