Use isPending, isLoading and isFetching flags with React Query

[00:00] Let's destructure some more properties which determine whether the query is in loading state. So we have is pending and we also want the is loading one and the other one is going to be is fetching. So there is more, but these are the ones that we're interested in. So the difference between them is that is pending [00:20] determines that there is no data available within the query, so that there is no data for this component to display. It means, basically, that the query entry exists, but it's empty. Is fetching determines that there is a request that has been sent from the client to a server, but the response hasn't arrived yet. [00:40] So we're basically during the time of fetching. And is loading is something that we can consider as is initially loading because, technically, it boils down to is pending and is fetching at the same time. So we have no data yet, and we are during fetching, which essentially can take place only initially. [01:00] So what we're going to start with is actually is fetching since we can initially load the data. But it could happen that for any reasons, we might be re fetching the data so that even though something might be displayed over here, we would also like to show a spinner or any kind of message, which would denote that there is some [01:20] request that we are awaiting for its response. So let's put some conditional rendering over here, which will say that if we are during fetching, we just want to show a message or a spinner, whatever that is. So let's save it and let's see how it looks. So initially, we could see the loading message [01:39] available over here. But we'll also trigger a fact that if we walk to another page and we would go back to the employees, what React Query is going to find out is that the query is being stale. So it would refetch it. So what we can see is that both the data and the loading message is being displayed. Let's [01:59] see it once again. Both the data and the message is displayed. And this is because we do have the data available for this component to be displayed, which means it's not pending because the data is there, but we're also fetching or actually re fetching the data. So if we want to use the is pending, that basically [02:19] means that there is no data to be displayed yet. And finally, if we want to use the is loading, that basically means that we have never had any data loaded yet. So in most of these situations, is loading and is pending actually boils down to the same [02:39] place, but let's just see how is loading is going to be displayed. So we have seen we have never had any data loaded yet. So is loading is going to return early in this case. So most often, what you would like to do is probably something like this. And since is loading is a type of is pending, this is what [02:59] you're going to use with most of the cases.