How do I use the result of one async requestConfluence API call in another?

[Gerben Wierda]

Newbie. I have extended the standard hello-world app to this (which works):

import api, { route } from "@forge/api";
import ForgeUI, { render, Fragment, Text, Macro, useProductContext, useState } from '@forge/ui';

const fetchCommentsForContent = async (contentId) => {
  const res = await api
    .asUser()
    .requestConfluence(route`/wiki/rest/api/content/${contentId}/child/comment`);

  const data = await res.json();
  return data.results;
};

const fetchSpaces = async () => {
  const res = await api
    .asUser()
    .requestConfluence(route`/wiki/api/v2/spaces`);

  const data = await res.json();
  return data.results;
};

const App = () => {
  const context = useProductContext();
  const [comments] = useState(async () => await fetchCommentsForContent(context.contentId));
  const spaces = useState(async () => await fetchSpaces());

  console.log(`Number of comments on this page: ${comments.length}`);
  console.log(`Received spaces`);

  return (
    <Fragment>
      <Text>Number of comments on this page: {comments.length}.</Text>
      <Text>All info about my context: {JSON.stringify(context, null, 2)}</Text>
      <Text>All info about my spaces: {JSON.stringify(spaces, null, 2)}</Text>
    </Fragment>
  );
};

export const run = render(
  <Macro
    app={<App />}
  />
);

How do I chain these requests in Confluence-forge, such that I can use the result of the context to limit the spaces to the spaceKey of the spaces REST API call? I.e. get the context first before adding ?keys=$spaceKey to the spaces API call. Or be certain both async requests have finished before using the data from one to weed out what I need from the other?

Or should I simply use standard JS methods, like using fetch and chaining promises?

[Gerben Wierda]

Never mind regarding the example. The data I need is in the sync call useProductContext:

const fetchSpaces = async (spaceKey) => {
  const res = await api
    .asUser()
    .requestConfluence(route`/wiki/api/v2/spaces?keys=${spaceKey}`);
  const data = await res.json();
  return data.results;

};

const App = () => {
  const context = useProductContext();
  const [comments] = useState(async () => await fetchCommentsForContent(context.contentId));
  const spaces = useState(async () => await fetchSpaces(context.spaceKey));

The question remains, though, how do I chain these if one async call requires data from another and I do not want to move from async to sync?