Custom ui calling

[AhmedPan]

Hello,

I created a custom UI Jira Dashboard app and updated the getText resolver to return a object. Later changed to return a string.

From the Front-end in the Edit component I am invoking the getText resolver. This returns data in both format object and string. I updated the state after getting data from the resolver.

I am trying to display data returned from getText but I am getting below error. Not sure if this is related to my code. This error is show soon as the setData is called.

Here is the code of the resolver:

import Resolver from '@forge/resolver';

const resolver = new Resolver();

resolver.define('getText', (req) => {
  console.log('getText is called');
  console.log(req);

  var result = {key: 'f', fields: { summary: 's', customfield_10011: '11', customfield_10087: '87', assignee: { displayName: 'n'}}};

  try {
    console.log('try');
    result = {
      key: 'The Key',
      fields: {
        summary: 'The Summary',
        customfield_10011: 'Custom field 10011',
        customfield_10087: 'Custom field 10087',
        assignee: {
          displayName: 'Full name'
        },
      },
    };
    console.log('end of try');
  } catch (e) {
    console.log(`catch: error: ${JSON.stringify(e)}`);
  } finally {
    return JSON.stringify(result);
  }
});

export const handler = resolver.getDefinitions();

Code of the Edit form:

import React, { useEffect, useState } from 'react';
import Form, { Field } from '@atlaskit/form';
import TextField from '@atlaskit/textfield';
import Button, { ButtonGroup } from '@atlaskit/button';
import { view, invoke } from '@forge/bridge';

function Edit() {
  const [data, setData] = useState(null);
  const onSubmit = (formData) => view.submit(formData);

  useEffect(async () => {
    const re = await invoke('getText', {sendingData: 'abcd'});
    setData(JSON.parse(re));
  });

  return (
    <div>
      <div>This is Edit form</div>
      <div style={{fontSize: "16px"}}>Key {data?.key} </div>
      <div style={{fontSize: "16px"}}>Summary {data?.fields?.summary}</div>
      <div style={{fontSize: "16px"}}>Name {data?.fields?.assignee?.displayName}</div>
    </div>
  );
}

export default Edit;

To deploy I follow below steps:
On the static\hello-world folder
-npm run install
-npm run build

forge deploy
forge install

[mpaisley]

Hey,

I think the issue was just how you were calling the async function within your useEffect.

Try this instead:

  useEffect( () => {
    const getText = async () =>  {
      const response = await invoke('getText', {sendingData: 'abcd'});
      setData(JSON.parse(response));
    }
    getText();
  }, []);

To learn more about calling async functions in useEffect, see Devtrium: How to use async functions in useEffect (with Examples)

If this has helped solve your issue, please mark this post as the solution.

If you’re still stuck, don’t hesitate to let me know.

Cheers!
Mel

[AhmedPan]

For other app I created with Forge worked with useEffect( async. Also, when I tested the this morning it was working. Anyways I was using async and useEffect the wrong way.

After updating now it’s calling below two endpoint every second in a loop.

https://mydomain.atlassian.net/gateway/api/gasv3/api/v1/batch

GraphQL Gateway

In the console it’s logging below message.
Event(s) submitted to GASv3

Thanks for helping out.