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:

  <zg-data src=""></zg-data>

Then, add the corresponding adapter.

  <zg-data src="" adapter="graphql"></zg-data>

Once the adapter is added, you can add the following <zg-param>s:

srcThe base URL for the request.
adapterShortcut 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.
recordPathSpecifies the path to the JSON data returned from the src.
nodePathSpecifies the path of the JSON object within the array.
headersHeaders to add to request. Below, we send in an authorization header which is required to access the data from the src.
bodyMethodSuffixSets 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.


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="" adapter="graphql">
    <zg-param name="recordPath" value="data.countries"></zg-param>
    <zg-param name="readBody" value="getContinents"></zg-param>

[data: GraphQL]