Not able to fetch summary from jira issue

Forge Forge UI Kit and Custom UI
,
1

I am trying to fetch data(summary) from a jira issue and show it on jira Issue Panel. But I am getting error after checking many times. Every time it is showing error: h.ErrorPanel is not a function

This is my code in src/frontend/index.jsx

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Text, useProductContext } from '@forge/react';
import { invoke } from '@forge/bridge';

const App = () => {
  const [data, setData] = useState(null);
  const [issueSummary, setIssueSummary] = React.useState(null);
  const context = useProductContext();
  const { issueKey } =context;
  
  const fetchSummary = async () => {  
    try {
      
      const res = await requestJira(`/rest/api/3/issue/${issueKey}?fields=summary`);
      const data = await res.json();

      if (!res.ok) {
        console.error('Error fetching issues:', res.statusText);
        return;
      }

      return data.fields.summary;
    }
   catch (error) {
    console.error('An unexpected error occurred while fetching issues:', error);
  }

  };
 
  
  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
    if (context) {
    fetchSummary().then(setIssueSummary );
    }
  }, [context]);
  return (
    <>
      <Text>Hello world!</Text>
      <Text>{data ? data : 'Loading...'}</Text>
      <Text>Summary of this issue:{issueSummary}</Text>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Please help me to get summary and custom field data using the api.

2

Hi @ChinmayBorkar2
I was able to make it work like this:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Code, Text, useProductContext } from '@forge/react';
import { requestJira } from '@forge/bridge';

const App = () => {
  const context = useProductContext()
  const [issueKey, setIssueKey] = useState(context?.extension.issue.key)
  
  const fetchSummary = async (issueKey) => {  
    try {
        const res = await requestJira(`/rest/api/3/issue/${issueKey}?fields=summary`);
        const data = await res.json();

        if (!res.ok) {
          console.error('Error fetching issues:', res.statusText);
          return;
        }

        return data.fields.summary;
    }
   catch (error) {
    console.error('An unexpected error occurred while fetching issues:', error);
  }

  };


  useEffect(() => {
    console.log(context)
    if (context?.extension.issue.key) {
      fetchSummary(context?.extension.issue.key).then(setIssueKey)
    }
  }, [context]);

  
  return (
    <>
      <Text>
        Issue Summary:
      <Code>{issueKey}</Code>
    </Text>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
3

Hi @alex_sam
Can you help me to extract summary & 2 custom fields value from a issue and display it on IssuePanel. If you have better code to fetch data then please share. And if not then please help me to execute this code with execution of summary and other 2 custom fields. Thank you for your help.