Add js examples in ocean subgraph section (#1100)

* GitBook: [#1] No subject

* GitBook: [#2] Minor fix

building-with-ocean/using-ocean-subgraph/get-data-nft-information.md

@@ -6,6 +6,8 @@ The result of following GraphQL query returns the information about a particular
 Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph/graphql) to fetch the results from the mainnet. For other networks use [this table](./#ocean-subgraph-graphiql).
 {% endhint %}
 
+#### Query
+
 ```graphql
 {
   nft (id:"0x1c161d721e6d99f58d47f709cdc77025056c544c", subgraphError:deny){
@@ -29,13 +31,17 @@ Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprot
     template
     orderCount
  }
-}b
+}
 ```
 
-The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed. Change the value of the variable dataNFT\_address with the address of the datatoken of your choice.
+#### Code
 
 {% tabs %}
 {% tab title="Python" %}
+The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed. Change the value of the variable dataNFT\_address with the address of the datatoken of your choice.
+
+#### Create script
+
 {% code title="dataNFT_information.py" %}
 ```python
 import requests
@@ -85,12 +91,77 @@ print(json.dumps(result, indent=4, sort_keys=True))
 
 **Execute script**
 
+<pre class="language-bash"><code class="lang-bash"><strong>python dataNFT_information.py</strong></code></pre>
+{% endtab %}
+
+{% tab title="Javascript" %}
+The javascript below can be used to run the the query. If you wish to change the network, then replace the value of variable `baseUrl` as needed. Change the value of the variable `datanftAddress` with the address of the datatoken of your choice.
+
+#### Create script
+
+{% code title="dataNFTInfo.js" %}
+```javascript
+var axios = require('axios');
+
+const datanftAddress = "0x1c161d721e6d99f58d47f709cdc77025056c544c";
+
+const query = `{
+  nft (id:"${datanftAddress}", subgraphError:deny){
+    id
+    name
+    symbol
+    owner
+    address
+    assetState
+    tx
+    block
+    transferable
+    creator
+    createdTimestamp
+    providerUrl
+    managerRole
+    erc20DeployerRole
+    storeUpdateRole
+    metadataRole
+    tokenUri
+    template
+    orderCount
+ }
+}`
+
+const baseUrl = "https://v4.subgraph.mainnet.oceanprotocol.com"
+const route = "/subgraphs/name/oceanprotocol/ocean-subgraph"
+
+const url = `${baseUrl}${route}`
+
+var config = {
+  method: 'post',
+  url: url,
+  headers: { "Content-Type": "application/json" },
+  data: JSON.stringify({ "query": query })
+};
+
+axios(config)
+  .then(function (response) {
+    console.log(JSON.stringify(response.data));
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+
 ```
-python dataNFT_information.py
+{% endcode %}
+
+#### Execute script
+
+```bash
+node dataNFTInfo.js
 ```
 {% endtab %}
 {% endtabs %}
 
+#### Response
+
 <details>
 
 <summary>Sample response</summary>

building-with-ocean/using-ocean-subgraph/get-datatoken-information.md

@@ -1,12 +1,13 @@
+# Get datatoken information
 
-# Get Datatoken Information
-
-The result of following GraphQL query returns the information about a particular datatoken. Here, `0x122d10d543bc600967b4db0f45f80cb1ddee43eb` is the address of the datatoken.  
+The result of following GraphQL query returns the information about a particular datatoken. Here, `0x122d10d543bc600967b4db0f45f80cb1ddee43eb` is the address of the datatoken.
 
 {% hint style="info" %}
 Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph/graphql) to fetch the results from the mainnet. For other networks use [this table](./#ocean-subgraph-graphiql).
 {% endhint %}
 
+#### Query
+
 ```graphql
 {
   token(id:"0x122d10d543bc600967b4db0f45f80cb1ddee43eb", subgraphError: deny){
@@ -45,10 +46,12 @@ Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprot
 }
 ```
 
-The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed. Change the value of the variable `datatoken_address` with the address of the datatoken of your choice.
+#### Code
 
 {% tabs %}
 {% tab title="Python" %}
+The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed. Change the value of the variable `datatoken_address` with the address of the datatoken of your choice.
+
 **Create script**
 
 {% code title="datatoken_information.py" %}
@@ -112,12 +115,89 @@ print(json.dumps(result, indent=4, sort_keys=True))
 
 **Execute script**
 
+<pre class="language-bash"><code class="lang-bash"><strong>python datatoken_information.py</strong></code></pre>
+{% endtab %}
+
+{% tab title="Javascript" %}
+The javascript below can be used to run the the query. If you wish to change the network, then replace the value of variable `baseUrl` as needed. Change the value of the variable `datatokenAddress` with the address of the datatoken of your choice.
+
+**Create script**
+
+{% code title="datatokenInfo.js" %}
+```javascript
+var axios = require('axios');
+
+const datatokenAddress = "0x122d10d543bc600967b4db0f45f80cb1ddee43eb";
+
+const query = `{
+  token(id:"${datatokenAddress}", subgraphError: deny){
+    id
+    symbol
+    nft {
+      name
+      symbol
+      address
+    }
+    name
+    symbol
+    cap
+    isDatatoken
+    holderCount
+    orderCount
+    orders(skip:0,first:1){
+      amount
+      serviceIndex
+      payer {
+        id
+      }
+      consumer{
+        id
+      }
+      estimatedUSDValue
+      lastPriceToken
+      lastPriceValue
+    }
+  }
+  fixedRateExchanges(subgraphError:deny){
+    id
+    price
+    active
+  }
+}`
+
+const baseUrl = "https://v4.subgraph.mainnet.oceanprotocol.com"
+const route = "/subgraphs/name/oceanprotocol/ocean-subgraph"
+
+const url = `${baseUrl}${route}`
+
+var config = {
+  method: 'post',
+  url: url,
+  headers: { "Content-Type": "application/json" },
+  data: JSON.stringify({ "query": query })
+};
+
+axios(config)
+  .then(function (response) {
+    console.log(JSON.stringify(response.data));
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+
 ```
-python datatoken_information.py
+{% endcode %}
+
+**Execute script**
+
+```bash
+node datatokenInfo.js
 ```
 {% endtab %}
 {% endtabs %}
 
+#### Response
+
 <details>
 
 <summary>Sample response</summary>

building-with-ocean/using-ocean-subgraph/list-data-nfts.md

@@ -6,6 +6,8 @@ The result of following GraphQL query returns the information about data nfts.
 Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph/graphql) to fetch the results from the mainnet. For other networks use [this table](./#ocean-subgraph-graphiql).
 {% endhint %}
 
+#### Query
+
 ```graphql
 {
   nfts (skip:0, first: 10, subgraphError:deny){
@@ -22,10 +24,14 @@ Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprot
 }
 ```
 
-The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed.
+#### Code snippets
 
 {% tabs %}
 {% tab title="Python" %}
+The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed.
+
+#### Create script
+
 {% code title="list_dataNFTs.py" %}
 ```python
 import requests
@@ -68,8 +74,62 @@ print(json.dumps(result, indent=4, sort_keys=True))
 python list_dataNFTs.py
 ```
 {% endtab %}
+
+{% tab title="Javascript" %}
+The javascript below can be used to run the the query. If you wish to change the network, then replace the value of variable `baseUrl` as needed.
+
+#### Create script
+
+{% code title="listDatatoken.js" %}
+```javascript
+var axios = require('axios');
+
+const query = `{
+    nfts (skip:0, first: 10, subgraphError:deny){
+      id
+      name
+      symbol
+      owner
+      address
+      assetState
+      tx
+      block
+      transferable
+   }
+}`
+
+const baseUrl = "https://v4.subgraph.mainnet.oceanprotocol.com"
+const route = "/subgraphs/name/oceanprotocol/ocean-subgraph"
+
+const url = `${baseUrl}${route}`
+
+var config = {
+    method: 'post',
+    url: url,
+    headers: { "Content-Type": "application/json" },
+    data: JSON.stringify({ "query": query })
+};
+
+axios(config)
+    .then(function (response) {
+        console.log(JSON.stringify(response.data));
+    })
+    .catch(function (error) {
+        console.log(error);
+    });
+```
+{% endcode %}
+
+#### Execute script
+
+```bash
+node listDatatoken.js
+```
+{% endtab %}
 {% endtabs %}
 
+#### Response
+
 <details>
 
 <summary>Sample response</summary>

building-with-ocean/using-ocean-subgraph/list-datatokens.md

@@ -6,6 +6,8 @@ The result of following GraphQL query returns the information about datatokens.
 Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph/graphql) to fetch the results from the mainnet. For other networks use [this table](./#ocean-subgraph-graphiql).
 {% endhint %}
 
+#### Query
+
 ```graphql
 {
   tokens(skip:0, first: 2, subgraphError: deny){
@@ -39,10 +41,12 @@ Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprot
 }
 ```
 
-The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed.
+#### Code
 
 {% tabs %}
 {% tab title="Python" %}
+The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed.
+
 **Create script**
 
 {% code title="list_all_tokens.py" %}
@@ -104,8 +108,79 @@ print(json.dumps(result, indent=4, sort_keys=True))
 python list_all_tokens.py
 ```
 {% endtab %}
+
+{% tab title="Javascript" %}
+The javascript below can be used to run the the query. If you wish to change the network, then replace the value of variable `baseUrl` as needed.
+
+#### Create script
+
+{% code title="listAllTokens.js" %}
+```javascript
+var axios = require('axios');
+
+const query = `{
+    tokens(skip:0, first: 2, subgraphError: deny){
+      id
+      symbol
+      nft {
+        name
+        symbol
+        address
+      }
+      name
+      symbol
+      cap
+      isDatatoken
+      holderCount
+      orderCount
+      orders(skip:0,first:1){
+        amount
+        serviceIndex
+        payer {
+          id
+        }
+        consumer{
+          id
+        }
+        estimatedUSDValue
+        lastPriceToken
+        lastPriceValue
+      }
+    }
+}`
+
+const baseUrl = "https://v4.subgraph.mainnet.oceanprotocol.com"
+const route = "/subgraphs/name/oceanprotocol/ocean-subgraph"
+
+const url = `${baseUrl}${route}`
+
+var config = {
+    method: 'post',
+    url: url,
+    headers: { "Content-Type": "application/json" },
+    data: JSON.stringify({ "query": query })
+};
+
+axios(config)
+    .then(function (response) {
+        console.log(JSON.stringify(response.data));
+    })
+    .catch(function (error) {
+        console.log(error);
+    });
+```
+{% endcode %}
+
+#### Execute script
+
+```bash
+node listAllTokens.js
+```
+{% endtab %}
 {% endtabs %}
 
+#### Response
+
 <details>
 
 <summary>Sample Response</summary>

building-with-ocean/using-ocean-subgraph/list-fixed-rate-exchanges.md

@@ -6,6 +6,8 @@ The result of following GraphQL query returns the information about the Fixed Ra
 Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph/graphql) to fetch the results from the mainnet. For other networks use [this table](./#ocean-subgraph-graphiql).
 {% endhint %}
 
+#### Query
+
 ```graphql
 {
   fixedRateExchanges(skip:0, first:2, subgraphError:deny){
@@ -42,10 +44,12 @@ Copy the query in the [GraphiQL interface](https://v4.subgraph.mainnet.oceanprot
 }
 ```
 
-The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed.
+#### Code
 
 {% tabs %}
 {% tab title="Python" %}
+The python script below can be used to run the the query. If you wish to change the network, then replace the value of variable `base_url` as needed.
+
 **Create script**
 
 {% code title="list_fixed_rate_exchanges.py" %}
@@ -56,7 +60,7 @@ import json
 
 query = """
 {
-	fixedRateExchanges(skip:0, first:2, subgraphError:deny){
+  fixedRateExchanges(skip:0, first:2, subgraphError:deny){
     id
     contract
     exchangeId
@@ -110,8 +114,82 @@ print(json.dumps(result, indent=4, sort_keys=True))
 python list_fixed_rate_exchanges.py
 ```
 {% endtab %}
+
+{% tab title="Javascript" %}
+The javascript below can be used to run the the query. If you wish to change the network, then replace the value of variable `baseUrl` as needed.
+
+#### Create script
+
+{% code title="listFRE.js" %}
+```javascript
+var axios = require('axios');
+
+const query = `{
+  fixedRateExchanges(skip:0, first:2, subgraphError:deny){
+    id
+    contract
+    exchangeId
+    owner{id}
+    datatoken{
+      id
+      name
+      symbol
+    }
+    price
+    datatokenBalance
+    active
+    totalSwapValue
+    swaps(skip:0, first:1){
+      tx
+      by {
+        id
+      }
+      baseTokenAmount
+      dataTokenAmount
+      createdTimestamp
+    }
+    updates(skip:0, first:1){
+      oldPrice
+      newPrice
+      newActive
+      createdTimestamp
+      tx
+    }
+  }
+}`
+
+const baseUrl = "https://v4.subgraph.mainnet.oceanprotocol.com"
+const route = "/subgraphs/name/oceanprotocol/ocean-subgraph"
+
+const url = `${baseUrl}${route}`
+
+var config = {
+  method: 'post',
+  url: url,
+  headers: { "Content-Type": "application/json" },
+  data: JSON.stringify({ "query": query })
+};
+
+axios(config)
+  .then(function (response) {
+    console.log(JSON.stringify(response.data));
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+```
+{% endcode %}
+
+#### Execute script
+
+```bash
+node listFRE.js
+```
+{% endtab %}
 {% endtabs %}
 
+#### Response
+
 <details>
 
 <summary>Sample response</summary>