Sample React Application
Learn how to use the GraphQL API to retrieve, filter and subscribe to on-chain data
Sample GraphQL app We have created a sample GraphQL app that helps you retrieve, filter from and subscribe to on-chain data. You can fork the repo here - https://github.com/concise-labs/sample-graphql-app
Using Apollo Client for fetching/subscribing to data In our repo above, we use Apollo client for interacting with GraphQL API. With Apollo Client, you can fetch data from GraphQL API easily. Please follow this simple tutorial to help you get started - https://www.apollographql.com/docs/react/get-started#step-3-initialize-apolloclient
Retrieve data From the sample application repo above, you can find DisplayAllData inside App.js here. This example will help you retrieve all data from the graphQL API.
Retrieve filtered data From the sample application repo above, you can find DisplayVariableData inside App.js here. This example will help you retrieve filtered data based on a variable you pass to the graphQL API.
Subscribe to on-chain data updates From the sample application repo above, you can find DisplaySubscriptionData inside App.js here. This example will help you subscribe to data updates based on your query.
It is recommended to use subscriptions for the following:
Small, incremental changes to large objects. Repeatedly polling for a large object is expensive, especially when most of the object's fields rarely change. Instead, you can fetch the object's initial state with a query, and your server can proactively push updates to individual fields as they occur.
Low-latency, real-time updates. For example, a chat application's client wants to receive new messages as soon as they're available.
More about GraphQL subscriptions and how to use it via Apollo client here.
Last updated