Forge UI Kit fetch API fails without error or response

I have a simple Forge app with this code:

import { fetch } from '@forge/api';
import ForgeUI, { Cell, Fragment, GlobalPage, Head, render, Row, Table, Text, useProductContext } from '@forge/ui';

const App = () => {
  const context = useProductContext();
  console.log("1 - Got context...");
  debugger;
  var my_reqs = get_my_requests (context);
  console.log("2 - Got my-reqs: " + JSON.stringify(my_reqs));
  return (
    <Fragment>
      <Text><b>Hello GlobalPage world!</b></Text>
      <Text>This is my Product Context: </Text>
      <Text>{JSON.stringify(context)}</Text>
      <Text>These are my Requests: </Text>
      <Text>{JSON.stringify(my_reqs)}</Text>
    </Fragment>
  );
};

async function get_my_requests (context) {
  var fetch_options = { method: 'GET', headers: { authorization: "My-name-is" + " " + "Anthony-Gonsalves" } };
  var get_my_req_url = "https://<*.domain in manifest>/<api-path>/</api-name>";
  var result;
  console.log("3 - Getting my-reqs with options: " + JSON.stringify(fetch_options));
  try {
    console.log("4 - Calling fetch...");
    debugger;
    result = await fetch(get_my_req_url, fetch_options);
    console.log("5 - Called fetch: " + get_my_req_url);
  } catch (err) {
    debugger;
    console.log("6 - Fetch Error: " + err);
    result = { error: err };
  }
  console.log("7 - Get My API result...");
  return result;
}

export const run = render(
  <GlobalPage>
    <App/>
  </GlobalPage>
);

The app shows logs 1, 3, 4, then 2. Logs 5, 6 and 7 are never shown. I’ve tested this with a tunnel and debug: the function get_my_requests quietly exits after the fetch call. No error condition is raised, nothing. The domain of the API call is included in the manifest as a permitted external.fetch.backend wild-card domain.
I recognize that I should use an await in the call to get_my_requests. But that causes the app to fail, saying that it is getting an object where it should get a response. I guess that’s because the render does not expect a Promise. But I can’t use an await there…
What am I doing wrong? Help!

Hi @KishoreMandyam ,

I think what you need to do is:

  1. Add useAction to your imports from ‘@forge/ui’.
  2. Change the call get_my_requests as follows: const [my_reqs] = useAction(value => value, async () => await get_my_requests());

Also see https://developer.atlassian.com/platform/forge/ui-kit-hooks-reference/#useaction

Regards,
Dugald