Enable React Query API Call Based on Response From Another Query

Published on 11 Aug, 2021

We need to make two API calls in React Query. But, the second API call is dependent on the response of first one. For the purpose of two API requests, we bring two useQuery invocations.

const query1 = useQuery("firstQuery", () => {
  // Return user.id
});

const query2 = useQuery(
  "secondQuery",
  () => {
    // Fetch user details
  },
  {
    enabled: query1.user?.id,
  }
);

In the configuration object of second query, we enable the query only when user.id is available. This will help us to prevent unnecessary call by query2 on component load.