Forge Issue Panel: Cannot fetch data in useEffect UI Kit

I have a normal Issue Panel created with Forge.
In that panel function, I have a useEffect to perform a JQL search and then set the data to show in the panel. But somehow the fetch API does not work inside an Issue Panel function. Below is my code:

useEffect(() => {
  console.log("useEffect is running..."); (1)
  api.asApp().requestJira(`/rest/api/3/search?jql=project%20=%20PLG`, {
    headers: {
      'Accept': 'application/json'
    }
  })
  .then((res) => res.json())
  .then((searchResult) => searchResult.issues)
  .then((issueList) => {
    console.log(issueList); (2)
    setIssues(issueList);
  })
  .finally(() => console.log("Finished")); (3)
}, []);

In the above code. The log (1) works, the log (2) and (3) do not work.

Can anyone tell me what is wrong here?

Thank you!

You could try smth like this:

useEffect(async () => {
  console.log("useEffect is running..."); (1)
  const response =  await api.asApp().requestJira(`/rest/api/3/search?jql=project%20=%20PLG`, {
    headers: {
      'Accept': 'application/json'
    }
  })
  const result = await response.json()
  const searchResult = result.issues
  console.log(searchResult)
  setIssues(searchResult)
}, []);

and additionally wrapping the api call in try / catch block would be good idea/practice

2 Likes

Thank @KarolGrabowski, it works for me now.