Postman & V8 API OAuth2 Confusion

💬 General Discussion
13

Here is a simple sample HTML page that will retrieve GraphQL data from SuiteCRM using jquery. This sits inside a folder inside the legacy folder in SuiteCRM - /suietcrm/legacy/apidemo/apidemo.html for example. A user that is logged in can click the button and retrieve data. In this example the data retrieved is just user data, but you can use the GraphQL data definitions in SuiteCRM to build your own.

<html>
<head>
<title>
    API Demo Page for GraphQL with SuiteCRM - AgonistesGBH
</title>
</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>



function getCookie(cname) {
    let name = cname + "=";
    let ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function getGraphData(){

   var token = getCookie('XSRF-TOKEN');
            
    console.log(token);      

var totalmsg = '';                                                          

    var operationName = 'getRecordList';

    var query = `
    query getRecordList($module: String!, $limit: Int, $offset: Int, $criteria: Iterable, $sort: Iterable) {
        getRecordList(module:$module, limit:$limit, offset: $offset, criteria: $criteria, sort: $sort) { 
            id 
            _id 
            meta 
            records 
            __typename 
        }
    }
    `;

    var variables = {
        'criteria': {
            'name': "",
            'orderBy': "",
            'searchModule': "users",
            'sortOrder': "", 
            'filters': {
                'terminal': { 
                    'field': "terminal", 
                    'fieldType': "bool",
                    'operator': "=", 
                    'values': [1] 
                } 
            }     
        }, 
        'module': 'users', 
        'limit': 20,  
        'offset': 0,   
        'sort': {       
            'orderBy': "",
            'sortOrder': "DESC"  
        }  
    };     
            
    var r = $.ajax({ 
        async: true,   
        url: '/api/graphql',
        method: 'POST',   
        ContentType: 'application/json',  
        headers: {                                   
            'Accept': 'application/json, text/plain, */*', 
            'Content-Type': 'application/json',              
            'X-XSRF-TOKEN': token                               
        }, 
        data: JSON.stringify({
            oerationName: operationName, //'getRecordList', 
            query: query,
            variables: variables 
        }) 
    }).done(function() { 
        console.log(r.responseText) 
        var response = $.parseJSON(r.responseText); 
        let records = response.data.getRecordList.records; 

        let dropdown = $('#status'); 
        dropdown.empty();                
        dropdown.prop('selectedIndex', 0);

        totalmsg = totalmsg + '<table><tr><td>Your API Token</td><td colspan=2>' + token +'</td></tr><tr><td colspan=3>&nbsp;</td></tr>';
        totalmsg = totalmsg + '<tr colspan=3><td>User List From GraphQL API</td></tr>';
        totalmsg = totalmsg + '<tr><td>Key</td><td>ID</td><td>Name</td></tr>';

        $.each(records, function(key, entry) {

        totalmsg = totalmsg + '<tr><td>' + key + '</td><td>' + entry.attributes.id + '</td><td>' + entry.attributes.name + '</td></tr>';

        })

totalmsg = totalmsg + '</table>';
document.getElementById('ApiDisplay02').innerHTML = totalmsg;

    });               



}
</script>





<body>
<h2>API Demo Page</h2>
<br />
<br />
<div class="newbtn" onclick="getGraphData()" style="width: 110px; height: 45px; line-height: 45px; border-radius: 5px;"  id="showdata">Get User Data</div>
<br /><br/>
<div id="ApiDisplay02">Your API return data should appear here...</div>


</body>



</html>
1 Like