Part 2: Call a Confluence API

Using the @forge/bridge package, you'll learn how to make REST calls to an authenticated Confluence endpoint.

Make an API call

In this section, you'll modify your app to call the Confluence REST API. Using the requestConfluence bridge method from the @forge/bride package, you'll get the comments on a Confluence page in an array and print the number of comments to the console.

The @forge/bridge package simplifies requests to product REST APIs as well as other javascript APIs to interact with the products. For this tutorial, you'll also use the UI Kit hook useProductContext to get context information about the Confluence page the app is on.

Modify your app’s code to call the Confluence REST API that gets the footer comments on a page. You’ll use the returned array to count the number of footer comments and write it to the logs in your browser console.

1. In the app’s top-level directory make sure your tunnel is running:

   1
   2
   forge tunnel
   

   Make sure your docker is running.

2. Navigate to the src/frontend directory and open the index.jsx file. Import the requestConfluence from @forge/bridge package by adding the following to the top of the file:

   1
   2
   import { requestConfluence } from '@forge/bridge';
   

3. Copy the following code to create a function that calls the Confluence REST API by using the requestConfluence package:

   1
   2
   const fetchCommentsForPage = async (pageId) => {
     const res = await requestConfluence(`/wiki/api/v2/pages/${pageId}/footer-comments`);
     const data = await res.json();
     return data.results;
   };
   

   This function takes the pageId for a page to call the REST API with path /wiki/api/v2/pages/${pageId}/footer-comments.

4. We need to get the key of the Confluence page we are currently on, which is stored in the product context.

   1. To get the current product context, import the useProductContext hook from @forge/react:

      1
      2
      import ForgeReconciler, { Text, useProductContext } from '@forge/react';
      

   2. Modify the start of the App component so it automatically retrieves the context:

      1
      2
      const App = () => {
        const context = useProductContext();
      

5. Modify the start of the App function to add a comments variable to store the footer comments data:

   1
   2
   const App = () => {
     const context = useProductContext();
   
     // add these code to keep track of footer comments
     const [comments, setComments] = React.useState();
     console.log(`Number of comments on this page: ${comments?.length}`);
   

6. Add the following code inside App, below the fetchCommentsForPage function, so it automatically runs when context finishes loading and updates the data stored in comments:

   1
   2
   React.useEffect(() => {
     if (context) {
       // extract page ID from the context
       const pageId = context.extension.content.id;
   
       fetchCommentsForPage(pageId).then(setComments);
     }
   }, [context]);
   

   This code uses the page ID to call fetchCommentsForPage, then updates the data stored in comments

Your index.jsx file should look like the following:

1
2
import React from 'react';
import ForgeReconciler, { Text, useProductContext } from '@forge/react';
import { requestConfluence } from '@forge/bridge';

const fetchCommentsForPage = async (pageId) => {
  const res = await requestConfluence(`/wiki/api/v2/pages/${pageId}/footer-comments`);
  const data = await res.json();
  return data.results;
};

const App = () => {
  const context = useProductContext();

  // add these code to keep track of comments
  const [comments, setComments] = React.useState();
  console.log(`Number of comments on this page: ${comments?.length}`);

  React.useEffect(() => {
    if (context) {
      // extract page ID from the context
      const pageId = context.extension.content.id;

      fetchCommentsForPage(pageId).then(setComments);
    }
  }, [context]);

  return (
    <>
      <Text>Hello world!</Text>
    </>
  );
};

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

Enable usage analytics (optional)

If you haven't enabled usage analytics yet, we recommend you do so using following command:

1
2
forge settings set usage-analytics true

This command provides the consent required by Forge to collect data about your app's deployments and installations (including error data). This, in turn, helps us monitor the overall performance and reliability of Forge. The collected data also helps us make better decisions on improving Forge's feature set and performance.

For information about how Atlassian collects and handles your data, read our Privacy Policy.

Test your app

1. Add a footer comment to the Confluence page that contains your macro. For example, a comment with Hello from the comments.
2. Refresh the Confluence page that contains your macro.
3. Check the developer console in your browser. The number of comments on the page displays as follows:

Set required permissions

Your app calls a remote resource; namely, the Confluence REST API. As such, you'll need to grant your app the right permissions. To do this, you'll need to add the required OAuth 2.0 scope to the app's manifest.

You'll have to manually add the required scope permission into your manifest.yml file (in this case, read:comment:confluence):

1. At the bottom of the file, add the following code:

   1
   2
   permissions:
     scopes:
       - read:comment:confluence
   

2. Whenever you change permissions, you must upgrade the app's installation. Stop your tunnel process and run these commands to deploy and install your change:

   1
   2
   forge deploy
   forge install --upgrade
   

3. Start the tunnel again:

   1
   2
   forge tunnel
   

Next step

In the next tutorial, you'll learn how to make changes to your app's frontend using the UI Kit components of Forge.