Unable to fetch user data from JIRA API

Forge Forge UI Kit and Custom UI
, ,
1

Hey guys, I’ve been trying to fetch user data via the JIRA REST API for my Custom UI app but I can’t get it working.

At first I tried it directly in my frontend .jsx file like this:

const SaveTemplateModal = ({ isOpen, onClose, onSave, categories, setSelectedCategory }) => {
  const [templateName, setTemplateName] = useState('');
  const [userName, setUserName] = useState('');

  useEffect(() => {
    const fetchUser = async () => {
      const response = await requestJira(`/rest/api/3/myself`);
      const data = await response.json();
      setUserName(data.displayName);
    };

    fetchUser();
  }, []);

  const handleSave = () => {
    console.log(userName);
    onSave(templateName);
    setTemplateName('');
  };

However this gets me in an endless “Allow access” loop when rendering the app. Also, I read that making the API calls in my frontend isn’t the way to go, which makes sense.
So I tried moving the API call into my index.js where my resolvers are at:

resolver.define('getUser', async () => {
  const response = await api.asUser().requestJira(route`/rest/api/3/myself`);
  const data = await response.json();
  return data.displayName;
});

Then I’m trying to use the data like this (I removed my other initializations, which are working fine, for better readibility.

const Checklist = () => {
  const [userName, setUserName] = useState('');

    const fetchUser = async () => {
      const fetchedUserName = await invoke('getUser');
      setUserName(fetchedUserName);
    };

    fetchUser();
  }, []);

When I do it like this I get the following error and also the app asks me to allow access every time I reload the page.

Uncaught (in promise) Error: Expected reject to be called with Error, got [object Undefined]
    at t.reject (https://jira-frontend-bifrost.prod-east.frontend.public.atl-paas.net/assets/async-forge-ui-custom-field.66e2c129.js:68:43406)
    at https://jira-frontend-bifrost.prod-east.frontend.public.atl-paas.net/assets/async-forge-ui-custom-field.66e2c129.js:68:42928

Error: Expected reject to be called with Error, got [object Undefined]
    at fe.error (https://forge.cdn.prod.atlassian-dev.net/global-bridge.js:2:74679)
    at Object.<anonymous> (https://forge.cdn.prod.atlassian-dev.net/global-bridge.js:2:82452)
    at JSON.parse (<anonymous>)
    at Ee.o (https://forge.cdn.prod.atlassian-dev.net/global-bridge.js:2:82311)
    at Ee (https://forge.cdn.prod.atlassian-dev.net/global-bridge.js:2:82464)
    at We.i.on (https://forge.cdn.prod.atlassian-dev.net/global-bridge.js:2:87124)
    at We (https://forge.cdn.prod.atlassian-dev.net/global-bridge.js:2:87261)
    at https://forge.cdn.prod.atlassian-dev.net/global-bridge.js:2:93247
    at e.try (https://forge.cdn.prod.atlassian-dev.net/global-bridge.js:2:65731)
    at https://forge.cdn.prod.atlassian-dev.net/global-bridge.js:2:93044

What am I doing wrong here? Any help is greatly appreciated.

2

Hi @mkmax, fetchUser looks like it’s a floating promise? I think you should handle rejections here incase the invoke fails and also log out some debugging info to see why it failed. Are you able to do something like this:

const Checklist = () => {
  const [userName, setUserName] = useState('');

    const fetchUser = async () => {
      const fetchedUserName = await invoke('getUser');
      setUserName(fetchedUserName);
    };

    useEffect(() => {
      fetchUser().catch((err) => console.log(err));
    }, []);
...

Then examine the console and see what the error is. You can also add some more logging to your resolver function and run forge tunnel to debug from the backend side, where the logic to actually call the API takes place.

3 Likes