Retrieving Data from GraphQL
In this guide, we'll walk you through how to retrieve data from GraphQL and incorporate it in your grid.
Connecting to GraphQL
If you want to populate your grid using data stored in GraphQL, then you just need to set the src attribute to the GraphQL URL that includes the path to the data, like so:
<zing-grid> <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/zinggrid-graphql-repo"></zg-data> </zing-grid>
Then, add the corresponding adapter.
<zing-grid> <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/zinggrid-graphql-repo" adapter="graphql"></zg-data> </zing-grid>
Once the adapter is added, you can add the following <zg-param>s:
| Attribute | Description |
|---|---|
| src | The base URL for the request. |
| adapter | Shortcut to set options for third party dataset. For graphQL, the following are set:restmode: Set to "manual" to turn off traditional REST URL construction and method setting (for custom REST configuration). method: Overwrite the request type for actions. GraphQL only accepts GET or POST requests. |
| recordPath | Specifies the path to the JSON data returned from the src. |
| nodePath | Specifies the path of the JSON object within the array. |
| headers | Headers to add to request. Below, we send in an authorization header which is required to access the data from the src. |
| bodyMethodSuffix | Sets the suffix for the function names that will construct the body for the requests. Below, all the functions that end in 'Issues' will serve as the request body for the different request type actions. |
Refer to the below demos to see these in action.
Top
Attributes
Refer to the following demo for an in depth look at using GraphQL with ZingGrid.
<zing-grid caption="GraphQL Demo" pager page-size="10" sort filter> <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/zinggrid-graphql-countries" adapter="graphql"> <zg-param name="recordPath" value="data.countries"></zg-param> <zg-param name="readBody" value="getContinents"></zg-param> </zg-data> </zing-grid>
Top
[data: GraphQL]