Welcome to the third and final part of the Celo Spark Graph mini-series. We will learn how to read the subgraph we created earlier and integrate it into a React application. Let’s get started!
Before we begin, make sure you have a React application set up and running locally. If you haven’t done so, follow the necessary steps to install the dependencies. Once you have everything set up, we can move on to the next step.
In your React application, open the
app.tsx file. Here, we will create a provider to read data from our subgraph in our application. We have a few options for GraphQL client libraries, such as Apollo, Relay, and Urql. For this tutorial, we will be using Urql due to its lightweight nature. To install Urql, run the following command:
yarn add urql graphql
Next, obtain the API URL from the Graph Studio and create a client for it. Wrap your application with the
UrqlProvider and pass the client we just defined. This will allow us to access the data from the subgraph within our application.
Moving on to the
index.tsx file, let’s define a couple of hooks using
useState and a function to navigate between our queries and NFTs. Additionally, define the graph query and the parameters we will provide. To determine the variables you want to query for your subgraph, go to the Graph Studio and select the desired variables.
After defining the query and parameters, let’s proceed to query the subgraph and add conditions for handling different query states. We will also define how we want to render the data obtained from the subgraph using a map.
Make sure to check the local host to ensure that the NFT metadata is being displayed correctly.
Finally, we will add a new section beneath the ordered list to allow navigation forward and backward. This section will use a couple of icons, so let’s install the respective library. Once installed, you can run your project again, and the navigation options should be available.
Congratulations! You have successfully completed the Celo Spark Graph mini-series. In this series, we created a smart contract with its respective subgraph and developed a React application that reads and displays the data from the subgraph.
Thank you for following along, and stay tuned for the next tutorial.
See you in the next one!