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!