Share fetched state across multiple components using React Query
React Query is smart with its caching. When you have a useQuery hook calling the same query in several places, React Query is going to already have the data pre-loaded for other components once the first one is rendered.
It was also fetch data again once it becomes stale.
[00:00] Let's move to a different component, budgets page in our case, and let's click on the budgets tab over here so that we can see that there is a table with some empty data. So in this example, we're going to fetch the same employees data so that we can calculate the total monthly [00:19] cost of all the employees and total yearly cost of all employees salaries. And the same way, we're going to use a different rest resource from the server, which is going to display what is the monthly total cost of benefits and the yearly total cost of benefits. So for this reason, we're just [00:39] going to use the same query that we've been using previously. So let's import the use query from 10stack, and we're going to also use the employees query, the one that we have just extracted previously. So let's destructure what is the data property, and we [00:59] need to support both cases when the data is already loaded or not routed yet. So if the data is already loaded, then we just pass the data into the salaries cost, which is going to calculate the monthly and the yearly, total salary costs for an array of employees. [01:19] So let's save it right now, and we can see that the data is already here. So when we refresh the page, we can see that this is loading. And once the data is loaded, we can see that it's immediately displayed. What is important is that once we download the data within [01:39] any of these components, the other component would get the data immediately from the cache. So right now, I'm going to refresh the page, and I'm going to open the 10stack dev tools. Right now, we haven't loaded the employees data yet, but when we move to one of the pages that do need the data, then we can see [01:59] that, yes, employees list key is already here. And when I will walk into the budgets tab, we will not see the data is being loaded, but the data will be displayed immediately. In the same way, if we walk back again into the welcome page and I refresh the application so that we have no data [02:18] loaded yet, and we move into budgets, we will see that, yes, this is being loaded and it changed from blue, which denotes in loading state into the stale, which is the orange. We're going to speak about it later. And when we move to employees, we will see that the data is immediately available within the cache and so the component is going to display it [02:38] immediately.