Manipulate existing queries with React Query Devtools

[00:00] Open the query dev tools and let's start with changing the position to right hand side. So what we can see apart from the list of the queries are the query statuses and some query actions that we can perform. So let's take a look at the employees page, which has one query and [00:20] that is the employees list. The green color determines that the query is fresh, meaning that the data that has been loaded is so new. It's new enough that we don't have to worry that the data could be outdated in any way. So we consider it fresh. There is no need to reload it. However, [00:40] after some time, the query becomes stale. As we can see, it is stale right now, which means it's kind of okay ish to display. However, if there is any opportunity, we're going to reload it. And when I will move to another page, we will see that it will move to blue so that it will be refetched [01:00] because it's stale. So it's not fresh enough. So when I click to budget, it's being blue, refetched. And when moving back to employees, again, it's being reloaded. What we see also is that there is a gray color that determines that there is a query that exists within [01:20] the query client, but it's inactive. So essentially, it means there was a component or multiple components which required the query to be used in some way. But as for now, there are no more active subscribers, no more active components that would demand it, that would require [01:39] it. And the number over here, that reminds what is the number of the components which are actively requiring the query data. There is also past, which relates to the enabled property of a query, which we'll deal with later on. So when it comes to the actions, [02:00] the refetch basically means that we're going to refresh the data right here, right now. So obviously, the stale is turning into fetched. Once the data is being loaded, it becomes stale again. We're going to work on it in just a while. Invalidate means that we want to mark a query as [02:19] stale. And in this case, as you can see, it's causing a query to be refreshed. And that is because when a query becomes stale, this additionally just causes the query client to refetch the query. Reset is a button that when clicked is causing a [02:39] query to go back to its initial state. So there are additional properties within the use query or use queries just in the query options that we can define what is the initial state of the query. So reset when clicked moves the query back to its initial state, which additionally causes the query client to [02:59] refetch the query. Remove is something that is essentially going to remove the query as we can see right now. And finally, we have 2 triggers. So we can manually make a query move to the loading state as we can see over here. And we can manually restore [03:19] loading, which is going to resume the query to its natural way of working. And finally, we can also click the trigger error, which is going to manually move the query into the error state, and we can restore the error. So using the trigger loading and trigger [03:38] error, we can visually test how does the component behave, how does it look like if instead of walking into the success state, which means that the data is available to be displayed, we can manually take a look how would the component look like. And as we can see, it freezes until I click it again. How would it look like [03:58] if it was in the loading or the error state?