In this guide we will create a web interface that consumes and displays data from the Pegasys Subgraph. The goal is to provide a quick overview of a setup that you can extend to create your own UIs and analytics around Pegasys data.
Many different libraries can be used to create an interface and a connection to the subgraph graphql endpoint, but in this guide we will use React for the interface, and Apollo Client for sending queries. We'll also be using yarn for dependency management.
We'll need to create the basic skeleton for the application. We'll use create-react-app for this. We'll also add the dependencies we need. Navigate to your root location in your command line and run:
In your browser you should see the default React app running. In a text editor open
src and replace the contents with this stripped down boilerplate. We'll add to this as we go.
We need to set up some middleware in order to make requests to the Pegasys subgraph and receive data. To do this we'll use Apollo and create a graphql client to handle this.
- Add the imports shown below and instantiate a new client instance. Notice how we use the link to the Pegasys subgraph here.
- We also need to add a context so that Apollo can handle requests properly. In your
index.jsfile import the proper provider and wrap the root in it like this:
Next we'll construct our query and fetch data. For this example we will fetch some data about the Dai token on Pegasys. We'll get the current price, and total liquidity across all pairs. We'll be using the Dai address as an id in this query. We'll also fetch the USD price of SYS to help create USD conversion for Dai data.
- First we need to define the query itself. We'll use
gqlto parse a query string into the GraphQL AST standard. Import the
gqlhelper into the app and use it to create the query. Add the following to your
We use an id of
1 for the bundle because there is only one hardcoded bundle in the subgraph.
Now we're ready to use these queries to fetch data from the Pegasys subgraph. To do this we can use the
useQuery hook which uses our client instance to fetch data, and gives us live info about the status of the request. To do this add the following to your
Notice we're using the Dai token address to fetch data about Dai.
Now that we have our data we can format it and display it in the UI. First, we parse the return data to get the actual data that we want. Then we'll use it to get the USD price of Dai. Lastly we'll insert this data into the UI itself.
These queries will return an response object for each query. Within each one we're interested in the root field we defined in the query definition. For the
daiData response we defined this as
tokens, and for the
sysPriceData query we defined this as
sysPrice. Within each one we'll get an array of results. Because we're only querying for single entities we'll reference the
0 index in the data array.
Add the following lines to your
App.js file to parse the responses:
Finally we can use our parsed response data to hydrate the UI. We'll do this in two steps.
First we'll create loading states. To detect if a query is still pending a response we can reference the loading variables we've already defined. We'll add two loading states, one for the Dai price, and one for the Dai total liquidity. These may flicker fast because the time to query is fast.
Populate with loaded data. Once we detect that the queries have finished loading we can populate the UI with the real data.
To do this add the following lines in the return function of your
This should render a very basic page with these two stats about the Dai token within Pegasys. This is a very basic example of what you can do with the Pegasys subgraph and we encourage you to build out more complex and interesting tools!
In the end your
App.js file should look like this: