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.