Fetching dependent queries with useQuery
Sometimes, during our development process, we need to have values that are returned from one query that we can use in another query or have a query execution depend on a previous query. When this happens, we need to have what is called a dependent query.
React Query allows you to make a query depend on others via the enabled option.
This is how you can do it:
const App = () => {
const { data: firstQueryData } = useQuery({
queryKey: ["api"],
queryFn: fetchData,
});
const canThisDependentQueryFetch = firstQueryData?.hello
!== undefined;
const { data: dependentData } = useQuery({
queryKey: ["dependentApi", firstQueryData?.hello],
queryFn: fetchDependentData,
enabled: canThisDependentQueryFetch,
});
…
In...
