requestJira method not working

I have this code running with forge tunnel

const fetchProjects = async () => {
 console.log("requesting")
  const response = await api.asApp().requestJira(route`/rest/api/3/project/search`);
  console.log("waiting for response");

  const data = await response.json();
  console.log("resp ", data);


  if (!response.ok) {
    const message = `Error fetching projects: ${response.status} ${response.statusText}`;
    console.error(message);
    throw new Error(message);
  }

  return response.json();
};

and seems the code not passing after the request line, because I’m not getting anything logged after reaching that row.

2 Likes

Hi Narek,

I think this is probably related to how you’re calling your async function from your App function.

Can you tell me how you’re calling ‘fetchProjects’ from your App?

Here’s a sample of how I used it to populate a table with the project key and name using your fetchProjects function above:

const App = () => {

    const [projects] = useState(async () => await fetchProjects());

  return (
    <Fragment>
      <Text>Jira Projects!</Text>
        <Table>
            <Head>
                <Cell>
                    <Text>Project Key</Text>
                </Cell>
                <Cell>
                    <Text>Project name</Text>
                </Cell>
            </Head>
            {projects.values.map(proj => (
                <Row>
                    <Cell><Text>{proj.key}</Text></Cell>
                    <Cell><Text>{proj.name}</Text></Cell>
                </Row>
            ))}
        </Table>

    </Fragment>
  );
};

I’m also seeing this in my console:

Listening for requests...


invocation: 888405f3c0b3255a index.run
INFO    03:15:19.343  888405f3c0b3255a  requesting
INFO    03:15:20.304  888405f3c0b3255a  waiting for response

Hope this helps.
Mel

For what it’s worth, we are seeing similar behaviour with a proxy error when calling the Confluence attachments API with requestConfluence. Forge doesn’t log anything for us either, but we’re getting a proxy error back if we wrap the API call in a try/catch. This might be worth trying just to see if you’re hitting the same problem.

1 Like

Hi @mpaisley

Thanks for quick reply

I’m doing it on button click


const View = () => {

  const [formState, setFormState] = useState();
  const [a, setA] = useState();


  const fetchProjects = async () => {
    try {


      console.log("requesting projects");
      const response = await api.asApp().requestJira(`https://nar-test.atlassian.net/rest/api/3/project/search`, {
        headers: {
          'Accept': 'application/json'
        }
      });

      console.log("response1")

      console.log(`Response: ${response.status} ${response.statusText}`);

      console.log(await response.json());
    }
    catch (e) {
      console.log('catch err', err);
    }
    /*if (!response.ok) {
      const message = `Error fetching projects: ${response.status} ${response.statusText}`;
      console.error(message);
      throw new Error(message);
    }
  
    return response.json();*/
  };

  // Handles form , which is a good place tosa  call APIs, or to set component state...
  const onSubmit = async (formData) => {
    console.log(formData);
    setFormState(formData);

    fetchProjects()
      .then(projects => {
        setA(projects);
        console.log(projects)
      })
      .catch(err => {
        setA(err)
        console.error(err)
      });
  };

  const getProjectOptions = (data) => {
    return (
      <Select label="Choose project" name="project">
        {data.values.map((value) => (
          <Option
            key={value.id}

            label={value.name}
            value={value.id}
          />
        ))}
      </Select>
    );
  }
  const getReleaseOptions = (data) => {
    return (
      <Select label="Choose Release" name="release">
        {data.versions.map((value) => (
          <Option
            key={value.id}

            label={value.name}
            value={value.id}
          />
        ))}
      </Select>
    );
  }

  return (

    <Fragment>
      <Heading size="large">Generate Release notes with AI</Heading>

      <Heading>
        {a}
      </Heading>
      <Form onSubmit={onSubmit}>



      </Form>

    </Fragment>
  );
}


export const runView = render(
  <View />
);

I’ve tried to move fetchProjects one level upper but it didn’t change it. Still it hangs and nothing happens

Hi Judd,

Thanks for hint, I’ve tried but result is the same

I just came here because I had the same problem, and fortunately I’ve since fixed it. If you have this because you did the same as me:

  • fetchProjects() is async
  • somewhere higher up the call stack there’s a non-async function calling fetchProjects() without an await (or calling another async function that ultimately calls fetchProjects())
  • that call missing the await returns immediately because it returns a Promise
  • the function exits cleanly, without waiting for fetchProjects(), because this is what JS does
  • you see no more logs because the next line of code was never executed, because your function already exited
4 Likes

Thank you just added const r = await fetchProjects(); and it worked

Good to hear! :tada: