Is there any sane way to do conditional dependent requests?

const fooData = await getFoo();

if (fooData.needsBar) {
  const barData = await getBar();
  enrichFooWithBar(fooData, barData);

  if (barData.needsBaz) {
    const bazData = await getBaz();
    enrichFooWithBaz(fooData, bazData);
  }
}

return fooData;

const fooQuery = useQuery(['foo'], () => getFoo());

const barIsEnabled = fooQuery.data?.needsBar ?? false;
const barQuery = useQuery(['bar'], () => getBar(), { enabled: barIsEnabled });

const bazIsEnabled = barQuery.data?.needsBaz ?? false;
const bazQuery = useQuery(['baz'], () => getBaz(), { enabled: bazIsEnabled });

const data = (() => {
  const fooData = fooQuery.data;

  if (!fooData) return undefined;

  if (barQuery.data) {
    enrichFooWithBar(fooData, barQuery.data);
    
    if (bazQuery.data) {
      enrichFooWithBaz(fooData, bazQuery.data);
    }
  }

  return fooData;
})();
const isLoading = fooQuery.isLoading || barQuery.isInitialLoading || bazQuery.isInitialLoading;

return { data, isLoading };