Enable React Query API Call Based on Response From Another Query

Last updated 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

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

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

--- ○ ---