Developer's Guide

Interface integration

Use API

In this guide, we will create a web interface that consumes and displays data from the DNFT submap. The goal is to provide a quick overview of the settings that you can extend to create your own user interface and analysis around DNFT data.

Many different libraries can be used to create interfaces and connections to the subgraph graph graphql endpoints, but in this guide, we will use React for the interface and Apollo Client to send queries. We will also use yarn for dependency management.

Setup and installation

We need to create a basic skeleton for the application. We will use create-react-app for this. We will also add the dependencies we need. Navigate to the root location in the command line and run:

​

In the browser, you should see the default React application running. In a text editor, open App.js in src and replace the content with this peeled template. We add as we go.

Graphql client

We need to set up some middleware to make requests to the DNFT subgraph and receive data. For this, we will use Apollo and create a Graphql client to handle this problem.

Add the import shown in the figure below and instantiate a new client instance. Please note how we use the link to the DNFT subgraph here.

We also need to add a context so that Apollo can process the request correctly. Import the appropriate provider in the index.js file and wrap the root directory like this:

Write query

Next we will build our query and get the data. For this example, we will get some data about the Dai token on DNFT. We will get the current price and total liquidity of all pairs. In this query, we will use the ?? generation address as the ID. We will also get the USD price of ETH to help create USD conversions for Dai data.

First we need to define the query itself. We will use gql to parse the query string into the GraphQL AST standard. Import the gql assistant into the application and use it to create queries. Add the following to your App.js file:

​