Implement Parallel Queries execution using multiple useQuery hooks within React Query

[00:00] Use the use query hook once again within the budgets page component. Let's start with renaming the data property into data employees since we would have twice the same name of the property, which is obviously not going to work. So now we can use the use query hook again, and we're [00:20] going to use the benefits query, which is very similar to the employees query. And here, we're going to use the data, which is going to be replaced into benefits data property, and we're going to use the benefits cost the same way as we've [00:39] done with the data employees. So these functions are very similar. And, again, it's either the object which is required by the budget table or undefined. So now when I'll save the component, we can see that both data is going to be displayed. What we're interested in is taking a look how [00:59] this will work within the React Query DevTools. So let's walk to the welcome page. Let's refresh. Let's make sure that there are no queries loaded initially. And what we'll see within the budget tab is that those queries are running in parallel. So if we now take a look how this looks within the [01:19] network tab, We will see that when we refresh that the order of the queries could be different each time. Know that if there is a React component which is actively displayed within the application and the component is using multiple use query hooks, we can think of it as if this [01:39] component had multiple dependencies from an external server data. And React Query interprets this in a way that both of them have to be displayed. Of course, each has separate data state, separate loading state, separate error state, and so on. Though, since the component [01:58] requires all of this data to be loaded, React Query is going to immediately start loading all of the hooks.