Rate this page:
This page introduces the Forge Javascript APIs.
Using the @forge/api
package, you'll learn how to make REST calls to an authenticated Jira endpoint.
This is part 2 of 3 in this tutorial. Complete Part 1: Build a Jira hello world app before working on this page.
In this section, you'll modify your app to call the Jira REST API. Using the
Product Fetch API
from the @forge/api
package, you'll get the comments on a Jira issue in the form
of an array and print the number of comments to the console.
The @forge/api
package simplifies HTTP operations and contains other Forge APIs such as the
Storage and
Properties APIs.
For this tutorial, you’ll also use a
UI kit hook to get context
information about the Jira issue the app is on.
In the app’s top-level directory, install the @forge/api
package API by running:
1 2npm install @forge/api
Restart your tunnel to use the new npm modules by running:
1 2forge tunnel
Navigate to the src
directory and open the index.jsx
file. Import the @forge/api
package by adding the following to the top of the file:
1 2import api, { route } from "@forge/api";
Copy the following code to create a function that calls the Jira REST API by using
the @forge/api
package:
1 2const fetchCommentsForIssue = async (issueIdOrKey) => { const res = await api .asUser() .requestJira(route`/rest/api/3/issue/${issueIdOrKey}/comment`); const data = await res.json(); return data.comments; };
This function takes an issueIdOrKey
to call the REST API with path
/rest/api/3/issue/${issueIdOrKey}/comment
.
Use the UI kit hook useProductContext
to get the issueId
to call fetchCommentsForIssue
:
Add useProductContext
to the import statement as shown below:
1 2import ForgeUI, { render, Fragment, Text, IssuePanel, useProductContext } from "@forge/ui";
Add the following code to the App
function directly before the return statement:
1 2const context = useProductContext();
Fetch the comments for the page and log the output in the App
function.
useState
UI kit hook to the import statement as shown below:1 2import ForgeUI, { render, Fragment, Text, IssuePanel, useProductContext, useState } from "@forge/ui";
Add the following code to the App
function directly above the return statement:
1 2const [comments] = useState(async () => await fetchCommentsForIssue(context.platformContext.issueKey)); console.log(`Number of comments on this issue: ${comments.length}`);
Save the file. You'll see the tunnel output in the terminal showing the app code was reloaded:
1 2Reloading code... App code reloaded.
Your index.jsx
file should look like the following:
1 2import api, { route } from "@forge/api"; import ForgeUI, { render, Fragment, Text, IssuePanel, useProductContext, useState } from "@forge/ui"; const fetchCommentsForIssue = async (issueIdOrKey) => { const res = await api .asUser() .requestJira(route`/rest/api/3/issue/${issueIdOrKey}/comment`); const data = await res.json(); return data.comments; }; const App = () => { const context = useProductContext(); const [comments] = useState(async () => await fetchCommentsForIssue(context.platformContext.issueKey)); console.log(`Number of comments on this issue: ${comments.length}`); return ( <Fragment> <Text>Hello world!</Text> </Fragment> ); }; export const run = render( <IssuePanel> <App /> </IssuePanel> );
If an app accesses remote resources, it must be granted permissions.
Since your app calls the Jira REST API, you'll need to add the required OAuth 2.0 scope to the app's manifest.
In the steps below, you'll do this by using the forge lint
command. Note that you can also do this
by manually updating the manifest. Learn more about adding scopes to call an Atlassian REST API.
1 2forge lint --fix
The forge lint
command adds required scopes automatically to the manifest.yml
file (in this
case, read:jira-work
).
1 2forge deploy forge install --upgrade
1 2forge tunnel
1 2invocation: 158b5987a4724ee5 index.run INFO 05:01:33.408 158b5987a4724ee5 Number of comments on this issue: 1
Note, the .asUser()
function inherits the product permissions of the user who has granted
access to the app. This can cause different API responses between different users in the same app.
In the next tutorial, you'll learn how to make changes to your app's frontend using the UI kit components of Forge.
Rate this page: