GraphQL apis for browser based automation

[Ilan.Krayn]

This is a first draft of the integrating of Harness API to browser-based applications. We expect this to eventually be moved to the Harness docs.

---

The api url and payload is as follows -

https://app.harness.io/gateway/api/graphql-api?accountId=<>

Please make sure the <<account-id>> is replaced.

Query params

key	value
accountId	<>

Header

The headers must be empty. The browser figures out the content-type looking at the payload.

Also if we have any option like withCredentials it should be set as false.

Body

Body should be key-value pairs. The keys expected are x-api-key and query. The body should be made up of form-data.

key	value
query	<>
x-api-key	<>

The <> is a well formed JSON for graphQL query/mutation ( an example is {“query”:“query{\n applications(limit:10){\n nodes{\n name\n }\n }\n}”,“variables”:null} ) and <> is the api key.

The following section describes how to extract the query from api-explorer.

Get query from graphql api-explorer

The query string/JSON can be copied from network tab while executing an API in harness API explorer under the request payload section and clicking on view source as shown in example below.

XHRRequest

To make a XHR request a sample payload looks like as shown in example below. User has to replace<>, <> and <> with the well formed json query, api key and account id respectively.

var data = new FormData();
data.append("query", "<<query>>");
data.append("x-api-key", "<<api-key>>");

var xhr = new XMLHttpRequest();
xhr.withCredentials = false;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://app.harness.io/gateway/api/graphql-api?accountId=<<account-id>>");
xhr.send(data);

Example of an application query extracted from browser:

{“query”:“query{\n applications(limit:10){\n nodes{\n name\n }\n }\n}”,“variables”:null}”

For api-key - xyzsfsdfs323asdfsfgv and account-id - xyz2falklouilk and query as above the final XHR will be-
var data = new FormData();
data.append(“query”, “query{\n applications(limit:10){\n nodes{\n name\n }\n }\n}”,“variables”:null}");
data.append(“x-api-key”, “xyzsfsdfs323asdfsfgv”);

    var xhr = new XMLHttpRequest();
    xhr.withCredentials = false;

    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === 4) {
        console.log(this.responseText);
      }
    });

    xhr.open("POST", "https://app.harness.io/gateway/api/graphql-api?accountId=xyz2falklouilk");
    xhr.send(data);

Postman

To get things done procedurally in POSTMAN the steps are -

1. Set request type as POST.
2. Set request url as https://app.harness.io/gateway/api/graphql-api?accountId=<> where <> is account id of the user.
3. In Body tab of postman select form-data and set key as query and its value as well formed JSON object which has GraphQL query.
4. Add x-api-key as one more key in Body and set its value as the API key.
5. Make sure you don’t have in anything in Headers tab.
6. You can click on Code button and get code in different languages for the request.

Things on postman will look like

=image-20200320-080459.png&size=311978&width=1806&height=1280)

#Harness #GraphQL