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://api.github.com/graphql"></zg-data>
</zing-grid>

Then, add the corresponding adapter.

<zing-grid>
  <zg-data src="https://api.github.com/graphql" adapter="graphql"></zg-data>
</zing-grid>

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

AttributeDescription
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.

Attributes

Refer to the following demo for an in depth look at using GraphQL with ZingGrid.

<zing-grid context-menu caption="Github Issues Demo" editor-controls>
  <zg-data src="https://api.github.com/graphql" adapter="graphql">
    <zg-param name="recordPath" value="data.repository.issues.edges"></zg-param>
    <zg-param name="nodePath" value="node"></zg-param>
    <zg-param name="headers" value='{"Authorization": "token 7b864f62dd5c3ae9b7cc1438f13398cd65ff71a5"}'></zg-param>
    <zg-param name="bodyMethodSuffix" value="Issues"></zg-param>
  </zg-data>
</zing-grid>
https://app.zingsoft.com/demos/embed/KX6I0N5B
https://app.zingsoft.com/demos/embed/KX6I0N5B
Top