Forge app How to pass query params in 'GET' request type while using fetch api?

Hello All,

I want to call the third party api using fetch api in forge app. I have also added the api url manifest.yml file

as following:

permissions:
  external:
      fetch:
        backend:
          - "https://my-third-party-api-url.com/v2/customer"

Please find my code as below.

//import ForgeUI, { render, ProjectPage, Fragment, Text } from '@forge/ui';

import ForgeUI, { render, ProjectPage, Fragment,  Button } from '@forge/ui';
import { fetch } from '@forge/api';
const App = () => {
    
    async function getThirdParyData() {
        console.log("QS Custom getThirdParyData() function called.");
        //const params2 = new URLSearchParams("page=1&perPage=1");
        //https://my-third-party-api-url.com/v2/customer?page=1&perPage=1
        const result = await api.fetch(
            'https://my-third-party-api-url.com/v2/customer', {
            method: 'GET',
            headers: {
                'api-key': 'sdfgisern123213',
                'Accept': 'application/json'
            },
            qs:{'page':'1','perPage':'2'}
        });
        let data2 = await result.json();
       // console.log('data2 ==', json);
        console.log('json result ==', data2);
        const status = await result.status;
        console.log('Got status2 ==', status);
    }
    return (       
        <Fragment>
            <Button 
            text="Get extenal api data"
            onClick={async () => {
                await getThirdParyData();
              }}
          />
        </Fragment>
    );
};

I am facing challenges to pass query params as ā€œ?page=1&perPage=1ā€ in the GET method request. Sample request url = ā€œhttps://my-third-party-api-url.com/v2/customer?page=1&perPage=1ā€
Please correct if iā€™m missing something. Or else suggest me another library in forge app which could support this option.

1 Like

@dur4791,

Could you explain more about the challenges? What happens in the Forge App? What happens on the target of the request? What errors do you see?

1 Like

I am getting error response as 400 ( bad request response).

I had some queries on the response object. Will be able to read the response in forge app even if it contains 2 or 3k object(or say more than 10K). Will the size of the response matters in forge app to read the response object? Is there any limit to read the response object size?

Somehow iā€™m able to resolve this issue with another approach, but not sure if its correct or not. My code change to following.

   const getDeviceuri = 'https://my-third-party-api-url.com/v2/customer?page=1&perPage=100';

        console.log('URL : ', getDeviceuri);
        const result = await api.fetch(getDeviceuri , {  
                 
            headers: {
                'api-key': 'dfsfsetet123213',
                'Accept': '*/*',
                'Content-Type': 'application/x-www-form-url-encoded'          
            }
        });

@ibuchanan any comments on this