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>
https://app.zingsoft.com/demos/embed/KX6I0N5B
https://app.zingsoft.com/demos/embed/KX6I0N5B
Top

[data: GraphQL]