Last updatedFeb 24, 2020

Step 3: Call a product API

This step describes how to call a product API from your Forge app and check the app logs. The goal is to call the Confluence Cloud REST API to get the comments on a page.

Complete Step 2: Create a Hello World app before working on this page.

Call a product API

Modify your app’s code to call the Confluence REST API to get the comments on a page. You’ll use the runtime API to make the REST call. The runtime API simplifies some operations, including HTTP calls. You’ll also use a Forge UI hook to get context information about the page the app is on.

  1. Navigate to the src directory and open the index.jsx file.
  2. Import the runtime API by adding the following to the top of the file.
    1
    import api from "@forge/api";
  3. Create a function that uses api from the runtime API to call the Confluence REST API by adding the following code below the import statement:
    1
    2
    3
    4
    5
    6
    7
    const fetchCommentsForContent = async (contentId) => {
        const res = await api
            .asApp()
            .requestConfluence(`/wiki/rest/api/content/${contentId}/child/comment`);    
        const data = await res.json();
        return data.results;
    };
    This function takes the contentId for a page to call the REST API with path /rest/api/content/{contentId}/child/comment. Using the asApp function means the request is made on behalf of you, the owner of the app. If you want the request made by the page viewer, use the asUser function.
  4. Use the Forge UI hook useProductContext to get the contentId to call fetchCommentsForContent.
    1. Add useProductContext to the import statement as shown below:
      1
      import ForgeUI, { render, Fragment, Text, useProductContext } from "@forge/ui";
    2. Add the following code to the App function directly before the return statement:
      1
      const context = useProductContext();
  5. Fetch the comments for the page and log the output in the App function.
    1. Add the Forge UI hook useAction to the import statement.
    2. Add the following code to the App function directly above the return statement:
      1
      2
      const [comments] = useAction(value => value, async () => await fetchCommentsForContent(context.contentId));
      console.log(`Number of comments on this page: ${comments.length}`);

Your index.jsx file should look like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import api from "@forge/api";
import ForgeUI, { render, Fragment, Text, Macro, useProductContext, useAction } from '@forge/ui';


const fetchCommentsForContent = async (contentId) => {
    const res = await api
        .asApp()
        .requestConfluence(`/wiki/rest/api/content/${contentId}/child/comment`);
    const data = await res.json();
    return data.results;
};

const App = () => {
    const context = useProductContext();
    const [comments] = useAction(value => value, async () => await fetchCommentsForContent(context.contentId));
    console.log(`Number of comments on this page: ${comments.length}`);
    return (
        <Fragment>
            <Text content="Hello world!" />
            <Text content="The content of your app will display here." />
        </Fragment>
    );
};

export const run = render(<Macro app={<App />} />);

Deploy your app

Deploy your changes to update the app installed on your developer site. You don’t need to run the install command as the app is installed on your developer site.

  1. Deploy your app by running:
    1
    forge deploy
  2. Add a comment to the Confluence page that contains your macro. For example, a comment with Hello from the comments.
  3. Refresh the Confluence page that contains your macro.

You shouldn’t notice any changes yet.

Check the logs

See the logs for your function to check the API call you just made. If the log does not display immediately, try again. It can take a minute for the log to display.

  1. Check the logs by running:
    1
    forge logs

You’ll see the logs for the API call that was made when you refreshed the Confluence page. It should look something like the following:

1
Number of comments on this page: 1

The number will change as you add or remove comments and refresh the page. Note, nested comments are not counted by this app, only top-level comments.

Next step

See Step 4: Change the front end with Forge UI to learn how to display the result of your call using Forge UI.