Building components that handle historical blockchain data require dedicated solutions that manage the data and reduce the latency of requests, as it’s not possible to scan the whole blockchain when a user makes a request.
A simple solution for developers building on NEAR BOS is using QueryAPI, a fully managed solution to build indexer functions, extract on-chain data, store it in a database, and be able to query it using GraphQL endpoints.
QueryAPI
- :::tip
- Learn more about QueryAPI in this QueryAPI Overview article.
- ::
Tutorials
For a technical implementation deep-dive, check these QueryAPI tutorials:
- Posts Indexer tutorial: this indexer creates a new row in a pre-defined database for every new BOS post found on the blockchain.
- Hype Indexer tutorial: this indexer creates a new row in a pre-defined database for every new BOS post or comment found on the blockchain that contains either
PEPE
orDOGE
in the contents. - BOS Feed Indexer tutorial: this indexer keeps track of new posts, comments, and likes on BOS, so a social feed can be rendered quickly.
GraphQL queries
Using QueryAPI’s GraphiQL tab, you can access the GraphiQL Explorer that provides a user friendly GraphQL playground, where you can view and create queries and mutations based on the DB schema that you defined for the indexer.
You can easily set some fields and select the returning data
that you want, and the tool will build a query on the mutation panel on the right.
Then you can copy the resulting query, either in your JavaScript code so that you pass actual
data manually, or you pass in the mutation data object as a second parameter.
For example, if you go and add a new mutation, click +, then you can do a bunch of actions here, such as creating, deleting, or inserting posts into your table.
- If you want to test your mutation, using Debug Mode you can add a specific
- block to the list, and then play it to see how it works.
- Based on the indexer logic you defined, you’ll get a call to the GraphQL mutation with the object
- and data passed into it.
-
::tip Video Walkthrough
- Tip: watch the video on how to create mutations in GraphQL.
-
::
Generate a BOS component using Playground
Creating a BOS component from a GraphQL query is simple when using QueryAPI’s GraphQL Playground. Just follow these steps:
- go to the GraphiQL tab
- select the query that you want to use
- click on the Show GraphiQL Code Exporter button
- get some default code here, copy it,
- go to the BOS sandbox, paste it.
This will set up some boilerplate code to execute the GraphQL query, add the query that you had
in your playground and then call that query, extract the data and render it using the
render data function.
Once you have the BOS component code, you can test it out by going to the sandbox,
pasting the generated code, and then selecting Component Preview.
Next, you can create a nice UI over this boilerplate code, and publish your new BOS component.
Component Examples
- Activity Feed widget running on near.org