---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
keyword: [Extend, Workday Graph API, Graph API, GraphQL]
nav: wcp_docs
parent_url: /wcp_docs/
title: Run Graph API Queries on a Page
layout: subsection
---

### Prerequisites

<a id="prereq_N10021_N1001E_N10001"></a>
-   For the queries you want to use in your Extend app, construct and test them in the Graph API Explorer.

    See [Graph API Queries](/wcp_docs/qxq1671067079349.html).

-   One or more PMDs where you'd like to run the Graph API query.
-   Security:

    -   <i>Workday Graph API Applications</i> domain in the System functional area.
    -   Security domains that control access to the business objects in the queries. The field descriptions in the Graph API schema documentation list the required security domains.



### Context

<a id="context_N10045_N1001E_N10001"></a>
To run a Graph API query from a view or edit page, call the Graph API endpoint as an inbound endpoint. Specify the POST method and the query in the `graphQuery` attribute of the endpoint.

You can specify the query either in:

-   An inline query in the PMD endpoint, or
-   A Graph Query component.


This procedure uses a Graph Query component. To see more examples of queries in Graph Query components, see [Sample Graph Query Components in PMDs](/wcp_docs/yvb1682352201818.html).

### Steps

1.  <a id="step_N10060_N1005D_N1001E_N10001"></a>Open the Extend app.
2.  <a id="step_N100C6_N100B9_N10068_N10001"></a>In the <b>Data</b> &gt; <b>Graph Queries</b> section, add a Graph Query component and enter a unique name.

    The Graph Query name must start with a letter, and must contain only letters, numbers, and underscores.

3.  <a id="step_N100DF_N100B9_N10068_N10001"></a>Modify the default values in the Graph Query component.

    For the example in this procedure, modify the default values as follows:

    ```
    {
    "id": "queryWorkers",
    "parameters": ["isActive", "limit", "offset"],
    "query": "
      query getWorkers ($dataSourceVariables: Worker_DataSources!, $limit: BigInt, $offset: BigInt) {
        worker(dataSource: $dataSourceVariables, limit: $limit, offset: $offset) {
          data {
            descriptor
            workdayID {id}
            businessTitle
          }
          total
        }
      }
    ",
    "variables": {
      "dataSourceVariables": {
          "indexedAllWorkers": {
              "filter": {
                  "indexedAllWorkersFilter": {
                      "isActive": "<% isActive %>"
                  }
              }
          }
      },
      "limit" : "<% limit %>",
      "offset" : "<% offset %>"
    }
    }
    ```

    <b>Note:</b> The sample <i>getWorkers</i> query accepts the `limit` and `offset` parameters. These parameters enable the Graph API endpoint for paginated data with a grid in the PMD.

4.  <a id="step_N10069_N1005D_N1001E_N10001"></a>In the AMD, add the Graph API endpoint to `dataProviders[]`.

    Example:

    ```
    {
    "key" : "workday-graph",
    "value" : "https://api.workday.com/graphql/v1"
    }
    ```

5.  <a id="step_N10169_N10079_N1003E_N10001"></a>In the PMD, add an endpoint to `endPoints[]` whose `baseUrlType` is the Graph API endpoint.

    Set the `httpMethod` attribute to `POST`.

    Example:

    ```
    "endPoints" : [ {
     "name" : "activeWorkers",
     "baseUrlType" : "workday-graph",
     "authType" : "sso",
     "httpMethod" : "POST",
     "failOnStatusCodes" : [ {
       "code" : 400
     } ]
    }
    ]
    ```

    <b>Note:</b>

    -   The Graph API endpoint requires the POST method. As an inbound endpoint, you must specify `"httpMethod" : "POST"`. Note that the PMD supports the POST method with the Graph API inbound endpoint.
    -   The endpoint doesn't include the `url` attribute because the `baseUrlType` value in the AMD specifies the full Graph API endpoint URL.

6.  <a id="step_N100DB_N10096_N10056_N10001"></a>Add the `graphQuery` attribute to the endpoint.

    Example:

    ```
    "endPoints" : [    
    {
    "name" : "activeWorkers",
    "baseUrlType" : "workday-graph",
    "authType" : "sso",
    "httpMethod" : "POST",
    "failOnStatusCodes" : [ {
      "code" : 400
    } ],
    "graphQuery" : {
      "queryId" : "queryWorkers",
      "parameters" : {
        "isActive" : true,
        "limit" : "<% empty pagingVariables.limit ? 50 : pagingVariables.limit.toInt() %>",
        "offset" : "<% empty pagingVariables.offset ? 0 : pagingVariables.offset.toInt() %>"
      }
    }  
    }
    ]
    ```

    The sample <i>activeWorkers</i> endpoint passes the `isActive`, `limit`, and `offset` parameters to the Graph Query component.

    <b>Note:</b>

    -   The `limit` and `offset` query parameters use `pagingVariables`, which specify the paginated endpoint parameters in conjunction with the `pagingInfo` attribute for grid paging.
    -   In the example, we initially set the `pagingVariables.limit` to 50 and `pagingVariables.offset` to 0. When the user scrolls down the grid, it automatically sets the `pagingVariables.limit` and `pagingVariables.offset` values for the next page of data.

        During subsequent requests for paginated data, the query filter arguments must remain the same. If the query filter changes in subsequent requests, the query returns an error because it expects you to reset the offset. Be cautious when you use query filter values from the `onLoad` event because they can be different when the paginated Graph endpoint initially executes.

    -   Because the `pagingVariables.limit` and `pagingVariables.offset` are strings, we need to convert them to integer to match the `BigInt` type of the `limit` and `offset` variables, respectively.

    For details about the `pagingInfo` attribute for grid paging, see "Grid paging with paginated endpoints" in [Concept: grid](/wcp_docs/tgx1652476064414.html).

7.  <a id="step_N10180_N10090_N10056_N10001"></a>Display the results on a page widget, as appropriate.

    The Graph API endpoint returns the response data in a `data.rootQueryField` map, where <i>rootQueryField</i> is the name of the top-level query field in the schema.

    Example: For the `worker` query, the endpoint returns a `data.worker` map. The sample `worker` query returns the data fields in `data.worker.data[]`. The query also returns the `total` field in `data.worker.total`.

8.  <a id="step_N10145_N1005D_N1001E_N10001"></a>Deploy and test the app on the tenant.


### Example

This sample PMD calls a query in a Graph Query component to display the total in a `text` widget and the active workers in a `grid`.

```
{
"id": "displayWorkers",
"endPoints": [
{
 "httpMethod": "POST",
 "name": "activeWorkers",
 "baseUrlType": "workday-graph",
 "authType": "sso",
 "failOnStatusCodes": [
   {
     "code": 400
   }
 ],
 "graphQuery": {
   "queryId": "queryWorkers",
   "parameters": {
     "isActive": true,
     "limit": "<% empty pagingVariables.limit ? 50 : pagingVariables.limit.toInt() %>",
     "offset": "<% empty pagingVariables.offset ? 0 : pagingVariables.offset.toInt() %>"
   }
 }
}
],
"presentation": {
"title": {
 "type": "title",
 "label": "Graph API Query Results: Active Workers"
},
"body": {
 "type": "section",
 "horizontal": false,
 "children": [
   {
     "type": "text",
     "label": "Total number of active workers:",
     "value": "<% activeWorkers.data.worker.total %>"
   },
   {
     "type": "grid",
     "label": "Active Workers",
     "id": "workersGrid",
     "rows": "<% activeWorkers.data.worker.data %>",
     "rowVariableName": "thisRow",
     "pagingInfo": {
       "endPoint": "<% endpoints.activeWorkers %>",
       "rowCount": "<% activeWorkers.data.worker.total %>",
       "data": "<% activeWorkers.data.worker.data %>"
     },
     "columns": [
       {
         "type": "column",
         "columnId": "col1",
         "label": "Worker",
         "cellTemplate": {
           "type": "text",
           "value": "<% thisRow.descriptor %>"
         }
       },
       {
         "type": "column",
         "columnId": "col2",
         "label": "Business Title",
         "cellTemplate": {
           "type": "text",
           "value": "<% thisRow.businessTitle %>"
         }
       }
     ]
   }
 ]
}
}
}
```

### Related Information

[Generate Queries on Graph API Explorer](/wcp_docs/uip1679531855079.html)