Fetch and display server data using React Query useQuery hook

[00:00] Open the React component and let's make use of the use query hook. It is being imported from tanstack slash react query. Use query is the most fundamental and the most important hooks we're going to use within React Query. So it accepts a lot of different parameters though. We're going to [00:19] define 2 of them, the 2 most important ones. So the query key. This is the identifier of the query. So it identifies what is the data that we are going to fetch from the server. So it should be an array that might include strings or objects. So in our case, [00:39] we're going to display the data about employees. So let's put that this is the employees entity and we're going to fetch the list. So this is the identifier. And we need to specify how do we want to fetch the data. So this is the query function. So in our [00:59] case, we're going to put the async function which is going to make use of a function that returns a promise. So let's take a look at another file, the employees API which includes the get employees function. This is the one that is relevant for [01:19] now. So right now, we are not using the query string over here. However, we're just using the native fetch function so that we run the HTTP get request on the URL slash employees. And what we expect over here is that the response is going to [01:39] be employee array. So let's use the get employees function over here. So what we're going to do is to import the function and run it. What is being imported is that query function is returning the get the result of get employees. [01:59] So query function itself is inferring what is the result. So the whole use query call is also inferring what is the result of the query data. So what we can get from here is lots of different properties. We're interested in the first step and just the [02:19] data. So there might be 2 states. 1st, the data has already been received and the data is not yet received. So we're just going to put a conditional rendering over here. So if the data has been already received, then we're just going to put the data over here. [02:38] So we're making sure that on the TypeScript level, the data variable is not undefined anymore. And our employee listing is actually requiring the employees prop to be there, not to be undefined. So let's see how it goes right now. [02:59] So we can see that the list has already been displayed And let's just reload the application. So we can see that there has been an employees page 1 request made. What is important is that React Query is tracking which components actually [03:19] need the data. And obviously, if there are no components that actually require some queries, then the requests are not going to be made. So let's walk into the index tab of our application and red start the application back again. And we can see that initially, [03:39] there are no requests being made. And when we actually walk into the employees tab, then the query is going to be needed by the first component ever. So this is the first moment when the query function is going to be executed. So let's walk into the employees tab over here and we [03:59] can see that this request has been made again.