Reading isFetching State for Nested Requests in RTQ Single Query

When working with data in your application, it's important to keep your users informed about the current state of the data they are viewing. This is especially important when making API requests, as users will often have to wait for the data to load. In this article, we will discuss how to use the isFetching state in RTQ to handle the loading state of nested requests in a single query.

Before we dive into the details of using isFetching for nested requests, let's first take a look at what isFetching is and how it works. In RTQ, the isFetching state is a boolean value that indicates whether a request is currently in progress. This state is automatically managed by RTQ, so you don't need to worry about setting it manually. Instead, you can simply access the isFetching state in your component and use it to display a loading indicator to your users.

Now that we have a basic understanding of isFetching, let's see how we can use it to handle the loading state of nested requests in a single query. To do this, we will first need to define our query using the RTQ createQuery function. This function allows us to define a query that makes a single request to the API, but includes the data from multiple endpoints. For example, we might have a query that looks like this:

const query = createQuery(
  'myQuery',
  gql`
    query MyQuery {
      endpoint1 {
        data
      }
      endpoint2 {
        data
      }
    }
  `
);

In this example, our query is making requests to two different endpoints, endpoint1 and endpoint2. Now, let's see how we can use the isFetching state to handle the loading state of these nested requests.

To access the isFetching state for a specific endpoint, we can use the useQueryState hook provided by RTQ. This hook allows us to access the state of a specific query, including the isFetching state. For example, to access the isFetching state for endpoint1, we can use the following code:

const { isFetching: isFetchingEndpoint1 } = useQueryState(query, 'endpoint1');

This will give us a isFetchingEndpoint1 variable that we can use to display a loading indicator for endpoint1. We can do this by using a conditional render in our component, like this:

return (
  

    {isFetchingEndpoint1 ? (
      
Loading data from endpoint1...
    ) : (
      
Data from endpoint1:
      
{JSON.stringify(data.endpoint1, null, 2)}
    )}
  
);

In this example, we are using the isFetchingEndpoint1 state to conditionally render a loading indicator while the data from endpoint1 is being fetched. Once the data is fetched, we render the data itself. We can use a similar approach to handle the loading state for endpoint2 as well.

Now, let's see how we can handle the loading state for our entire query, including both endpoint1 and endpoint2. To do this, we can use the isFetching state of the query itself, which is available through the useQueryState hook. For example, to access the isFetching state of our query, we can use the following code:

const { isFetching } = useQueryState(query);

This will give us an isFetching variable that we can use to display a loading indicator for our entire query. We can do this by using a conditional render in our component, like this:

return (
  

    {isFetching ? (
      
Loading data...
    ) : (
      

        
Data from endpoint1:
        
{JSON.stringify(data.endpoint1, null, 2)}
        
Data from endpoint2:
        
{JSON.stringify(data.endpoint2, null, 2)}
      
    )}
  
);

In this example, we are using the isFetching state of our query to conditionally render a loading indicator while the data from both endpoint1 and endpoint2 is being fetched. Once the data is fetched, we render the data itself. This gives our users a clear indication of the current state of the data they are viewing, and helps to improve the overall user experience of our application.

In conclusion, using the isFetching state in RTQ is a powerful way to handle the loading state of nested requests in a single query. By using the useQueryState hook, we can easily access the isFetching state for a specific endpoint or for our entire query, and use it to display a loading indicator to our users. This helps to improve the overall user experience of our application, and ensures that our users are always informed about the current state of the data they are viewing.

References