This guide will go through a simple example to create a web interface, as well as fetch and display data from KyberSwap Subgraph. For the purpose of this guide, we'll be using
To get started, navigate to the root location in your terminal and run:
Next, add the required dependencies.
Once you run this on the command line, you should see the default React app running on your browser. Open
src -> App.js in a text editor(VStudio/ATOM) and replace the contents with the script below.
Now, we have the skeleton ready, let's add on some flesh and body to it!
In order to make requests to the KyberSwap subgraph and fetch data, we’ll have to set up a middleware using Apollo to create a graphql client.
To do so, in the
App.js file, import and instantiate a new client instance, as shown below:
For Apollo, to be able to handle requests, import providers and wrap the root in it. Which means, we will have to add content to
index.js as below:
For this example, let’s fetch some data about the KNC token on KyberSwap, like the current price, and total liquidity across all pools. You can check out the Entities for all the fields and descriptions about each. Import
gql into app.js to parse a query string into the GraphQL AST standard.
- Fetch data
Now that we have the query ready, plugin
useQuery hook which uses our client instance to fetch data.
Each query will return an object. We will have to parse the object to retrieve the data we need. The returned object will be an array of results. Since we are looking at a single entity,
0 will be the array index. To parse the responses, add the following to
Finally, we can use the parsed response data to populate onto the UI. Add the following to the return function of
App.js file should look something like this:
This is a basic example which fetches and displays 2 values about KNC token from the KyberSwap subgraph. There’s a lot more to explore to build complex interesting tools! We'd be happy to see you build on top of this.