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!
Installing Dependencies
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.
Creating a Provider for Reading Data
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:
bashCopy code
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.
Defining Hooks and Query Parameters
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.
Querying and Rendering Data
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.
Adding Navigation Options
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!