Using the @forge/bridge
package, you'll learn how to make REST calls to an authenticated Confluence endpoint.
This is part 2 of 3 in this tutorial. Complete Part 1: Build a Confluence hello world app before working on this page.
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.
In the app’s top-level directory make sure your tunnel is running:
1 2forge tunnel
Make sure your docker is running.
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 2import { requestConfluence } from '@forge/bridge';
Copy the following code to create a function that calls the Confluence REST API by using
the requestConfluence
package:
1 2const 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
.
When you save the index.jsx
file, the tunnel output in the terminal
will display a permission-scope-required
error. To address this, you'll
need to add the required permissions first; this is covered in the
Set required permissions section.
We need to get the key of the service desk we are currently on, which is stored in the product context.
To get the current product context, import the useProductContext
hook from @forge/react
:
1 2import ForgeReconciler, { Text, useProductContext } from '@forge/react';
Modify the start of the App
component so it automatically retrieves the context:
1 2const App = () => { const context = useProductContext();
Modify the start of the App function to add a comments
variable to store the footer comments data:
1 2const 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}`);
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 2React.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
We recommend clearing the src/frontend/index.jsx
file and replacing it with the provided code for error free results.
Your index.jsx
file should look like the following:
1 2import 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> );
If you haven't enabled usage analytics yet, we recommend you do so using following command:
1 2forge 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.
The requestConfluence
method inherits the product permissions of the user is interacting with the app. This can cause different API responses between different users in the same app.
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.
For more information on adding scopes, see Add scopes to call an Atlassian REST API.
You'll have to manually add the required scope permission into your manifest.yml
file (in this case, read:comment:confluence
):
At the bottom of the file, add the following code:
1 2permissions: scopes: - read:comment:confluence
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 2forge deploy forge install --upgrade
Start the tunnel again:
1 2forge tunnel
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: