Forge getData from Backend to Frontend correctly

Forge Forge UI Kit and Custom UI
,
1

Hello everybody,

i am new to Forge dev environment, so excuse me for asking a question like this. I am coming from the Java world so i am trying to familiarise myself with React etc.
So my problem is that, i want to have an extra issue panel in my issue and try to render some values in it, like a table etc. But i can not figure out the correct way to fetch the data from the backend and render them correctly. I see a lot of undefined/null returns :confused:

Below is the code i use.

index.js

resolver.define('fetchMainIssues', async (req) => {
    console.log(req);
  
    const obj = JSON.parse(JSON.stringify(req));
    const epicIssueId = obj.context.extensionContext.issueKey
    console.log("Current Issue: " + obj.context.extensionContext.issueKey);
    
    const xxx = fetchIssuesOfEpic(epicIssueId)
      .then(response => {
          const listOfIssueKeysInEpic = []

          //get issues of Epic
          for (const issue of response.issues) {
            listOfIssueKeysInEpic.push(issue.key)
          }
          return listOfIssueKeysInEpic
        }
      )
      return xxx
    }
  )

async function fetchIssuesOfEpic(issueId) {
    
    const result = await api.asApp().requestJira(`/rest/api/3/search?jql="Epic Link"=${issueId} Order By key ASC`);
    const json = await result.json();
    return json
}

App.js

const [data, setData] = useState(null);

useEffect(() => {
    if (!data) return;

    Promise.all(
      data.map((data) => {
        console.log("In Promise: " + data)
        return data;
        //invoke('fetchMainIssues', { example: 'my-invoke-variable' })
      })
    )
    .then((saved) => saved.filter((a) => a))
    .then(setData);
  },[data]);

const Panel = () => (
    <Fragment>
      {data.map((i) => {
        return (<Text>{i}</Text>)
      })}
    </Fragment>
  );

As you see its a combination of code snippets found in Forge Examples Repos or here in the community. I read the code again and again, i think i understand whats going on, but i miss the result at the end :frowning: . So any help will be amazing :smiley:

Thanks in advance and sorry for the long post
Regards

2

Hi there,

Did you already found a way through it?

So from what I can tell, its as well a little bit of a mixture of issues. I think also your App.js code is not the complete one, right? Could you post on here the full source code of these two files?

On the index.js I can see in four fetchIssuesOfEpic method you are using JS Promises and using a async function you could return directly result.json(), because you are consuming it in a .then()… way so you want to return a promise in this function as well.

async function fetchIssuesOfEpic(issueId) {
    const result = await api.asApp().requestJira(`/rest/api/3/search?jql="Epic Link"=${issueId} Order By key ASC`);
    return result.json();
}

would also be recommended for you to use the forge tunnel --debug command to be able to add some debugger; statements in your javascript code. So you can step in and see where the issues appear.

But to help you a bit better, would be great to get the full source or even a link to a repo, if you are willing to speak about it in public.

Have a good one!

3

Hello @lucjahn ,

thank you for your reply and i am sorry for replying so late.
At the end i figured out the way to properly finish this task :smiley: