Issue when showing the information from fetched API

Hi community! Recently, I’ve started to face an issue when trying to show the results of the fetched API in my Forge application. Everything was working fine, until I’ve started to face this issue.

In the attached picture, you can see the error. I’ve contacted the support and they’ve said that this is due to the OAuth2. I am not sure how can I enabled it or if there is something I need to change in my code.

BR,
Nikola

Welcome to the Atlassian Developer Community, @NikolaPerisic!

In order for us to diagnose better, can you share the code snippets related to this error? Based on the error, a good place to start is where you used the UI kit components.

Cheers,
Ian

Hi Ian,

Sure, here is the code snippet. I was instructed by one of your colleagues that I would need to use OAuth 2, and I am not sure how to do it. Is this correct?

BR,
Nikola

пон, 31. јул 2023. у 07:30 Ian via The Atlassian Developer Community <notifications@atlassiandeveloper.discoursemail.com> је написао/ла:

Thanks for sharing the code, @NikolaPerisic, that helped a lot. The reason for the OAuth 2-related error is because of the incorrect endpoint - you are using /rest/api/3/{issueKey}/comment (which does not exist) and I think you want to use /rest/api/3/issue/{issueKey}/comment instead (notice the missing /issue in the API).

Once that’s done, you will hit a problem with this snippet because comments will be a JSON object which also contains an array of comments for the issue. If you want to get the body only, you need to traverse the JSON response before passing it to the <Text> component.

  return (
      <Text>{comments}</Text>
  );

For reference, this is my modified code base that prints the 1st comment in the issue panel if there are comments, otherwise, I’ll display “No comments”.

const fetchComments = async function(issueKey) {
  const response = await api.asApp().requestJira(route `/rest/api/3/issue/${issueKey}/comment`);
  const data = await response.json();

  return data;
}

const App = () => {
  const {platformContext:{issueKey}} = useProductContext();
  const [comments] = useState(async () => await fetchComments(issueKey));

  console.log(comments?.comments[0]?.body.content[0].content[0].text);

  return (
      <Text>{comments?.comments[0]?.body.content[0].content[0].text ?? "No comments"}</Text>
  );
};

Do note that you need to add the necessary scope in your manifest to use the Get comments API.

permissions:
  scopes:
    - read:jira-work

Hope this helps.

Ian

1 Like