Learn how to index data from NEAR using The Graph

The Graph + NEAR

Learn to build on The Graph with Figment Learn

The Graph 101

The Graph is a search engine API for blockchains. It solves the problem of analyzing on chain data by indexing it off chain, through a distributed network of actors. Developers, Indexers and Curators are coordinated & incentivized through the GRT utility token, in a system designed to guarantee honest and reliable data for dApp developers to build with.

The Graph

< 1 hour

1 hour

Beginner

Intermediate

AssemblyScript

Graphql

JS/TS

Solidity

EVM compatibility

React

Smart contracts

GraphQL

Javascript

Hardhat

Next.js

Tools & Infra

Time Commitment

Difficulty

Programming Language

Feature

Technology

We no longer host the Pathway pages on this website, the content has moved to the `learn-web3-dapp` repository at <https://github.com/figment-networks/learn-web3-dapp#-get-started>.

The workflow for Pathways is easy to follow:

- Using the `learn-web3-dapp` code repository, you will be running a local development server (`yarn dev`)
- Each Pathway is accessible from the main page displayed when the development server is running
- Once you begin a Pathway, your completion progress is saved in the local storage of your web browser
- Each Pathway has a similar goal: To guide you through using various code libraries to work with different parts of the web3 stack
- Many of the individual steps of a Pathway provide you with coding challenges, so that you can learn by doing
- You will need to complete the code as explained in the instructions before moving on to the next step
- All of the coding challenges have solutions which are blurred until you click on them, to prevent you from being stuck
- Once you have completed a Pathway, you should have a working knowledge of that protocol which will help you tackle larger projects

For less experienced developers or for anybody who wants to dive in without needing to set up a development environment, **[we recommend using Gitpod](https://gitpod.io/#https://github.com/figment-networks/learn-web3-dapp)** to work with the `learn-web3-dapp` project (this requires you to have a GitHub account to sign in). Gitpod can save you a considerable amount of time, as you don't have to install dependencies or set up any software - everything just works! Gitpod provides you with a fully functional Visual Studio Code editor running in your browser, so you can jump right in. This is what it looks like: 

![Gitpod UI](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/gitpod-firstlook.png?raw=true)

If you are an experienced developer, or if you prefer to use a different code editor, [cloning the repo locally](https://github.com/figment-networks/learn-web3-dapp#-clone-locally) is still possible, however you might encounter various system configuration issues depending on how your local environment is set up. It will be more difficult to develop on a Windows system than on Linux or MacOS, and there are also some known issues with developing Solana programs on Windows. It is strongly recommended to use the [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/install#manual-installation-steps) (WSL) if you are running Windows 10. 

If you are cloning the repo locally, a minimum of **NodeJS version 14.17 is required**. Some of the Pathways will require use of the [Rust toolchain](https://rustup.rs/). If you are developing on Linux, you will want to make sure you have the [build-essential](https://itsfoss.com/build-essential-ubuntu/) package installed, as the `cc` linker is required for compiling Solana programs.

Introduction

# Introduction
This tutorial is built to help non-technical people get a sense of how to interact with TheGraph and connect on-chain data into Google Sheets. I've been working on gathering crypto data in Google Sheets for a couple of years now and I found that sheets is a useful interface when filtering for new listed pairs on decentralized exchanges. In this tutorial you'll **learn how to find a UniswapV3 subgraph on The Graph, make a GraphQL request, translate the query in Javascript (Google Sheet's programming language) using Postman, and finally retrieve the pairs in the Sheet with a user-defined formula.**

![UNISWAP](https://github.com/figment-networks/learn-tutorials/raw/master/assets/UNISWAP.gif)

# Prerequisites
For beginners with basic coding skills. This training assumes that you have a Gmail/Google account as we will be building upon Google Sheets. Also it would help if you have access to Postman to get an easier view on how to test a GraphQL request from TheGraph and transform it into Javascript code which is  the Official programming language of Google Sheet . 

* **GraphQL & Javascript knowledge are a plus.** Code can be written directly with the help of Postman and The Graph's website.
* **Postman's** software makes API development easier.
* Code :
  * uniswap.gs - for retrieving Uniswap's latest pair through The Graph API (later explained in the tutorial)
  * importJson.gs - for working with JSON objects in Google Sheets (later explained in the tutorial)


# First, what is Uniswap?
[Uniswap](https://academy.binance.com/en/articles/what-is-uniswap-and-how-does-it-work) is a **decentralized exchange protocol built on Ethereum.** To be more precise, it is an automated liquidity protocol. There is no order book or any centralized party required to make trades. Uniswap allows users to trade without intermediaries, with a high degree of decentralization and censorship-resistance.

This is how Uniswap’s Decentralized Exchange looks like:
![UNISWAPEXCHANGE](https://github.com/figment-networks/learn-tutorials/raw/master/assets/Uniswap_exchange.gif)
    

# Getting familiar with TheGraph and GraphQL
[The Graph](https://graphql.org/) is a **decentralized protocol for indexing and querying data** from blockchains. It is able to query networks like Ethereum and since Uniswap is built on Ethereum, it will allow us to get its on-chain data. 
 
## Finding the Uniswap V3 subgraph on The Graph
In this tutorial, we will be focusing on getting blockchain data on Version 3 of Uniswap. All you need to do is to search in TheGraph's explorer bar for Uniswap V3. The following picture shows you what TheGraph looks like and which subgraph we will be using:

* https://thegraph.com/legacy-explorer/subgraph/uniswap/uniswap-v3

![UNISWAPv3SUBGRAPH](https://github.com/figment-networks/learn-tutorials/raw/master/assets/uniswapv3-subgraph.gif)

## Building the GraphQL query
[GraphQL](https://en.wikipedia.org/wiki/GraphQL) is an **open-source data query and manipulation language for APIs,** and a runtime for fulfilling queries with existing data. GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015. 

On The Graph interface in playgroud mode, there is an example of a GraphQL query. This query gets the first 5 factories with id, poolCount, txCount and totalVolumeUSD, as well as the first 5 bundles with their id and ethPriceUSD.

![PLAYGROUND](https://github.com/figment-networks/learn-tutorials/raw/master/assets/playground.gif)

For our purpose, we will just need to adjust a little the query to request pool pairs. We will be interested in filtering by constraints on the Number of Days the coin is active, the Volume ($), the Liquidity ($), and the number of Transactions. When you look at the pool parameters, you will find the following correspondence needed to build our constraints:
* Number of Days -> createdAtTimestamp
* Volume ($) -> volumeUSD
* Liquidity ($) -> totalValueLockedUSD
* Number of Transactions -> txCount

Now instead of using the standard (first:5) clause, we will need to build our GraphQL constraint there with the above variables. In order to do that we need to **build a "where" clause** where we tell the matching engine that we are looking for pool pairs created after a certain date (timestamp), with liquidity, volumes and number of transactions all greater than the amounts defined by the user. 

In GraphQL to signal you need an amount **greater than,** you need to add ___gte__ at the end of your variable.

This is an example of how the constraint clause will look with theoretical values:
```graphql
where: {
      volumeUSD_gte:20000
      totalValueLockedUSD_gte:30000
      txCount_gte:100
      createdAtTimestamp_gte: 1625575864
    } 
```

Subsequently in order to create the rest of the query, you need to display the symbols of the pair's tokens, prices, id (contract address), volume, liquidity, number of transactions and timestamp.

This is how the final graphQL query looks:
```graphql
query{
  pools( where: {
      volumeUSD_gte:20000
      totalValueLockedUSD_gte: 30000
      txCount_gte:100
      createdAtTimestamp_gte: 1625575864
    } 
  ) {
    token0 {
      symbol
    }
    token0Price
    token1 {
      symbol
    }
    token1Price
    id
    volumeUSD
    createdAtTimestamp
    totalValueLockedUSD
    txCount
  }}
```
You can replace the example query with this new query and press play in the playground. You should see the results.

![PLAYGROUNDCONSTRAINTS](https://github.com/figment-networks/learn-tutorials/raw/master/assets/PLAYGROUNDCONSTRAINTS.png)

## Testing model and translating the query into javascript using Postman

* [Download Postman](https://www.postman.com/downloads/)

Once you download Postman, you can open a new window like shown below:

![POSTMANCLEAN](https://github.com/figment-networks/learn-tutorials/raw/master/assets/postmanempty.png)

To get the data in Postman, you will need to:
1. Insert in the URL box the HTTP Query url from the Uniswap V3 subgraph (https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3)
2. Change the GET into a POST request
3. Copy/paste the above GraphQL query in Body and select GraphQL
4. Click Send

You should get the same JSON table as on TheGraph.

![POSTMANQUERY](https://github.com/figment-networks/learn-tutorials/raw/master/assets/postmanconstraints.png)


# Connecting the model through Google Sheet
Once you confirmed that the query is functioning in Postman, you can transform the code into a Javascript Fetch request (for Google Sheet) using the Code button underneath the Save button.

![POSTMANJAVASCRIPT](https://github.com/figment-networks/learn-tutorials/raw/master/assets/postmanjavascript.png)


The important part to save for the App Script in Google is:
```graphql
var graphql = JSON.stringify({
  query: "query{\n  \n  pools( where: {\n      volumeUSD_gte:20000\n      totalValueLockedUSD_gte: 30000\n      txCount_gte:100\n      createdAtTimestamp_gte: 1625575864\n    } \n		) {\n  \n    token0 {\n      symbol\n    }\n    token0Price\n    token1 {\n      symbol\n    }\n    token1Price\n    id\n    volumeUSD\n    createdAtTimestamp\n    totalValueLockedUSD\n    txCount\n  }}",
  variables: {}
})
var requestOptions = {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: graphql,
  redirect: 'follow'
};
```
## Building the javascript function in Sheets
We want to have floating parameters in the function in order to filter new pairs based on our different parameters:

* Number of days since the pair was created : [createdAtTimestamp_gte]
* Minimum volume in USD threshold : [volumeUSD_gte]
* Minimum liquidity in USD threshold : [totalValueLockedUSD_gte]
* Minimum number of transactions since creation date : [txCount_gte]

Let's define an asynchronous function with those 4 parameters as inputs
```javascript
async function UNISWAP(days,volume,liquidity,tx_count){
}
```

1. In order to make the TheGraph post request, we need a threshold date (createdAtTimestamp_gte) in UNIX timestamp format. We can compute it as shown in the below code.
2. Then we just need to change the fixed parameters from the model with the floating parameters (making sure they are in string) in the variable graphql. 
3. Afterwards we can copy/paste the requestOptions variable from Postman
4. Finally we call the URLfetch using the ImportJSONAdvanced function that was created for Google sheets (by Brad Jasper and Trevor Lohrbeer version 1.5), using the API endpoint from the Uniswap V3 subgraph, and the requestOptions as well as the standard parameters of the ImportJSONAdvanced function. 
```javascript
// Only for access to files in which the add-on or script is used, rather than all of a user's spreadsheets

/**
* @OnlyCurrentDoc
*/

// Adding description for the function
/**UNISWAP
 * Returns new tradable pairs on Uniswap
 *
 * =UNISWAP(5,10000,10000,100)
 *
 * @param {days}                    the number of Days since the pair is active
 * @param {volume}                  the minimum Volume ($)
 * @param {liquidity}               the minimum Liquidity ($)
 * @param {tx_count}                the number of Transactions existant since creation
 * @customfunction
 *
 * @return a table with all new tradable pairs on Uniswap and their number of Days since Active, the Volume ($), the Liquidity ($), the number of Transactions 
 **/


async function UNISWAP(days,volume,liquidity,tx_count){

	// [1] Computing the threshold date (createdAtTimestamp_gte) in UNIX timestamp format
	unix_day=Math.floor(Date.now() / 1000-parseFloat(days)*86400);
	
	// [2] Changing the fixed parameters from the model with the floating parameters (making sure they are in string format)
	var graphql = JSON.stringify({
      query: "query{\n  \n  pools( where: {\n      volumeUSD_gte:"+String(volume)+"\n      totalValueLockedUSD_gte: "+String(liquidity)+"\n      txCount_gte:"+String(tx_count)+"\n      createdAtTimestamp_gte: "+String(unix_day)+"\n    } \n		) {\n  \n    token0 {\n      symbol\n    }\n    token0Price\n    token1 {\n      symbol\n    }\n    token1Price\n    id\n    volumeUSD\n    createdAtTimestamp\n    totalValueLockedUSD\n    txCount\n  }}",
        variables: {}
      })

      // [3] Copy/Pasting the requestOptions variable from Postman javascript code
      var requestOptions = {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        payload: graphql,
        redirect: 'follow'
      };

      // [4] Calling the URLfetch using the ImportJSONAdvanced function (by Brad Jasper and Trevor Lohrbeer version 1.5) that was created for Google sheets
      return ImportJSONAdvanced('https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3',requestOptions,'','noInherit',includeXPath_,defaultTransform_);
}
```
## Copy/Pasting the code in Google Sheet
Open a Google sheet where you wish to use the Uniswap function -> Go to **Tools › Script editor**

![GOOGLESHEETEDITOR](https://github.com/figment-networks/learn-tutorials/raw/master/assets/googlesheetmacro.gif)

Replace the empty function with the code we just created.

![Uniswapgs](https://github.com/figment-networks/learn-tutorials/raw/master/assets/uniswapgs.png)

Add the [ImportJSON script by Brad Jasper and Trevor Lohrbeer version 1.5](https://raw.githubusercontent.com/Eloise1988/ImportJSON/master/ImportJSON.gs)

![ImportJSONgs](https://github.com/figment-networks/learn-tutorials/raw/master/assets/importjsongs.png)

Once you save the code, you need to activate the [Manual authorization scopes for Sheets](https://developers.google.com/apps-script/guides/services/authorization).

## Uniswap Formula

Once all of these steps are done, you should be able to request the newest tradable pairs on Uniswap, giving constraints on the Number of Days the pair has been active, the Volume ($), the Liquidity ($), and the number of Transactions.

![UNISWAP](https://github.com/figment-networks/learn-tutorials/raw/master/assets/UNISWAP.gif)

- [Here is the access to the live template sheet](https://docs.google.com/spreadsheets/d/1tME9nMh79KzZP4Wmld7lezom6je4BOw_0T9ABf5GKXE/edit?usp=sharing)

For example, if I want to get the new Uniswap pairs where the pool was launched in the last 2 days, the daily Volume is greater than $1'000, the Liquidity is above $10'000 and there has been more than 10 Transactions since the launch. 
The formula is:
**=UNISWAP(2,1000,10000,10)**


which returns a table (see GIF above) with all new tradable pairs on Uniswap and their number of days since active, volume ($), liquidity ($), the number of transactions, prices and coin symbols. There are plenty more functionalities that can be added through the TheGraph API.


# Conclusion

A user-friendly interface that interacts with The Graph protocols using Google Sheet. In this tutorial you have learned how to :

1. Find a UniswapV3 subgraph on The Graph
2. Make a GraphQL request
3. Translate the query in Javascript (Google Sheet's programming language) using Postman
4. Retrieve the latest pairs in the Sheet with a user-defined formula under your specific constraints


# About the author

Eloise gathers cryptocurrency data to help users import and value their crypto portfolio in Google Sheets. She publishes her work in [Medium](https://eloise88.medium.com/) and hopes you can benefit from it. 

And for developers who wish to directly check her work on [Github](https://github.com/Eloise1988), she built the [COINGECKO](https://github.com/Eloise1988/COINGECKO) repository for pricing as well as the [CRYPTOBALANCE](https://github.com/Eloise1988/CRYPTOBALANCE) repository for balances, staking, DEX prices, etc.

Feedback is very welcomed. A [TELEGRAM chat](https://t.me/TheCryptoCurious) is also available for support. If this project adds any value to you and/or are looking for personalized coding on your Google Sheets, don’t hesitate to leave a message. Thank you so much for investing your time in reading this article. Take care of yourself & your family in these challenging times!

# References

* https://github.com/Eloise1988/THEGRAPH
* https://github.com/bradjasper/ImportJSON


Scan the latest pairs added on UniswapV3 using TheGraph in Google Sheets

Scan the latest pairs added on UniswapV3 using TheGraph

# Introduction

In this tutorial you will learn how to deploy a Solidity smart contract to the Avalanche Fuji testnet using HardHat, then create and deploy its subgraph to the Subgraph Studio.

![Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph.png)

The Subgraph Studio is where you can build and create subgraphs. You can add metadata to your graphs (even after deploying your subgraphs), deploy multiple versions of your subgraphs, as well as publish them to the decentralized Graph Explorer. Do note that publishing a subgraph is different from deploying a subgraph. When you deploy a subgraph, you alone can access it. But when you publish it, it's created on-chain, and everyone can access it.

You can also test your subgraphs in the Playground, where you can run graphql queries without incurring any querying fees. In this tutorial, you shall also learn how to create and deploy your subgraph to Subgraph Studio using an Avalanche smart contract.

When you know the address of a smart contract, assuming that the contract is verified on etherscan, you can easily build a subgraph schema for it. If not, you can provide the local path of the Application Binary Interface (ABI) to the Graph CLI in order to create a subgraph schema. By default, HardHat does not export the ABI after compilation of the smart contract. However it is possible to use a HardHat plugin to automatically export the ABI when a smart contract is compiled.

# Prerequisites

To successfully complete this tutorial, you will need to have a basic understanding of Avalanche, Solidity, and the NodeJS ecosystem.

# Requirements

- You will need Metamask installed in your browser. You can install it from <https://metamask.io/>
- You need to have a recent version of Node.js installed. We recommend using v14.17.6 LTS for compatibility.

# Project setup

Run the following command to install the yarn package manager and the Graph Protocol CLI globally. These are required to build and deploy your subgraph.

```text
npm i -g yarn @graphprotocol/graph-cli
```

Then run the following commands to create a new directory called `vending`, and then change into the directory:

```text
mkdir vending
cd vending
```

Then run the below commands to create a new yarn package inside it, and then install Hardhat as a dev-dependency of the project (meaning that it is a package that is only needed for local development and testing).

```text
yarn init --yes
yarn add --dev hardhat
```

Then run `npx hardhat` to initialize the Hardhat project. This will output:

```text
888    888                      888 888               888
888    888                      888 888               888
888    888                      888 888               888
8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
888    888 .d888888 888    888  888 888  888 .d888888 888
888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888

Welcome to Hardhat v2.6.4

? What do you want to do? …
▸ Create a basic sample project
  Create an advanced sample project
  Create an empty hardhat.config.js
  Quit
```

Select "Create an empty hardhat.config.js" by scrolling down the menu with the arrow keys on your keyboard and press Enter. This will create a `hardhat.config.js` file in the root of the `vending` directory, with the following contents:

```javascript
/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.7.3",
};
```

Since Avalanche network is compatible with Ethereum's Virtual Machine (EVM), you can use any available HardHat plugins to compile and deploy your contract:

```text
yarn add --dev @nomiclabs/hardhat-ethers ethers @nomiclabs/hardhat-waffle
```

# Writing the smart contract

Create a new directory called `contracts` inside the `vending` directory, then create a file inside the `contracts` directory called `vending.sol`.

Paste this Solidity code into that file:

```javascript
// SPDX-License-Identifier: MIT

pragma solidity 0.7.3;

contract VendingMachine {

    // Store the owner of this smart contract
    address owner;

    // A mapping is a key/value store. Here we store cupcake balance of this smart contract.
    mapping (address => uint) cupcakeBalances;

    // Events are necessary for The Graph to create entities
    event Refill(address owner, uint amount, uint remaining, uint timestamp, uint blockNumber);
    event Purchase(address buyer, uint amount, uint remaining, uint timestamp, uint blockNumber);

    // When 'VendingMachine' contract is deployed:
    // 1. set the deploying address as the owner of the contract
    // 2. set the deployed smart contract's cupcake balance to 100
    constructor() {
        owner = msg.sender;
        cupcakeBalances[address(this)] = 100;
    }

    // Allow the owner to increase the smart contract's cupcake balance
    function refill(uint amount) public onlyOwner {
        cupcakeBalances[address(this)] += amount;
        emit Refill(owner, amount, cupcakeBalances[address(this)], block.timestamp, block.number);
    }

    // Allow anyone to purchase cupcakes
    function purchase(uint amount) public payable {
        require(msg.value >= amount * 0.01 ether, "You must pay at least 0.01 ETH per cupcake");
        require(cupcakeBalances[address(this)] >= amount, "Not enough cupcakes in stock to complete this purchase");
        cupcakeBalances[address(this)] -= amount;
        cupcakeBalances[msg.sender] += amount;
        emit Purchase(msg.sender, amount, cupcakeBalances[address(this)], block.timestamp, block.number);
    }

    // Function modifiers are used to modify the behaviour of a function.
    // When "onlyOwner" modifier is added to a function, only the owner of this smart contract can execute that function.
    modifier onlyOwner {
        // Verifying that the owner is same as the one who called the function.
        require(msg.sender == owner, "Only owner callable");

        // This underscore character is called the "merge wildcard".
        // It will be replaced with the body of the function (to which we added the modifier),
        _;
    }
}
```

# Compiling the smart contract

We will install the `hardhat-abi-exporter` plugin so that HardHat will export the smart contract ABI after compilation:

```text
yarn add --dev hardhat-abi-exporter
```

Update your `hardhat.config.js` file to use the abi exporter:

```javascript
require('@nomiclabs/hardhat-waffle');
require('hardhat-abi-exporter');

module.exports = {
  solidity: '0.7.3',
  abiExporter: {
    path: './abi/',
    clear: true,
  },
};
```

- **path**: The path to your ABI export directory (relative to the HardHat project's root). The directory will be created if it does not exist.
- **clear**: A boolean value that determines whether to delete old files from the specified path on compilation.

HardHat will use the specified version of solc (v0.7.3) to compile your smart contract. Run:

```text
npx hardhat compile
```

Assuming there are no errors or warnings, this will output:

```text
Compiling 1 file with 0.7.3
Compilation finished successfully
```

The `vending.sol` smart contract has now been compiled successfully. The ABI will be stored in `abi/contracts/vending.sol/VendingMachine.json`.

# Deploying the smart contract

Though this step is not necessary for creating your subgraph, you can still deploy your smart contract to learn about the Avalanche network and DataHub.

Add the constants `FUJI_PRIVATE_KEY` and `DATAHUB_API_KEY` as well as a **networks** entry in your `hardhat.config.js` file:

```javascript
require('@nomiclabs/hardhat-waffle');
require('hardhat-abi-exporter');

// Replace this private key with your Fuji wallet private key
const FUJI_PRIVATE_KEY = 'YOUR_FUJI_PRIVATE_KEY';

// Replace this with your Datahub api key
const DATAHUB_API_KEY = 'YOUR_DATAHUB_API_KEY';

module.exports = {
  solidity: '0.7.3',
  abiExporter: {
    path: './abi/',
    clear: true,
  },
  networks: {
    fuji: {
      url: `https://avalanche--fuji--rpc.datahub.figment.io/apikey/${DATAHUB_API_KEY}/ext/bc/C/rpc`,
      accounts: [`0x${FUJI_PRIVATE_KEY}`],
    },
  },
};
```

## Getting your Datahub API Key

To get your `DATAHUB_API_KEY`, head over to <https://datahub.figment.io/sign_up> and create a free account.

![Datahub Signup](https://github.com/figment-networks/learn-tutorials/raw/master/assets/datahub_signup.png)

Click on the verification link you shall receive in your email. After email verification, you will be redirected to <https://datahub.figment.io/>.

![Datahub Avalanche](https://github.com/figment-networks/learn-tutorials/raw/master/assets/datahub_avalanche.png)

Click on the `Avalanche` button to view the Avalanche Services Dashboard at <https://datahub.figment.io/services/avalanche>. You can copy your API key to the clipboard by clicking on the **copy** button.

![Datahub Avalanche API Key](https://github.com/figment-networks/learn-tutorials/raw/master/assets/datahub_avalanche_api.png)

## Getting your Metamask private key

You need to add a connection to the Avalanche Fuji testnet to your Metamask by following the instructions below (remember to replace `<YOUR DATAHUB_API_KEY>` in the RPC URL with your actual DataHub API key):

- Login in to Metamask
- Click on the `Network` drop-down
- Select `Custom RPC`
- Fill in the details:
  - **Network Name**: Avalanche FUJI C-Chain
  - **New RPC URL**: `https://avalanche--fuji--rpc.datahub.figment.io/apikey/<YOUR DATAHUB_API_KEY>/ext/bc/C/rpc`
  - **ChainID**: `43113`
  - **Symbol**: `AVAX`
  - **Explorer**: `https://cchain.explorer.avax-test.network`

![Metamask FUJI Avalanche](https://github.com/figment-networks/learn-tutorials/raw/master/assets/avalanche_metamask.png)

You will also need some Fuji AVAX tokens in your Metamask wallet. Follow the instructions below:

- Go to <https://faucet.avax-test.network/>, and paste your Metamask wallet address.
- Complete the captcha, and click on the Request button
- You shall receive 10 Fuji AVAX once your transaction is mined

To get your `FUJI_PRIVATE_KEY`, open your browser and open Metamask. Select **Avalanche FUJI C-Chain** network. Click on Account details, and click on `Export Private Key`.

**Never ever share your private key with anyone!**

Create a subdirectory inside the HardHat project called `scripts`, and paste the following code into a new file `deploy.js` inside the `scripts` directory:

```javascript
async function main() {
  const [deployer] = await ethers.getSigners();

  console.log("Deploying contracts with the account:", deployer.address);
  console.log("Account balance:", (await deployer.getBalance()).toString());

  const VendingMachine = await ethers.getContractFactory("VendingMachine");
  const vendingMachine = await VendingMachine.deploy();

  console.log("Contract address:", vendingMachine.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });
```

To deploy the smart contract to the Fuji testnet using HardHat, run the command:

```text
npx hardhat run scripts/deploy.js --network fuji
```

This will output:

```text
Deploying contracts with the account: <YOUR FUJI WALLET ADDRESS>
Account balance: <YOUR FUJI WALLET BALANCE>
Contract address: <YOUR FUJI SMART CONTRACT ADDRESS>
```

Congratulations! You just deployed your smart contract successfully to Fuji testnet! We will need the contract address when creating the subgraph, so remember to copy it.

# Creating the subgraph

Run the following command to create the subgraph by downloading the contract ABI from the Fuji testnet. A new directory called `vending` will be created, and all node dependencies will be installed automatically.

```text
graph init \
  --contract-name VendingMachine \
  --index-events \
  --studio \
  --from-contract <YOUR FUJI SMART CONTRACT ADDRESS> \
  --abi abi/contracts/vending.sol/VendingMachine.json \
  --network fuji \
  vending
```

Replace `<YOUR FUJI SMART CONTRACT ADDRESS>` with your deployed VendingMachine smart contract address from above.

If you are using Windows, replace the `\` characters in the above command with `^`.

This will output:

```text
✔ Subgraph slug · vending
✔ Directory to create the subgraph in · vending
✔ Ethereum network · fuji
✔ Contract address · <YOUR FUJI SMART CONTRACT ADDRESS>
✔ ABI file (path) · abi/contracts/vending.sol/VendingMachine.json
✔ Contract Name · VendingMachine
———
  Generate subgraph from ABI
  Write subgraph to directory
✔ Create subgraph scaffold
✔ Initialize subgraph repository
✔ Install dependencies with yarn
✔ Generate ABI and schema types with yarn codegen

Subgraph vending created in vending

Next steps:

  1. Run `graph auth` to authenticate with your deploy key.

  2. Type `cd vending` to enter the subgraph.

  3. Run `yarn deploy` to deploy the subgraph.

Make sure to visit the documentation on https://thegraph.com/docs/ for further information.
```

It shall create three files:

- `subgraph.yaml`: This is where the [subgraph manifest](https://thegraph.academy/developers/working-with-the-graph/) is stored
- `schema.graphql`: This defines the data to be stored and how it can be queried using GraphQL
- `src/mapping.ts`: This [AssemblyScript](https://www.assemblyscript.org/) file defines the mapping between blockchain events to the schema entities

# Creating the project in Subgraph Studio

First, you will want to head over to the Subgraph Studio at <https://thegraph.com/studio/>.

![Login to Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_connect.png)

Click on the **Connect Wallet** button. Choose a Metamask wallet to login with. Once you are authenticated, you shall see the below screen, where you can create your first subgraph.

![Create your first subgraph](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_create_subgraph.png)

Next, you need to give your subgraph a name. Give the name as **vending**. Once that's done, you will see this screen:

![Subgraph dashboard](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_subgraph_created.png)

On this screen, you can see details about the subgraph like your deploy key, the subgraph slug and status.

# Deploying the subgraph

Before you can deploy your subgraph, you need to get your deploy key from <https://thegraph.com/studio/subgraph/vending/>. This is used to authenticate your account with the Subgraph Studio.

Run the following commands to set your deploy key.

```text
cd vending
graph auth --studio <DEPLOY_KEY>
```

You should see the following output:

```text
Deploy key set for https://api.studio.thegraph.com/deploy/
```

Once that is done, you can run `yarn deploy` to deploy the subgraph to Subgraph Studio. When you are prompted for a version label, you can choose `v1.0.0`. You should see the following output:

```text
yarn run v1.22.11
$ graph deploy --node https://api.studio.thegraph.com/deploy/ vending
✔ Version Label (e.g. v0.0.1) · 1.0.0
  Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
  Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
  Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
  Skip migration: Bump mapping apiVersion from 0.0.4 to 0.0.5
  Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
  Compile data source: VendingMachine => build/VendingMachine/VendingMachine.wasm
✔ Compile subgraph
  Copy schema file build/schema.graphql
  Write subgraph file build/VendingMachine/abis/VendingMachine.json
  Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
  Add file to IPFS build/schema.graphql
                .. QmeSYhiAZ4m7wa5KHnyUGdTDLfha5Lknp3LhpJwbecRVGw
  Add file to IPFS build/VendingMachine/abis/VendingMachine.json
                .. QmbSWXTRVwvi9umMqhfMFT2EGUF4JPcuBfPUhMLAMpLkXn
  Add file to IPFS build/VendingMachine/VendingMachine.wasm
                .. QmYjyCCaJdrhEqc8gHPVrWPgcgsfPoULkhzcGLwXZMovCQ
✔ Upload subgraph to IPFS

Build completed: QmZMq8pfqkxvZufKKSeUYKwuNRyAbb2aGxogHPPUxBZ3XA

Deployed to https://thegraph.com/studio/subgraph/vending

Subgraph endpoints:
Queries (HTTP):     https://api.studio.thegraph.com/query/8676/vending/1.0.0
Subscriptions (WS): https://api.studio.thegraph.com/query/8676/vending/1.0.0

Done in 13.39s.
```

You have now deployed the subgraph to your Subgraph Studio account!

# Conclusion

Congratulations on finishing this tutorial! You have learned how to deploy a smart contract to the Avalanche Fuji testnet using HardHat. You also learned how to create and deploy a subgraph for the smart contract on Subgraph Studio.

# About the Author

I'm Robin Thomas, a blockchain enthusiast with few years of experience working with various blockchain protocols. Feel free to connect with me on [GitHub](https://github.com/robin-thomas).


Learn how to deploy a Solidity smart contract to the Avalanche Fuji testnet using HardHat, then create and deploy its subgraph to the Subgraph Studio

Deploy a subgraph for an Avalanche smart contract

Query the subgraph

Define the schema

The Graph hosted service

Tweak the Manifest

# Introduction

In this tutorial you will learn how to create a simple React app by leveraging some existing Graph Protocol subgraphs. It includes configuring GraphQL queries and explains how to perform simple data visualization using a pie chart.

# Prerequisites

In order to complete this tutorial, you will need to have some basic knowledge about NodeJS, ECharts library and GraphQL query. Also, get familiar with existing subgraph schema and the Graph Explorer can be super helpful.  

In this tutorial, you will interact with the `Hopr on Mainnet` subgraph. You can use this [playground](https://thegraph.com/explorer/subgraph?id=0x77d63a93c90a9860ab07ee6bc7bc5becad1cbfde-0&view=Playground) to explore it. 

# Requirements

You will need to have `Node.js >= 14.0.0` and `npm >= 5.6` on your machine.

# Project setup

Run the following command to create a new project.

```text
npx create-react-app my-app
cd my-app
```

Also, you need to install necessary packages including request client, GraphQL support and ECharts for visualization.

```text
npm i @apollo/client graphql echarts-for-react echarts
```

Run the app at localhost.

```text
npm start
```

You should see similar message in your terminal.

```text
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.145:3000

Note that the development build is not optimized.
To create a production build, use yarn build.
```

Then, you are able to see your project at http://localhost:3000 by default.

# Create Query Client

Create a new file called `QueryClients.js` under the `src` folder. Add the following script to configure a query client to interact with [HOPR Subgraph Mainnet](https://thegraph.com/legacy-explorer/subgraph/minatofund/hopr-subgraph-mainnet). You need this client to send GraphQL queries to the subgraph endpoint.

```javascript
import { ApolloClient, InMemoryCache, gql } from '@apollo/client'

export const hoprClient = new ApolloClient({
    uri: 'https://api.thegraph.com/subgraphs/name/minatofund/hopr-subgraph-mainnet',
    cache: new InMemoryCache()
  })

```

# Configure Query and Visualization

Create the file `HolderBalance.js` under the `src` folder. Add the following code:

```javascript
import React from 'react'
import ReactECharts from 'echarts-for-react'
import { gql } from '@apollo/client'
import {hoprClient} from './QueryClients'

class HolderBalance extends React.Component {
  state = {
    loading: true,
    holderBalance: []
  }

  async fetchData() {
    const holderBalanceQuery = `
    query accounts($skip: Int!) {
        accounts(where:{HoprBalance_gt:0, id_not:"0x0000000000000000000000000000000000000000"},first:1000, skip:$skip, orderBy: HoprBalance, orderDirection: desc)
        {
          totalBalance
        }
      }
    `

    try {
      let skip = 0
      let allResults = []
      let found = false
      while (!found) {
        let result = await hoprClient.query({
          query: gql(holderBalanceQuery),
          variables: {
            skip: skip
          },
          fetchPolicy: 'cache-first',
        })
        allResults = allResults.concat(result.data.accounts)
        if (result.data.accounts.length < 1000) {
          found = true
        } else {
          skip += 1000
        }
      }

      return allResults
    } catch (e) {
      console.error(e)
    }
  }

  componentDidMount() {
    this.fetchData().then(data => {
      this.processHolderBalanceData(data)
    }).catch(e => {
      console.error(e)
    })
  }

  processHolderBalanceData(data) {
    // Sizes are sorted in descending order
    const sizes = data.map(item => (parseFloat(item.totalBalance)))
    const spliters = [10, 100, 1000, 10000, 100000]
    // Find indexes spliting the sizes by given spliters
    let spliterIndex = spliters.length - 1
    let splitingIndexes = [0]
    for (let [idx, size] of sizes.entries()) {
      while (size <= spliters[spliterIndex]) {
        splitingIndexes.push(idx)
        spliterIndex -= 1
      }
      if (spliterIndex < 0 )
        break
    }
    // Split sizes, get chunk size and calculate sum of each chunk
    const chunkNames = ['>100k 🐳', '10k-100k', '1k-10k', '100-1k', '10-100', '0-10']
    let splited = []
    for (let i = 0; i < splitingIndexes.length - 1; i++) {
      const chunk = sizes.slice(splitingIndexes[i], splitingIndexes[i + 1])
      splited.push({
        name: chunkNames[i],
        chunk: chunk
      })
    }
    splited.push({
      name: chunkNames[splitingIndexes.length - 1],
      chunk: sizes.slice(splitingIndexes[splitingIndexes.length - 1])
    })
    // Update holder balance data
    const reducer = (accumulator, currentValue) => accumulator + currentValue
    let holderBalance = splited.map((item) => {
      const length = item.chunk.length
      const noun = length === 1 ? 'holder' : 'holders'
      return ({
        name: `${item.name} (${length} ${noun})`,
        value: item.chunk.reduce(reducer)
      })
    })
    this.setState({
      loading: false,
      holderBalance: holderBalance
    })
  }

  chart() {
    if (this.state.loading) {
      return <p>Loading...</p>
    }
    const options = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        {
          name: 'Holder Balance',
          type: 'pie',
          radius: '50%',
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          data: this.state.holderBalance.map((item) => {
            return {
              ...item,
              value: parseFloat(item.value.toFixed(2))
            }
          }),
        }
      ]
    }
    return <ReactECharts option={options} />;
  }

  render() {
    return (
      <div>
        {this.chart()}
      </div>
    )
  }
}

export default HolderBalance
```

Let me explain the functionality of each part of the code.

Import necessary components. 

```javascript
import React from 'react'
import ReactECharts from 'echarts-for-react'
import { gql } from '@apollo/client'
import {hoprClient} from './QueryClients'

```

Define the class and initial state.

```javascript
class HolderBalance extends React.Component {
  state = {
    loading: true,
    holderBalance: []
  }
```

Configure the query you are going to send. Leave `skip` as a variable because you need to adjust it at runtime. This query means we want to get accounts' HOPR balance and exclude the Zero address (0x0).

```javascript
 async fetchData() {
    const holderBalanceQuery = `
    query accounts($skip: Int!) {
        accounts(where:{HoprBalance_gt:0, id_not:"0x0000000000000000000000000000000000000000"},first:1000, skip:$skip, orderBy: HoprBalance, orderDirection: desc)
        {
          totalBalance
        }
      }
    `
```

Before you move on, you might want to check the raw data in response. Use the playground is a good choice. You can find the format and check values easily.

![HOPR Subgraph Playground](https://github.com/figment-networks/learn-tutorials/raw/master/assets/hopr-subgraph-playground.png)

Use a while loop to send queries until the result has less than 1000 records. This is because a single query can only return 1000 results maximum. In order to get all data, you need to adjust the `skip` variable.

```javascript
    try {
      let skip = 0
      let allResults = []
      let found = false
      while (!found) {
        let result = await hoprClient.query({
          query: gql(holderBalanceQuery),
          variables: {
            skip: skip
          },
          fetchPolicy: 'cache-first',
        })
        allResults = allResults.concat(result.data.accounts)
        if (result.data.accounts.length < 1000) {
          found = true
        } else {
          skip += 1000
        }
      }

      return allResults
    } catch (e) {
      console.error(e)
    }
  }

  componentDidMount() {
    this.fetchData().then(data => {
      this.processHolderBalanceData(data)
    }).catch(e => {
      console.error(e)
    })
  }
```

Now you have the raw data, and the next part is to visualize it. In this section, we will split the accounts into different categories by their HOPR token balance.

```javascript
  processHolderBalanceData(data) {
    // Sizes are sorted in descending order
    const sizes = data.map(item => (parseFloat(item.totalBalance)))
    const spliters = [10, 100, 1000, 10000, 100000]
    // Find indexes spliting the sizes by given spliters
    let spliterIndex = spliters.length - 1
    let splitingIndexes = [0]
    for (let [idx, size] of sizes.entries()) {
      while (size <= spliters[spliterIndex]) {
        splitingIndexes.push(idx)
        spliterIndex -= 1
      }
      if (spliterIndex < 0 )
        break
    }
```

The categories are:

* '>100k 🐳'
* '10k-100k'
* '1k-10k'
* '100-1k'
* '10-100'
* '0-10'

You need to assign the name to each categorized chunk.

```javascript
    // Split sizes, get chunk size and calculate sum of each chunk
    const chunkNames = ['>100k 🐳', '10k-100k', '1k-10k', '100-1k', '10-100', '0-10']
    let splited = []
    for (let i = 0; i < splitingIndexes.length - 1; i++) {
      const chunk = sizes.slice(splitingIndexes[i], splitingIndexes[i + 1])
      splited.push({
        name: chunkNames[i],
        chunk: chunk
      })
    }
    splited.push({
      name: chunkNames[splitingIndexes.length - 1],
      chunk: sizes.slice(splitingIndexes[splitingIndexes.length - 1])
    })
    // Update holder balance data
    const reducer = (accumulator, currentValue) => accumulator + currentValue
    let holderBalance = splited.map((item) => {
      const length = item.chunk.length
      const noun = length === 1 ? 'holder' : 'holders'
      return ({
        name: `${item.name} (${length} ${noun})`,
        value: item.chunk.reduce(reducer)
      })
    })
    this.setState({
      loading: false,
      holderBalance: holderBalance
    })
  }
```

Finally, you can generate the chart and export it. When the app is still fetching data, it shows `Loading...`. After `state.loading` becoming `false`, show the fresh pie chart.

```javascript
  chart() {
    if (this.state.loading) {
      return <p>Loading...</p>
    }
    const options = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        {
          name: 'Holder Balance',
          type: 'pie',
          radius: '50%',
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          data: this.state.holderBalance.map((item) => {
            return {
              ...item,
              value: parseFloat(item.value.toFixed(2))
            }
          }),
        }
      ]
    }
    return <ReactECharts option={options} />;
  }

  render() {
    return (
      <div>
        {this.chart()}
      </div>
    )
  }
}

export default HolderBalance
```

Now you can display the new chart in your application. Just replace the code in App.js with the following:

```javascript
import './App.css';
import HolderBalance from './HolderBalance'

function App() {
  return (
    <div className="App">
      <HolderBalance />
    </div>
  );
}

export default App;
```

Please remember to save all of the changes to the code, then refresh the localhost page. You should see the nice pie chart we just created:

![Graph React App Pie Chart](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph-react-app-pie-chart.png)

# Conclusion

Congratulations, you have completed the tutorial! You have learned how to configure a GraphQL query to retrieve data from an existing subgraph. You also understand how to visualize the data properly in a React app.

# About the Author

This tutorial was created by [Minato Fund](https://github.com/minatofund), an active group helping merge blockchain projects operating as a validator. We are positively working on building and utilizing subgraphs. If you have any questions, please do not hesitate to contact us by:
* Discord: minatofund#1944
* Twitter: [@FundMinato](https://twitter.com/FundMinato)

Learn how to explore an existing subgraph and visualize its data using a pie chart

Explore an existing subgraph

# Access The Graph Pathway

We no longer host the Pathway pages on this website, the content has moved to the `learn-web3-dapp` repository at <https://github.com/figment-networks/learn-web3-dapp#-get-started>.

For less experienced developers or for anyone who wants to dive in without complicated setup, **[we recommend using Gitpod](https://gitpod.io/#https://github.com/figment-networks/learn-web3-dapp)** to work with the `learn-web3-dapp` project (this requires you to have a GitHub account to sign in). Gitpod can save you a considerable amount of time, as you don't have to install dependencies or set up a development environment - everything just works!

If you are an experienced developer, [cloning the repo locally](https://github.com/figment-networks/learn-web3-dapp#-clone-locally) is still possible, however you might encounter various system configuration issues depending on how your local environment is set up. A minimum of NodeJS version 14.17 is recommended, and you'll want to make sure you have the `build-essential` package installed. You'll also want to make sure your Rust toolchain is up to date and that you have the `wasm32-unknown-unknown` target triple set up and installed.


You can now access The Graph 101 Pathway on our GitHub repo.

The Graph Pathway has moved to learn-web3-dapp

Learn about how subgraph queries are performed and how they travel through the Graph Protocol

The Journey of a Subgraph Query

Implement the mappings

Run a local Graph node

Create a subgraph scaffold

# Introduction

In this tutorial you will learn how to deploy a Solidity smart contract to the Polygon Mumbai testnet using HardHat, then create and deploy its subgraph to the Subgraph Studio.

![Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph.png)

The subgraph studio is where you can create a subgraph using the Studio UI, deploy a subgraph using the Graph Protocol CLI, test it in the Playground (where you can run GraphQL queries without incurring any querying fees), add metadata about the subgraph, deploy multiple versions of your subgraphs, as well as publish them to the decentralized Graph Explorer.

When you deploy a subgraph, you alone shall have access to it. But when you publish your subgraph, anyone can access and test your subgraph in the Playground. So basically, you have full control of your subgraphs.

In this tutorial, you shall learn how to create and deploy your subgraph to Subgraph Studio using a Polygon smart contract.

# Prerequisites

To successfully complete this tutorial, you will need to have a basic understanding of Polygon and the NodeJS ecosystem. You will also need to have advanced knowledge of Solidity.

# Requirements

- You will need Metamask installed in your browser. You can install it from <https://metamask.io/>
- You need to have a recent version of Node.js installed. We recommend using v14.18.1 LTS for compatibility.

# Project setup

Run the following command to install the yarn package manager and the Graph Protocol CLI globally. These are required to build and deploy your subgraph.

```text
npm i -g yarn @graphprotocol/graph-cli
```

Then run the following commands to create a new directory called `nft`, change into that directory, and then create a new yarn package inside it:

```text
mkdir nft
cd nft
yarn init --yes
```

## Setting up Hardhat

Run the following command to install `hardhat` as a dev-dependency of the project (meaning that it is a package that is only needed for local development and testing).

```text
yarn add --dev hardhat
```

Then run `npx hardhat` to initialize the Hardhat project. This will output:

```text
888    888                      888 888               888
888    888                      888 888               888
888    888                      888 888               888
8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
888    888 .d888888 888    888  888 888  888 .d888888 888
888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888

Welcome to Hardhat v2.6.5

? What do you want to do? …
▸ Create a basic sample project
  Create an advanced sample project
  Create an advanced sample project that uses TypeScript
  Create an empty hardhat.config.js
  Quit
```

You can choose any of the 5 menu options above, by using the arrow keys on your keyboard. Select "Create an empty hardhat.config.js" and press Enter. This will output: `Config file created`.

You will now have a `hardhat.config.js` file created, with the below contents:

```javascript
/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.7.3",
};
```

Update the solidity version to `0.8.0`, like shown below:

```javascript
/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.8.0",
};
```

HardHat will use the specified version of solc (v0.8.0) to compile your smart contract.

Run the following command to install Hardhat plugins that are required for compiling and deploying a solidity smart contract:

```text
yarn add --dev @nomiclabs/hardhat-ethers ethers @nomiclabs/hardhat-waffle hardhat-abi-exporter
```

# Writing the smart contract

To simplify writing our NFT smart contract, we shall be using the OpenZeppelin contracts npm package. You can install it as a dev-dependency by running:

```text
yarn add --dev @openzeppelin/contracts
```

We shall be using three OpenZeppelin smart contracts:

- **Counters** - to keep track of an incremental tokenId for each NFT minted
- **ERC721URIStorage** - to store the NFT metadata like the tokenURI (which contains some metadata and image)
- **ERC721** - to provide some basic functions of ERC721 standard

Create a new directory called `contracts`, then create a file inside it called `nft.sol`.

Paste this Solidity code into that file:

```solidity
// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract FunNFT is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    struct Collection {
      uint tokenId;
      uint price;
      bool forSale;
    }

    mapping(uint => Collection) collections;

    constructor() ERC721("FunNFT Collection", "FUN") {}

    function mint(string memory tokenURI, uint price) public returns (uint tokenId) {
        // increment the counter, to get the next tokenId.
        _tokenIds.increment();
        tokenId = _tokenIds.current();

        // mint the new NFT and then set its tokenURI.
        _mint(msg.sender, tokenId);
        _setTokenURI(tokenId, tokenURI);

        // add it to the collection.
        Collection memory collection = Collection(
            tokenId,
            price,
            false
        );
        collections[tokenId] = collection;
    }

    function buy(uint tokenId) public payable {
        // verify that the NFT exists.
        require(_exists(tokenId));

        // verify that owner of the token is not the one calling this function.
        require(msg.sender != ownerOf(tokenId));

        Collection memory collection = collections[tokenId];

        // verify that the price sent is greater than equal to NFT's price.
        require(msg.value >= collection.price);

        // verify that the NFT is available to buy
        require(collection.forSale);

        // transfer the NFT from the owner to the buyer.
        address owner = ownerOf(tokenId);
        payable(owner).transfer(msg.value);
        _transfer(owner, msg.sender, tokenId);

        // update the mapping.
        collection.forSale = false;
        collections[tokenId] = collection;
    }

    function toggleForSale(uint tokenId) public {
        // verify that the NFT exists.
        require(_exists(tokenId));

        // verify that owner of the token is the one calling this function.
        require(msg.sender == ownerOf(tokenId));

        // get the NFT from mapping and store it in memory.
        Collection memory collection = collections[tokenId];

        collection.forSale = !collection.forSale;

        // update the NFT in the mapping.
        collections[tokenId] = collection;
    }
}
```

# Compiling the smart contract

By default, Hardhat will not export the ABI after compiling the solidity smart contract. But having the ABI makes it easier to create a subgraph for it.

You can export the ABI by updating your `hardhat.config.js` file:

```javascript
// Load the Hardhat plugins
require('@nomiclabs/hardhat-waffle');
require('hardhat-abi-exporter');

module.exports = {
  solidity: '0.8.0',
  abiExporter: {
    path: './abi/',
    clear: true,
  },
};
```

- **path**: The path to your ABI export directory (relative to the HardHat project's root). The directory will be created if it does not exist.
- **clear**: A boolean value that determines whether to delete old files from the specified path on compilation.

You can read about the full set of options supported by Hardhat ABI Exporter [here](https://hardhat.org/plugins/hardhat-abi-exporter.html#usage).

Run `npx hardhat compile` to compile your smart contract. Assuming there are no errors or warnings, this will output:

```text
Compiling 1 file with 0.8.0
Compilation finished successfully
```

The `nft.sol` smart contract has now been compiled successfully. The ABI will be stored in `abi/contracts/nft.sol/FunNFT.json`.

# Deploying the smart contract

Add the constants `MUMBAI_PRIVATE_KEY` and `DATAHUB_API_KEY` as well as a **networks** entry in your `hardhat.config.js` file:

```javascript
require('@nomiclabs/hardhat-waffle');
require('hardhat-abi-exporter');

// Replace this private key with your Mumbai wallet private key
const MUMBAI_PRIVATE_KEY = 'YOUR_MUMBAI_PRIVATE_KEY';

// Replace this with your Datahub api key
const DATAHUB_API_KEY = 'YOUR_DATAHUB_API_KEY';

module.exports = {
  solidity: '0.8.0',
  abiExporter: {
    path: './abi/',
    clear: true,
  },
  networks: {
    mumbai: {
      url: `https://matic-mumbai--jsonrpc.datahub.figment.io/apikey/${DATAHUB_API_KEY}`,
      accounts: [`0x${MUMBAI_PRIVATE_KEY}`],
    },
  },
};
```

## Getting your Datahub API Key

To get your `DATAHUB_API_KEY`, head over to <https://datahub.figment.io/signup> and create a free account.

![Datahub Signup](https://github.com/figment-networks/learn-tutorials/raw/master/assets/datahub_signup.png)

Click on the verification link you shall receive in your email. After email verification, you will be redirected to <https://datahub.figment.io/>.

Create a new application on DataHub using the Polygon protocol. You can choose the Staging environment, select the Polygon protocol then click to create the app.

![Create DataHub app](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/create-dh-app.png)

On your app **Overview** tab, locate the **View Key** button next to the text "API Key". You can also copy the HTTP endpoint URL including the API key from the Protocols view.


## Getting your Metamask private key

You need to add a connection to the Polygon Mumbai testnet to your Metamask by following the instructions below (remember to replace `<YOUR_DATAHUB_API_KEY>` in the JSON-RPC URL with your actual DataHub API key):

- Login in to Metamask
- Click on the `Network` drop-down
- Select `Custom RPC`
- Fill in the details:
  - **Network Name**: Polygon Mumbai Testnet
  - **New RPC URL**: `https://matic-mumbai--jsonrpc.datahub.figment.io/apikey/<YOUR_DATAHUB_API_KEY>`
  - **ChainID**: `80001`
  - **Symbol**: `MATIC`
  - **Explorer**: `https://mumbai.polygonscan.com/`

  You will also need some Mumbai MATIC tokens in your Metamask wallet. Follow the instructions below:

  - Go to <https://faucet.polygon.technology/>, and paste your Metamask wallet address.
  - Select Mumbai Network and MATIC token.
  - You shall receive 0.1 MATIC tokens once your transaction is mined

To get your `MUMBAI_PRIVATE_KEY`, open your browser and open Metamask. Select **Polygon Mumbai Testnet** network. Click on Account details, and click on `Export Private Key`.

**Never ever share your private key with anyone!**

## Deploying your smart contract

Create a subdirectory inside the HardHat project called `scripts`, and paste the following code into a new file `deploy.js` inside the `scripts` directory:

```javascript
async function main() {
  const [deployer] = await ethers.getSigners();

  console.log("Deploying contracts with the account:", deployer.address);
  console.log("Account balance:", (await deployer.getBalance()).toString());

  const FunNFT = await ethers.getContractFactory("FunNFT");
  const funNFT = await FunNFT.deploy();

  console.log("Contract address:", funNFT.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });
```

To deploy the smart contract to the Mumbai testnet using HardHat, run the command:

```text
npx hardhat run scripts/deploy.js --network mumbai
```

This will output:

```text
Deploying contracts with the account: <YOUR MUMBAI WALLET ADDRESS>
Account balance: <YOUR MUMBAI WALLET BALANCE>
Contract address: <YOUR MUMBAI SMART CONTRACT ADDRESS>
```

Congratulations! You just deployed your smart contract successfully to Mumbai testnet!

You will need the contract address when creating the subgraph, so remember to copy it.

# Creating the subgraph

Run the following command to create the subgraph by downloading the contract ABI from the Mumbai testnet. A new directory called `funnft` will be created, and all node dependencies will be installed automatically.

```text
graph init --contract-name FunNFT --index-events --studio \
  --from-contract <YOUR MUMBAI SMART CONTRACT ADDRESS> \
  --abi abi/contracts/nft.sol/FunNFT.json \
  --network mumbai \
  funnft
```

Replace `<YOUR MUMBAI SMART CONTRACT ADDRESS>` with your deployed FunNFT smart contract address from above.

If you are a Windows user, replace `\` characters in the above command with `^` character.

This will output:

```text
✔ Subgraph slug · funnft
✔ Directory to create the subgraph in · funnft
✔ Ethereum network · mumbai
✔ Contract address · <YOUR MUMBAI SMART CONTRACT ADDRESS>
✔ ABI file (path) · abi/contracts/nft.sol/FunNFT.json
✔ Contract Name · FunNFT
———
  Generate subgraph from ABI
  Write subgraph to directory
✔ Create subgraph scaffold
✔ Initialize subgraph repository
✔ Install dependencies with yarn
✔ Generate ABI and schema types with yarn codegen

Subgraph funnft created in funnft

Next steps:

  1. Run `graph auth` to authenticate with your deploy key.

  2. Type `cd funnft` to enter the subgraph.

  3. Run `yarn deploy` to deploy the subgraph.

Make sure to visit the documentation on https://thegraph.com/docs/ for further information.
```

# Creating the project in Subgraph Studio

First, you will want to head over to the Subgraph Studio at <https://thegraph.com/studio/>.

![Login to Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_connect.png)

Click on the **Connect Wallet** button. Choose a Metamask wallet to login with. Once you are authenticated, you shall see the below screen, where you can create your first subgraph.

![Create your first subgraph](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_create_subgraph.png)

Next, you need to give your subgraph a name. Give the name as **FunNFT**. Once that's done, you will see this screen:

![Subgraph dashboard](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_fun_nft.png)

On this screen, you can see details about the subgraph like your deploy key, the subgraph slug and status.

# Deploying the subgraph

Before you can deploy your subgraph, you need to get your deploy key from <https://thegraph.com/studio/subgraph/funnft/>. This is used to authenticate your account with the Subgraph Studio.

Run the following commands to set your deploy key.

```text
cd funnft
graph auth --studio <DEPLOY_KEY>
```

You should see the following output:

```text
Deploy key set for https://api.studio.thegraph.com/deploy/
```

Once that is done, you can run `yarn deploy` to deploy the subgraph to Subgraph Studio. When you are prompted for a version label, you can choose `v1.0.0`. You should see the following output:

```text
yarn run v1.22.15
$ graph deploy --node https://api.studio.thegraph.com/deploy/ funnft
✔ Version Label (e.g. v0.0.1) · v1.0.0
  Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
  Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
  Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
  Skip migration: Bump mapping apiVersion from 0.0.4 to 0.0.5
  Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
  Compile data source: FunNFT => build/FunNFT/FunNFT.wasm
✔ Compile subgraph
  Copy schema file build/schema.graphql
  Write subgraph file build/FunNFT/abis/FunNFT.json
  Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
  Add file to IPFS build/schema.graphql
                .. QmbVoYXPnjucXQv8cRDVRF8BH77YMSFWCvVu9sFQEQGhWg
  Add file to IPFS build/FunNFT/abis/FunNFT.json
                .. QmNiduSnZPvFKuiyhxdp1V8FSfhxgdtNx6TRkifugbL1XA
  Add file to IPFS build/FunNFT/FunNFT.wasm
                .. QmcKpXkdPTAjofYwqXCNreKk3AnRma7qxdk5v3jAyJSE8y
✔ Upload subgraph to IPFS

Build completed: QmVyyxKVJgGae8AC6SYLzg11huUKNmjSGos81B9ghXXWfe

Deployed to https://thegraph.com/studio/subgraph/funnft

Subgraph endpoints:
Queries (HTTP):     https://api.studio.thegraph.com/query/8676/funnft/v1.0.0
Subscriptions (WS): https://api.studio.thegraph.com/query/8676/funnft/v1.0.0

Done in 14.68s.
```

You have now deployed the subgraph to your Subgraph Studio account!

# Conclusion

Congratulations on finishing this tutorial! You have learned how to deploy a smart contract to the Polygon Mumbai testnet using HardHat. You also learned how to create and deploy a subgraph for the smart contract on Subgraph Studio.

# About the Author

I'm Robin Thomas, a blockchain enthusiast with few years of experience working with various blockchain protocols. Feel free to connect with me on [GitHub](https://github.com/robin-thomas).


Learn how to deploy a Solidity smart contract to Polygon Mumbai testnet using HardHat, then create and deploy its subgraph to the Subgraph Studio

Deploy a subgraph for a Polygon smart contract

🎓 Pathway complete!

# Introduction

Most dapps span across multiple smart contracts with many of them being created dynamically. This tutorial demonstrates how to build a subgraph for a complex multi smart contract dapp with contracts deployed at runtime.

It uses the Uniswap AMM market contracts as an example as the reader might be familiar with it. We will start with the factory contract which deploys Uniswap pairs and then use events to be able to add the newly created pairs to our subgraph.

![Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph.png)


# Prerequisites

To successfully complete this tutorial, you will need to have a basic understanding of Ethereum, Solidity, the Graph and Uniswap ecosystem.

# Requirements

As the previous tutorial, to complete this tutorial, you will need the Graph CLI installed: https://www.npmjs.com/package/@graphprotocol/graph-cli

# Creating a Graph Project

After you have graph-cli installed, you can create a new subgraph using the `graph init command`

```text
graph init uni-subgraph
```

For newer Macbooks you might need `yarn exec graph init uni-subgraph` depending upon your system permissions.

![Init](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graphinit.png)

For the network, select mainnet. The contract address for Uniswap Factory Contract is "0x5C69bEe701ef814a2B6a3EDD4B1652CB9cc5aA6f" and it remains the same across all test networks as well.

Graph will fetch the ABI of this contract for you and also initialize some of the files.

# Uniswap Pair Creation and Volume Tracking

In this tutorial, we are going to keep track of the reserves of tokens in Uniswap pairs.
As you know, pairs in Uniswap are created dynamically by the factory contract. The factory contract deploys the pair contract and then users can add liquidity to these contracts. Since the pair contract address is not known in advance, we will be dynamically taking the address of the pairs from the events emitted by the Factory contract. Whenever a new pair is created PairCreated event is emitted. We will be listening to this event and add the new pair contracts as data sources when they are created.

![Uniswap Diagram](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graphuniswap.png)

# Downloading the ABIs

For this tutorial you will also need the ABI (Application Binary Interface) of the pair contract, as we will be listening to events in the pair contracts as well as the factory contract. The official ABIs are aviailable [here](https://github.com/Uniswap/v2-subgraph/blob/master/abis/pair.json).

# Defining the Data Schema

We must define the schema of the data that we want to index. This is done in the `schema.graphql` file

```graphql
type Pair @entity {
  id: ID!
  count: BigInt!
  token0: Bytes! # address
  token1: Bytes! # address
  reserve0: BigInt!
  reserve1: BigInt!
}
```

The pair entity represents one token pair and maps directly to a single smart contract on ethereum.
`ID` - The address of the pair contract
`count` - The number of times this pair had liquidity added to it (uses the PairCreated event)
`token0` - The address of first token
`token1` - The address of second token
`reserve0` - The total reserves of first token in the pair contract
`reserve1` - The total reserves of second token in the pair contract


# Creating the Subgraph Config File

We will start with the `subgraph.yaml` file. The Graph CLI will automatically initialize some settings for you in this file. This information will be taken from the ABI that it will download from Etherscan. We will add the factory contract as a datasource. This is how it will look:

```yaml
specVersion: 0.0.2
schema:
  file: ./schema.graphql
dataSources:
  - kind: ethereum/contract
    name: UniswapFactory
    network: mainnet
    source:
      address: "0x5C69bEe701ef814a2B6a3EDD4B1652CB9cc5aA6f"
      abi: UniswapFactory
      startBlock: 13081816
    mapping:
      kind: ethereum/events
      apiVersion: 0.0.5
      language: wasm/assemblyscript
      entities:
        - PairCreated
      abis:
        - name: UniswapFactory
          file: ./abis/UniswapFactory.json
      eventHandlers:
        - event: PairCreated(indexed address,indexed address,address,uint256)
          handler: handlePairCreated
      file: ./src/mapping.ts
```

For this tutorial we will set the start block to a recent value. This is so that we can quickly test our graph in the graph studio. It can take many hours to index all the pairs in the entire ethereum chain.

For this tutorial we will set the start block to a recent value. This is so that we can quickly test our graph in the graph studio. Without specifying a recent block height to start from, it can take a very long time to index all of the token pairs in the entire Ethereum chain.

Put the address of the smart contract, the startBlock and the ABI in the source field.

In the mapping section, we will be listening to the PairCreated event, so we need to mention it in the entities section as well as the ABIs we will be using.

In the eventHandlers, add the event as in the ABI and then the handler. This is the AssemblyScript function which will create new pairs and add them as data source.

Since we will only know the address of the pair when the PairCreated event is emitted, we will have to create a datasource Template. This template is like a skeleton for each pair and it will be initialized dynamically using AssemblyScript.

```yaml
templates:
  - kind: ethereum/contract
    name: Pair
    network: mainnet
    source:
      abi: Pair
    mapping:
      kind: ethereum/events
      apiVersion: 0.0.5
      language: wasm/assemblyscript
      file: ./src/mapping.ts
      entities:
        - Pair
      abis:
        - name: Pair
          file: ./abis/Pair.json
        - name: UniswapFactory
          file: ./abis/UniswapFactory.json
      eventHandlers:
        - event: Sync(uint112,uint112)
          handler: handleSync
```

Notice that the format for template is exactly the same as a normal datasource but it does not have the source contract and address which binds it to a specific instance.

For the purposes of this tutorial, we will be handling the `Sync` event which provides the reserves of both tokens in the pair contract. It is fired every time a swap or other operation happens in the pair contract.

# Generating Types

Before writing the assemblyscript mapping file, we will need to generate the types for the contracts and data sources. You can do this using:-

```text
yarn codegen
```

```text
$ graph codegen
  Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
  Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
  Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
  Skip migration: Bump mapping apiVersion from 0.0.4 to 0.0.5
  Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
  Load contract ABI from abis/UniswapFactory.json
✔ Load contract ABIs
  Generate types for contract ABI: UniswapFactory (abis/UniswapFactory.json)
  Write types to generated/UniswapFactory/UniswapFactory.ts
✔ Generate types for contract ABIs
  Generate types for data source template Pair
  Write types for templates to generated/templates.ts
✔ Generate types for data source templates
  Load data source template ABI from abis/Pair.json
  Load data source template ABI from abis/UniswapFactory.json
✔ Load data source template ABIs
  Generate types for data source template ABI: Pair > Pair (abis/Pair.json)
  Write types to generated/templates/Pair/Pair.ts
  Generate types for data source template ABI: Pair > UniswapFactory (abis/UniswapFactory.json)
  Write types to generated/templates/Pair/UniswapFactory.ts
✔ Generate types for data source template ABIs
✔ Load GraphQL schema from schema.graphql
  Write types to generated/schema.ts
✔ Generate types for GraphQL schema

Types generated successfully

✨  Done in 2.09s.
```

This should create a generated folder with all the generated types.


# Write AssemblyScript Mapping

In the mapping file, we need to write two functions. One for handling new Pair and one for handling the `Sync` event of each pair. Let's start with the `handleNewPair` Event. Let's import the types from the generated folder as well the `BigInt` type:

```typescript
import { BigInt } from "@graphprotocol/graph-ts"
import { Pair } from "../generated/schema"
import {
  PairCreated
} from "../generated/UniswapFactory/UniswapFactory"
import {
  Pair as PairTemplate
} from "../generated/templates"
```

Notice that the datasource template is also called Pair, the same as our graphql schema type. So we import it as PairTemplate.

```typescript
export function handlePairCreated(event: PairCreated): void {
  // Entities can be loaded from the store using a string ID; this ID
  // needs to be unique across all entities of the same type
  let pair = Pair.load(event.transaction.from.toHex())

  // Entities only exist after they have been saved to the store;
  // `null` checks allow to create entities on demand
  if (!pair) {
    pair = new Pair(event.transaction.from.toHex())

    // Entity fields can be set using simple assignments
    pair.count = BigInt.fromI32(0)

    //set reserves to 0
    pair.reserve0 = BigInt.fromI32(0)
    pair.reserve1 = BigInt.fromI32(0)
  }

  pair.count = pair.count + BigInt.fromI32(1)

  //  fields can be set based on event parameters
  pair.token0 = event.params.token0
  pair.token1 = event.params.token1

  PairTemplate.create(event.params.pair)
  // Entities can be written to the store with `.save()`
  pair.save()

}
```

Let's look at each line of our function. The first line tries to load the Pair from the subgraph. If the Pair is null, it will then create a new Pair with the address taken from the event. Since our datatype is an `ID`, we need to use the `toHex()` function to convert it into an `ID` type. The `BigInt.fromI32(0)` initializes `count` to 0.

Next we simply store the address of the tokens taken from the event params into our token values.

For now we simply set the reserves to 0, as it is not possible to get the reserves from the PairCreated Event.

The line `PairTemplate.create(event.params.pair)` is crucial. Without this, the subgraph will not know that it has to start listening to events from this smart contract. It adds the Pair at `event.params.pair` as a datasource.

For the `handleSync` Event, we first import the required types.

```typescript
import {
  Sync
} from "../generated/templates/Pair/Pair"
```

Then in the `handleSync` function, we simply update the reserves from the Sync event. If you notice in our ABI the event has uint112 as the type of the reserve, so we have to typecast it to BigInt.

```typescript
export function handleSync(event: Sync): void {
    
    let pair = Pair.load(event.address.toHex())
     
    if(pair) {
      pair.reserve0 = BigInt.fromI32(event.params.reserve0.toI32())
      pair.reserve1 = BigInt.fromI32(event.params.reserve1.toI32())
      pair.save()
    }
}

```

# Deploying the Subgraph

Now we are ready to deploy our subgraph. To deploy the subgraph to the graph, we will first deploy it to graph studio and test it.

For this we will need to go to the studio https://thegraph.com/studio/ and get the deploy key.

From the subgraph studio, copy the deploy key from the dashboard.

In the cli, now you can authenticate using the following command.

```text
graph auth --product subgraph-studio uni-subgraph
```

After authentication is done, you can deploy your graph to subgraph studio.

```text
yarn deploy
```

You can now enter any version you like in the `vmajor.minor.patch` format. You should see the subgraph deployment success on your terminal.

```text
yarn run v1.22.10
$ graph deploy --node https://api.studio.thegraph.com/deploy/ uni-subgraph
✔ Version Label (e.g. v0.0.1) · v0.1.0
  Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
  Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
  Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
  Skip migration: Bump mapping apiVersion from 0.0.4 to 0.0.5
  Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
  Compile data source: UniswapFactory => build/UniswapFactory/UniswapFactory.wasm
  Compile data source template: Pair => build/UniswapFactory/UniswapFactory.wasm (already compiled)
✔ Compile subgraph
  Copy schema file build/schema.graphql
  Write subgraph file build/UniswapFactory/abis/UniswapFactory.json
  Write subgraph file build/Pair/abis/Pair.json
  Write subgraph file build/Pair/abis/UniswapFactory.json
  Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
  Add file to IPFS build/schema.graphql
                .. QmNYFqNjWcJBskJXf5uaKjfWLyWv6dHoGign8zY38Hxp4p
  Add file to IPFS build/UniswapFactory/abis/UniswapFactory.json
                .. QmZ55G1yYFzde8Vcq4cpLfNgPSEibpLi9aYCqS1jEvCKQ9
  Add file to IPFS build/UniswapFactory/UniswapFactory.wasm
                .. QmRQ5iRV3JqkY6W9L16pANppNbhEa19KK2p5KC7LHnPjD7
  Add file to IPFS build/Pair/abis/Pair.json
                .. QmbPLMADBP8L6LBVP3ZBQ8RgG7ghamD8DvbdUxHAjZrLgm
  Add file to IPFS build/Pair/abis/UniswapFactory.json
                .. QmZ55G1yYFzde8Vcq4cpLfNgPSEibpLi9aYCqS1jEvCKQ9 (already uploaded)
  Add file to IPFS build/UniswapFactory/UniswapFactory.wasm
                .. QmRQ5iRV3JqkY6W9L16pANppNbhEa19KK2p5KC7LHnPjD7 (already uploaded)
✔ Upload subgraph to IPFS

Build completed: QmZHBED1WzxvEeCNySwJ8FoQVwGsb3CABByLNbRPyiPGMo

Deployed to https://thegraph.com/studio/subgraph/uni-subgraph

Subgraph endpoints:
Queries (HTTP):     https://api.studio.thegraph.com/query/4570/uni-subgraph/v0.1.0
Subscriptions (WS): https://api.studio.thegraph.com/query/4570/uni-subgraph/v0.1.0
```

You can now go to https://thegraph.com/studio/subgraph/uni-subgraph/ to play with your subgraph. You should see a `syncing` status and you can start making queries once the progress reaches 100. 

![Playground](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graphplayground.png)


# Conclusion

Congratulations on finishing this tutorial! You learned how to create a subgraph for a dapp with multiple smartcontracts and how to add smartcontracts to your subgraph that are dynamically created.

# About the Author

I'm Mohit Jandwani, a crypto investor and software engineer. I teach about how to generate passive income from crypto on my [Youtube Channel](https://www.youtube.com/c/DefiMasterClass). Feel free to connect with me on [Twitter](https://twitter.com/mohitjandwani).



Learn how to build a subgraph for a complex dApp that uses multiple smart contracts, like Uniswap

Creating subgraphs for multiple smart contracts

# Introduction
In this tutorial we'll take a look at how to setup matchstick and write unit tests for the MasterChefV2 subgraph.  
This tutorial will typically show a call to action in the form of a codebox.  
Please note that if you need help with or would like to explore the usage of any command referenced in this tutorial, add the `--help` flag after the command.  
 
# Prerequisites
- Basic familiarity with a command-line interface.
- Basic familiarity with Git & GitHub.
- Basic familiarity with how TheGraph works.
- Basic understanding of why [unit-tests](https://en.wikipedia.org/wiki/Unit_testing) are important.

# Requirements
The following software must be installed:
- [nodejs](https://nodejs.org/en/) v14+ (a minimum of 14.17.6 LTS is recommended)
- [curl](https://curl.se/)
- [git](https://git-scm.com/)
- [yarn](https://yarnpkg.com/)
- [mustache](https://mustache.github.io/)

Getting the SushiSwap Subgraph 

```text
git clone https://github.com/sushiswap/sushiswap-subgraph
``` 

SushiSwap has a couple of different subgraphs. For this tutorial, we will go through the MasterChefV2 subgraph. 

```text
cd sushiswap-subgraph/subgraphs/masterchefV2
```  
# Getting Started

We will begin by installing and building the MasterChefV2 SushiSwap subgraph. From the root directory of the cloned repository, run yarn to install the dependencies:  

```text
yarn
``` 

This will output something similar:  

```text
yarn install v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 51.76s.
```  

Next, we will use a script from `package.json` to load the configurations into subgraph.yaml. Run the command:  

```text
yarn prepare:mainnet
```  

Your output should be:  

```text
yarn run v1.22.11
mustache config/mainnet.json template.yaml > subgraph.yaml
Done in 0.09s.
```  

Then, we will generate the classes needed for the subgraph to work correctly. 

```text
yarn codegen
```  

Your output should look like:  

```text
✔ Generate types for contract ABIs
  Generate types for data source template CloneRewarderTime
  Generate types for data source template StakingRewardsSushi
  Write types for templates to generated/templates.ts
✔ Generate types for data source templates
  Load data source template ABI from packages/abis/CloneRewarderTime.json
  Load data source template ABI from packages/abis/StakingRewardsSushi.json
✔ Load data source template ABIs
  Generate types for data source template ABI: CloneRewarderTime > CloneRewarderTime (packages/abis/CloneRewarderTime.json)
  Write types to generated/templates/CloneRewarderTime/CloneRewarderTime.ts
  Generate types for data source template ABI: StakingRewardsSushi > StakingRewardsSushi (packages/abis/StakingRewardsSushi.json)
  Write types to generated/templates/StakingRewardsSushi/StakingRewardsSushi.ts
✔ Generate types for data source template ABIs
✔ Load GraphQL schema from schema.graphql
  Write types to generated/schema.ts
✔ Generate types for GraphQL schema

Types generated successfully

Done in 2.04s.
```  

**There's an issue with capitalization in this file: 
`sushiswap-subgraph/subgraphs/masterchefV2/src/entities/user.ts`**  
You will need to change line 4 of this file to the following:  

```typescript
import { getMasterChef } from './masterchef'
```  

Lastly, we will build the subgraph.

```text
yarn build
```  
The final line of your output should be:  

```text
Build completed: /home/user/sushiswap-subgraph/subgraphs/masterchefV2/build/subgraph.yaml
```  

# Installing the matchstick testing framework

Follow the [installation instructions](https://github.com/LimeChain/matchstick) for matchstick.  
I'm using Ubuntu 20.04 so this is the command I will use.  

```text
curl -OL https://github.com/LimeChain/matchstick/releases/download/0.1.2/binary-linux-20 && mv binary-linux-20 matchstick && chmod a+x matchstick
```  

**Install postgressql**  

Install postgressql, it is required for our testing framework.  

```text 
sudo apt install postgresql
```  

**Install matchstick helpers**

Now we can install the matchstick helpers, with the command: 

```
yarn add matchstick-as
```  

To check that matchstick is working correctly, use the command:  
```text
./matchstick --help
```  

This should output: 

```text
Matchstick 🔥 0.1.2
Limechain <https://limechain.tech>
Unit testing framework for Subgraph development on The Graph protocol.

USAGE:
    matchstick <DATASOURCE>

FLAGS:
    -h, --help       Prints help information
    -V, --version    Prints version information

ARGS:
    <DATASOURCE>    Sets the name of the datasource to use.
```  

# Creating Tests

Create a folder in the current directory called `tests`:

```text
mkdir tests && cd tests && touch masterchefV2.test.ts
``` 

> If you're using Microsoft Windows, you can use this command instead 
> ```text
> mkdir tests && cd tests && type nul > masterchefV2.test.ts
> ```  

Your test file (`masterchefV2.test.ts`) should have the same name as the mapping file:

```yaml
dataSources:
  - kind: ethereum/contract
    name: MasterChefV2
    network: {{ network }}
    source:
      address: '{{ address }}'
      abi: MasterChefV2
      startBlock: {{ startBlock }}
    mapping:
      kind: ethereum/events
      apiVersion: 0.0.4
      language: wasm/assemblyscript
      file: ./src/mappings/masterchefV2.ts # This line right here!
```  

Now we can create a simple test case to see if empty tests work. Write the following code in `masterchefV2.test.ts`:

```typescript
import { clearStore, test, assert, newMockEvent } from "matchstick-as/assembly/index";
export function runTests(): void {
  test("EmptyTest", () => {
  }
}
```  

Add the export to the file `src/masterchefV2.ts` at the end of the file:  

```typescript
export { runTests } from '../../tests/masterchefV2.test'
```  

> **Known issue**  
> When runTests() is imported in the mappings file, the deployment to the hosted service will break. For now, it's required to remove/comment out the import.

Now it is time to run the unit testing framework:

```text
yarn build && ./matchstick MasterChefV2
```  

You should see similar output:  

```text
Build completed: /home/user/sushiswap-subgraph/subgraphs/masterchefV2/build/subgraph.yaml

Done in 4.16s.

___  ___      _       _         _   _      _
|  \/  |     | |     | |       | | (_)    | |
| .  . | __ _| |_ ___| |__  ___| |_ _  ___| | __
| |\/| |/ _` | __/ __| '_ \/ __| __| |/ __| |/ /
| |  | | (_| | || (__| | | \__ \ |_| | (__|   <
\_|  |_/\__,_|\__\___|_| |_|___/\__|_|\___|_|\_\
                                                
Igniting tests 🔥

✅ EmptyTest

All tests passed! 😎
1 tests executed in 18.472016ms.
```  

# Understanding the SushiSwap subgraph

- MasterChefV2 is a contract at ```0xEF0881eC094552b2e128Cf945EF17a6752B4Ec5d```.
- Refer to template.yaml for the ```eventHandlers``` that are hooked.  

```yaml
eventHandlers:
    - event: Deposit(indexed address,indexed uint256,uint256,indexed address)
        handler: deposit
    - event: Withdraw(indexed address,indexed uint256,uint256,indexed address)
        handler: withdraw
    - event: EmergencyWithdraw(indexed address,indexed uint256,uint256,indexed address)
        handler: emergencyWithdraw
    - event: Harvest(indexed address,indexed uint256,uint256)
        handler: harvest
    - event: LogPoolAddition(indexed uint256,uint256,indexed address,indexed address)
        handler: logPoolAddition
    - event: LogSetPool(indexed uint256,uint256,indexed address,bool)
        handler: logSetPool
    - event: LogUpdatePool(indexed uint256,uint64,uint256,uint256)
        handler: logUpdatePool
```  

This is the list of functions that should be tested. For this tutorial, we will go through the deposit event handler function.  

# Testing the Deposit Function

**SushiSwap's Deposit ABI**

From the handler function in SushiSwap, we know that the handler function looks like this: 

```js
export function deposit(event: Deposit): void { ... }
```  

How does the `(event: Deposit)` part of the code work? Let's take a closer look:  

From the EventHandler, we know that the signature of the function looks like this:

```yaml
eventHandlers:
- event: Deposit(indexed address,indexed uint256,uint256,indexed address)
    handler: deposit
```  

We then look at the ABI that is in the package (`build/MasterChefV2/packages/abis/MasterChefV2.json
`) to figure out the function signature.

```json
  {
    "anonymous": false,
    "inputs": [
      {
        "indexed": true,
        "internalType": "address",
        "name": "user",
        "type": "address"
      },
      {
        "indexed": true,
        "internalType": "uint256",
        "name": "pid",
        "type": "uint256"
      },
      {
        "indexed": false,
        "internalType": "uint256",
        "name": "amount",
        "type": "uint256"
      },
      {
        "indexed": true,
        "internalType": "address",
        "name": "to",
        "type": "address"
      }
    ],
    "name": "Deposit",
    "type": "event"
  }
``` 

From the above, we know the signature of the DepositEvent looks like this:

```js
DepositEvent(userAddress:string, pid:BigInt, amount:BigInt, toAddress:string)
```  

So, to create a deposit event we need 4 parameters:

```js
function createDepositEvent(userAddress:string, pid:BigInt, amount:BigInt, toAddress:string): Deposit {
  // Create the Deposit Event -- Remember to Import
  let depositEvent = new Deposit();

  // Create the array of parameters...
  depositEvent.parameters = new Array();

  // Fill up the parameters in the correct order...
  let userAddressParam = new ethereum.EventParam();
  userAddressParam.value = ethereum.Value.fromAddress(Address.fromString(userAddress));
  let pidParam = new ethereum.EventParam();
  pidParam.value = ethereum.Value.fromUnsignedBigInt(pid);
  let amountParam = new ethereum.EventParam();
  amountParam.value = ethereum.Value.fromUnsignedBigInt(amount);
  let toAddressParam = new ethereum.EventParam();
  toAddressParam.value = ethereum.Value.fromAddress(Address.fromString(toAddress));

  // Add the parameters to the array
  depositEvent.parameters.push(userAddressParam);
  depositEvent.parameters.push(pidParam);
  depositEvent.parameters.push(amountParam);
  depositEvent.parameters.push(toAddressParam);
  return depositEvent;
}
```  

Then, we write a test case:

```js
test("Deposit Test", () => {
    // DepositEvent Signature
    // Deposit(indexed address,indexed uint256,uint256,indexed address)

    // Create a mockEvent
    let depositEvent = newMockEvent(createDepositEvent("0x89205A3A3b2A69De6Dbf7f01ED13B2108B2c43e7", BigInt.fromString("1000"), BigInt.fromString("2000"), "0x89205A3A3b2A69De6Dbf7f01ED13B2108B2c43e7")) as Deposit;

    // Let the Handler Run the Event
    deposit(depositEvent);

    // Check for Logic Correctness
    assert.fieldEquals("Pool", "1000", "id", "1000");
  });
```  

Lastly, we check if the logic works correctly:

```js
export function deposit(event: Deposit): void {
  log.info('[MasterChefV2] Log Deposit {} {} {} {}', [
    event.params.user.toHex(),
    event.params.pid.toString(),
    event.params.amount.toString(),
    event.params.to.toHex()
  ])

  const masterChef = getMasterChef(event.block)
  const pool = getPool(event.params.pid, event.block) // getPool is called here!
  const user = getUser(event.params.to, event.params.pid, event.block)

  pool.slpBalance = pool.slpBalance.plus(event.params.amount)
  pool.save()

  user.amount = user.amount.plus(event.params.amount)
  user.rewardDebt = user.rewardDebt.plus(event.params.amount.times(pool.accSushiPerShare).div(ACC_SUSHI_PRECISION))
  user.save()
}
```

In the deposit handler function, we can see that there are calls to getPool. In the getPool function, we see that a Pool entity is created:

```js
export function getPool(pid: BigInt, block: ethereum.Block): Pool {
  const masterChef = getMasterChef(block)

  let pool = Pool.load(pid.toString()) // pid is saved here!

  if (pool === null) {
    pool = new Pool(pid.toString())
    pool.masterChef = masterChef.id
    pool.pair = ADDRESS_ZERO
    pool.allocPoint = BIG_INT_ZERO
    pool.lastRewardBlock = BIG_INT_ZERO
    pool.accSushiPerShare = BIG_INT_ZERO
    pool.slpBalance = BIG_INT_ZERO
    pool.userCount = BIG_INT_ZERO
  }

  pool.timestamp = block.timestamp
  pool.block = block.number
  pool.save()

  return pool as Pool
}
``` 

Since the Pool object saves the input of pid into its id, we can check if the id of the pool created during the deposit function matches the pid:

```js
// This function takes in 4 variables: (GraphObjectName, GraphObjectID, GraphObjectParamName, GraphObjectParamValue)
assert.fieldEquals("Pool", "1000", "id", "1000");
```  

Run the tests again and you can see that our newly created test passes! 

```text
yarn build && ./matchstick MasterChefV2
```  

Your output should look like this:  

```text
Build completed: /home/user/sushiswap-subgraph/subgraphs/masterchefV2/build/subgraph.yaml

Done in 4.16s.

___  ___      _       _         _   _      _
|  \/  |     | |     | |       | | (_)    | |
| .  . | __ _| |_ ___| |__  ___| |_ _  ___| | __
| |\/| |/ _` | __/ __| '_ \/ __| __| |/ __| |/ /
| |  | | (_| | || (__| | | \__ \ |_| | (__|   <
\_|  |_/\__,_|\__\___|_| |_|___/\__|_|\___|_|\_\
                                                
Igniting tests 🔥

✅ EmptyTest
✅ Deposit Test
INFO [MasterChefV2] Log Deposit 0x89205a3a3b2a69de6dbf7f01ed13b2108b2c43e7 1000 2000 0x89205a3a3b2a69de6dbf7f01ed13b2108b2c43e7

All tests passed! 😎
2 tests executed in 21.93132ms.
```  

Here's the finalized `masterchefV2.test.ts`, in case you couldn't get it to work:

```js
import { Address, ethereum, BigInt } from "@graphprotocol/graph-ts";
import { clearStore, test, assert, newMockEvent } from "matchstick-as/assembly/index";

import {
  Deposit,
} from '../generated/MasterChefV2/MasterChefV2'
import { deposit } from "../src/mappings/masterchefV2";

function createDepositEvent(userAddress:string, pid:BigInt, amount:BigInt, toAddress:string): Deposit {
  // Create the Deposit Event -- Remember to Import
  let depositEvent = new Deposit();

  // Create the array of parameters...
  depositEvent.parameters = new Array();

  // Fill up the parameters in the correct order...
  let userAddressParam = new ethereum.EventParam();
  userAddressParam.value = ethereum.Value.fromAddress(Address.fromString(userAddress));
  let pidParam = new ethereum.EventParam();
  pidParam.value = ethereum.Value.fromUnsignedBigInt(pid);
  let amountParam = new ethereum.EventParam();
  amountParam.value = ethereum.Value.fromUnsignedBigInt(amount);
  let toAddressParam = new ethereum.EventParam();
  toAddressParam.value = ethereum.Value.fromAddress(Address.fromString(toAddress));

  // Add the parameters to the array
  depositEvent.parameters.push(userAddressParam);
  depositEvent.parameters.push(pidParam);
  depositEvent.parameters.push(amountParam);
  depositEvent.parameters.push(toAddressParam);
  return depositEvent;
}

export function runTests(): void {
  test("EmptyTest", () => {
    });
  
  test("Deposit Test", () => {
    // DepositEvent Signature
    // Deposit(indexed address,indexed uint256,uint256,indexed address)

    // Create a mockEvent
    let depositEvent = newMockEvent(createDepositEvent("0x89205A3A3b2A69De6Dbf7f01ED13B2108B2c43e7", BigInt.fromString("1000"), BigInt.fromString("2000"), "0x89205A3A3b2A69De6Dbf7f01ED13B2108B2c43e7")) as Deposit;

    // Let the Handler Run the Event
    deposit(depositEvent);

    // Check for Logic Correctness
    assert.fieldEquals("Pool", "1000", "id", "1000");
  });
}
```  

# Conclusion

1. We went through how to setup, prepare and build the MasterChefV2 Subgraph.
2. We went through how to install matchstick for unit testing.
3. We went through how to figure out the parameters for the ethereum events.
4. We went through how to write a simple unit test for the deposit function.

# Next Steps

1. Try changing `assert.fieldEquals("Pool", "1000", "id", "1000");` to make the test fail! What happens?
2. What other tests cases can you think of? Try writing more unit tests.

# About the author

- This tutorial was created by Anton Yip. He can be found on [Github](https://github.com/antonyip).

# References

- https://github.com/sushiswap/sushiswap-subgraph
- https://github.com/LimeChain/matchstick


Learn how to write unit tests for subgraphs with matchstick

Writing Unit Tests for Subgraphs

We no longer host the Pathway pages on this website, the content has moved to the `learn-web3-dapp` repository at <https://github.com/figment-networks/learn-web3-dapp#-get-started>.

For less experienced developers or for anyone who wants to dive in without complicated setup, **[we recommend using Gitpod](https://gitpod.io/#https://github.com/figment-networks/learn-web3-dapp)** to work with the `learn-web3-dapp` project (this requires you to have a GitHub account to sign in). Gitpod can save you a considerable amount of time, as you don't have to install dependencies or set up a development environment - everything just works!

If you are an experienced developer, [cloning the repo locally](https://github.com/figment-networks/learn-web3-dapp#-clone-locally) is still possible, however you might encounter various system configuration issues depending on how your local environment is set up. A minimum of NodeJS version 14.17 is recommended, and you'll want to make sure you have the `build-essential` package installed. You'll also want to make sure your Rust toolchain is up to date and that you have the `wasm32-unknown-unknown` target triple set up and installed.


You can now access The Graph + NEAR Pathway on our GitHub repo.

The Graph + NEAR Pathway has moved to learn-web3-dapp

# Introduction

In this tutorial you will learn how to deploy a Solidity smart contract to the Ethereum Rinkeby testnet using HardHat, then create and deploy its subgraph to the Subgraph Studio.

![Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph.png)

Topics covered in this tutorial:

- Deploying the smart contract to Rinkeby testnet using Hardhat
- Creating a subgraph in the Subgraph Studio
- Downloading the contract abi and then creating a subgraph from it
- Deploying the subgraph to Subgraph Studio

# Prerequisites

To successfully complete this tutorial, you will need to have a basic understanding of Ethereum, Solidity, and the NodeJS ecosystem.

You will also need some Rinkeby Ether in your Metamask wallet. Follow the instructions below:

- Login to your Twitter account at <https://twitter.com/>
- Tweet the following: `Requesting funds into <YOUR RINKEBY WALLET ADDRESS> on the #Rinkeby #Ethereum test network.`
- Go to <https://faucet.rinkeby.io/>, and paste the link to your tweet
- Click on the `Give me Ether` button
- You shall receive some Rinkeby Ether once your transaction is mined

# Requirements

- You will need Metamask installed in your browser. You can install it from <https://metamask.io/>
- You need to have a recent version of Node.js installed. We recommend using v14.17.6 LTS for compatibility.

# Project setup

Run these commands to install the yarn package manager and the graph CLI globally. These are required to build and deploy your subgraph.

```text
npm i -g yarn @graphprotocol/graph-cli
```

Then run the following commands to create a new directory called vendingMachine, create a new yarn package inside it, and then install HardHat as a dev-dependency of the project (meaning that it is a package that is only needed for local development and testing).

```text
mkdir vendingMachine
cd vendingMachine
yarn init --yes
yarn add --dev hardhat
```

Then run `npx hardhat` to initialize the HardHat project. This will output:

```text
888    888                      888 888               888
888    888                      888 888               888
888    888                      888 888               888
8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
888    888 .d888888 888    888  888 888  888 .d888888 888
888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888

Welcome to Hardhat v2.6.4

? What do you want to do? …
▸ Create a basic sample project
  Create an advanced sample project
  Create an empty hardhat.config.js
  Quit
```

Select "Create an empty hardhat.config.js" by scrolling down the menu with the arrow keys on your keyboard and press Enter. This will create a `hardhat.config.js` file in the root of the vendingMachine directory, with the following contents:

```javascript
/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.7.3",
};
```

The following command will install the HardHat plugins necessary to compile and deploy your contract:

```text
yarn add --dev @nomiclabs/hardhat-ethers ethers @nomiclabs/hardhat-waffle
```

# Writing the smart contract

Create a new directory called `contracts` inside the `vendingMachine` directory, then create a file inside the `contracts` directory called `VendingMachine.sol`.

Paste this Solidity code into that file:

```javascript
// SPDX-License-Identifier: MIT

pragma solidity 0.7.3;

contract VendingMachine {

    // Store the owner of this smart contract
    address owner;

    // A mapping is a key/value store. Here we store cupcake balance of this smart contract.
    mapping (address => uint) cupcakeBalances;

    // Events are necessary for The Graph to create entities
    event Refill(address owner, uint amount, uint remaining, uint timestamp, uint blockNumber);
    event Purchase(address buyer, uint amount, uint remaining, uint timestamp, uint blockNumber);

    // When 'VendingMachine' contract is deployed:
    // 1. set the deploying address as the owner of the contract
    // 2. set the deployed smart contract's cupcake balance to 100
    constructor() {
        owner = msg.sender;
        cupcakeBalances[address(this)] = 100;
    }

    // Allow the owner to increase the smart contract's cupcake balance
    function refill(uint amount) public onlyOwner {
        cupcakeBalances[address(this)] += amount;
        emit Refill(owner, amount, cupcakeBalances[address(this)], block.timestamp, block.number);
    }

    // Allow anyone to purchase cupcakes
    function purchase(uint amount) public payable {
        require(msg.value >= amount * 0.01 ether, "You must pay at least 0.01 ETH per cupcake");
        require(cupcakeBalances[address(this)] >= amount, "Not enough cupcakes in stock to complete this purchase");
        cupcakeBalances[address(this)] -= amount;
        cupcakeBalances[msg.sender] += amount;
        emit Purchase(msg.sender, amount, cupcakeBalances[address(this)], block.timestamp, block.number);
    }

    // Function modifiers are used to modify the behaviour of a function.
    // When "onlyOwner" modifier is added to a function, only the owner of this smart contract can execute that function.
    modifier onlyOwner {
        // Verifying that the owner is same as the one who called the function.
        require(msg.sender == owner, "Only owner callable");

        // This underscore character is called the "merge wildcard".
        // It will be replaced with the body of the function (to which we added the modifier),
        _;
    }
}

```

# Compiling the smart contract

To compile the smart contract via HardHat (which will still use the solc compiler), run:

```text
npx hardhat compile
```

Assuming there are no errors or warnings, this will output:

```text
Compiling 1 file with 0.7.3
Compilation finished successfully
```

The `VendingMachine.sol` smart contract has now been compiled successfully.

# Deploying the smart contract

To deploy to the Ethereum Rinkeby testnet with HardHat, you need to add a network entry to your `hardhat.config.js` file:

```javascript
require("@nomiclabs/hardhat-waffle");

// Replace this private key with your Rinkeby account private key
const RINKEBY_PRIVATE_KEY = "YOUR RINKEBY_PRIVATE_KEY";

module.exports = {
  solidity: "0.7.3",
  networks: {
    rinkeby: {
      url: `https://rinkeby-light.eth.linkpool.io/`,
      accounts: [`0x${RINKEBY_PRIVATE_KEY}`],
    },
  },
};
```

To get your `RINKEBY_PRIVATE_KEY`, open your browser and open Metamask. Make sure **Rinkeby Test Network** is selected. Go to Account details, and click on `Export Private Key`.

**Never ever share your private key with anyone!**

Create a directory called `scripts`, and paste the below code into a new file `deploy.js` inside scripts directory.

```javascript
async function main() {
  const [deployer] = await ethers.getSigners();

  console.log("Deploying contracts with the account:", deployer.address);

  console.log("Account balance:", (await deployer.getBalance()).toString());

  const VendingMachine = await ethers.getContractFactory("VendingMachine");
  const vendingMachine = await VendingMachine.deploy();

  console.log("Contract address:", vendingMachine.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });
```


Finally, run:

```text
npx hardhat run scripts/deploy.js --network rinkeby
```

This will output:

```text
Deploying contracts with the account: <YOUR RINKEBY WALLET ADDRESS>
Account balance: <YOUR RINKEBY WALLET BALANCE>
Contract address: <YOUR RINKEBY SMART CONTRACT ADDRESS>
```

Yay! You just deployed your smart contract successfully to Rinkeby testnet!

We will need the smart contract address later.

# Creating the project in Subgraph Studio

First, you will want to head over to the Subgraph Studio at <https://thegraph.com/studio/>.

![Login to Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_connect.png)

Click on the **Connect Wallet** button. Choose a Metamask wallet to login with. Once you are authenticated, you shall see the below screen, where you can create your first subgraph.

![Create your first subgraph](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_create_subgraph.png)

Next, you need to give your subgraph a name. Give the name as **vending**. Once that's done, you will see this screen:

![Subgraph dashboard](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_subgraph_created.png)

On this screen, you can see details about the subgraph like your deploy key, the subgraph slug and status.

# Creating the subgraph

Run the following command to create the subgraph by downloading the contract ABI from the Rinkeby testnet. A new directory called `vending` will be created, and all node dependencies will be installed automatically.

```text
graph init --contract-name VendingMachine --index-events --studio --from-contract <YOUR RINKEBY SMART CONTRACT ADDRESS> --network rinkeby vending
```

Replace with your deployed VendingMachine smart contract address from above.

This will output:

```text
✔ Subgraph slug · vending
✔ Directory to create the subgraph in · vending
✔ Ethereum network · rinkeby
✔ Contract address · <YOUR RINKEBY SMART CONTRACT ADDRESS>
✔ Fetching ABI from Etherscan
✔ Contract Name · VendingMachine
———
  Generate subgraph from ABI
  Write subgraph to directory
✔ Create subgraph scaffold
✔ Initialize subgraph repository
✔ Install dependencies with yarn
✔ Generate ABI and schema types with yarn codegen

Subgraph vending created in vending

Next steps:

  1. Run `graph auth` to authenticate with your deploy key.

  2. Type `cd vending` to enter the subgraph.

  3. Run `yarn deploy` to deploy the subgraph.

Make sure to visit the documentation on https://thegraph.com/docs/ for further information.
```

It shall create three files:

- `subgraph.yaml`: This stores the [subgraph manifest](https://thegraph.academy/developers/working-with-the-graph/)
- `schema.graphql`: This defines the data to be stored and how it can be queried using GraphQL
- `src/mapping.ts`: This defines the mapping between blockchain events to the entities defined in the schema

# Deploying the subgraph

Before you can deploy your subgraph, you need to get your deploy key from <https://thegraph.com/studio/subgraph/vending/>.

Run the following command to set the deploy key for this yarn project.

```text
graph auth --studio <DEPLOY_KEY>
```

You should see the following output:

```text
Deploy key set for https://api.studio.thegraph.com/deploy/
```

Once that is done, we can run the following commands to deploy the subgraph to Subgraph Studio:

```text
cd vending
yarn deploy
```

You shall be prompted for a version label. You can choose `1.0.0`. You should see the following output:

```text
✔ Version Label (e.g. v0.0.1) · v1.0.0
  Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
  Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
  Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
  Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
  Compile data source: VendingMachine => build/VendingMachine/VendingMachine.wasm
✔ Compile subgraph
  Copy schema file build/schema.graphql
  Write subgraph file build/VendingMachine/abis/VendingMachine.json
  Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
  Add file to IPFS build/schema.graphql
                .. QmWEbGspWEL95ipBPxDCFFrddswSBsprwx1Ktm35Xk2t5M
  Add file to IPFS build/VendingMachine/abis/VendingMachine.json
                .. QmPvqMksRmuchK4Q7kL2KpKg4ZZEsBXwHE34PE55YZUd1Y
  Add file to IPFS build/VendingMachine/VendingMachine.wasm
                .. QmYR3nJToYt9HeuLhXeZ4rw11JrNJyu1NE5n4LQ8DCYsyi
✔ Upload subgraph to IPFS

Build completed: QmZMbjNuaEm1KvAhVaqE29Hz4EJfdNcDwtHgmGifWNrutV

Deployed to https://thegraph.com/studio/subgraph/vending

Subgraph endpoints:
Queries (HTTP):     https://api.studio.thegraph.com/query/8676/vending/v1.0.0
Subscriptions (WS): https://api.studio.thegraph.com/query/8676/vending/v1.0.0
```

You have now deployed the subgraph to your Subgraph Studio account. It will now start the syncing process, where data is extracted from the historical blocks in Rinkeby Ethereum testnet by The Graph node. Depending on the amount of data, this process can take anywhere between a few minutes to a few hours. New blocks will be inspected by The Graph node as soon as they are mined.

Once the sync is complete, you can access the subgraph on the Playground to run your queries.

# Conclusion

Congratulations on finishing this tutorial! You have learned how to deploy a smart contract to the Rinkeby testnet using HardHat. You also learned how to create and deploy a subgraph for the smart contract on Subgraph Studio.

# About the Author

I'm Robin Thomas, a blockchain enthusiast with few years of experience working with various blockchain protocols. Feel free to connect with me on [GitHub](https://github.com/robin-thomas).


Learn how to deploy a subgraph for a smart contract using HardHat.

Deploy a subgraph with HardHat

# Introduction

In this tutorial you will learn how to create a subgraph from an ERC-721 smart contract on Ethereum mainnet, deploy it to the Subgraph Studio, and then use the Subgraph Studio Playground to query the subgraph for information about the indexed transactions.

![Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph.png)

OpenZeppelin Subgraphs is a powerful library for easily indexing activity of OpenZeppelin Contracts. It simplies building subgraphs by supporting some of the most popular modules in OpenZeppelin Contracts, like `erc20`, `erc721`, `ownable` and so on. We shall be using `erc721` and `ownable` modules in this tutorial.

You can build a subgraph schema if you know the address of the smart contract. In this tutorial, you shall learn how to retrieve the smart contract address of some popular NFT collection using the OpenSea NFT marketplace.

The Subgraph Studio is where you can build and create subgraphs. You can add metadata to your graphs (even after deploying your subgraphs), deploy multiple versions of your subgraphs, as well as publish them to the decentralized Graph Explorer. You can also test your subgraphs in the Playground, where you can run graphql queries without incurring any querying fees. In this tutorial, you shall also learn how to create and deploy your subgraph to Subgraph Studio as well as query it using the Playground.

# Requirements

- You need to have a recent version of Node.js installed. We recommend using v14.17.6 LTS for compatibility.

# Project setup

Run the following command to install the Graph Protocol CLI globally. This is required to deploy your subgraph.

```text
npm i -g @graphprotocol/graph-cli@0.21.1
```

Because the latest version of the Graph Protocol CLI breaks compatibility with OpenZeppelin subgraphs, for this tutorial you will need to specifically install **v0.21.1** and not the latest version.

# Getting the NFT smart contract address

Head over to [OpenSea](https://opensea.io/assets), the largest NFT marketplace.

![OpenSea assets](https://github.com/figment-networks/learn-tutorials/raw/master/assets/opensea_assets.png)

As you can see from the screenshot above, there are over 20 million NFTs on sale!

Click on the **Collections** tab on the left. There we can see many of the popular NFT collections like CryptoPunks, Art Blocks Curated, Galaxy-Eggs, and so on. Let's choose the **Galaxy-Eggs** NFT collection for this tutorial. Click on the **Galaxy-Eggs** link, which will take you to <https://opensea.io/collection/galaxyeggs9999>.

![OpenSea Galaxy-Eggs](https://github.com/figment-networks/learn-tutorials/raw/master/assets/opensea_galaxyeggs.png)

Click on any of the NFTs to view its display page:

![OpenSea Galaxy-Eggs #7836](https://github.com/figment-networks/learn-tutorials/raw/master/assets/opensea_galaxyeggs_7836.png)

From here you can click on the **Details** tab, to view the contract address for the NFT: <https://etherscan.io/address/0xa08126f5e1ed91a635987071e6ff5eb2aeb67c48>.

# Creating the project in Subgraph Studio

Now that you have the address of a smart contract that you want to index using the Graph Protocol, you can head over to the Subgraph Studio at <https://thegraph.com/studio/>.

![Login to Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_connect.png)

Click on the **Connect button** at the top right side of the page. Choose a Metamask wallet to login with. Once authenticated, you will be at the main Studio page where you can create your first subgraph:

![Create your first subgraph](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_create_subgraph.png)

Click the "Create a Subgraph" button to begin. You need to give your subgraph a name. For now, give the name as *GalaxyEggNFT* (this name is for display only and can be changed at any time). Once that's done, you can see details about the subgraph like your deploy key, the subgraph slug and status.

![GalaxyEggs NFT subgraph](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_galaxyeggs_nft.png)

# Creating the subgraph

On your local machine or remote development environment, create a directory called `galaxyEggsNFT`, change into that directory, then initialize it as a new **npm** project by running:

```text
mkdir galaxyEggsNFT
cd galaxyEggsNFT
npm init --yes
```

Next, you need to install the OpenZeppelin Subgraphs package:

```text
npm install --save-dev @openzeppelin/subgraphs
```

To store the subgraph configuration, create a file called `subgraphconfig.json` with the following contents:

```json
{
  "output": "generated/",
  "chain": "mainnet",
  "datasources": [
    { "address": "0xa08126f5e1ed91a635987071e6ff5eb2aeb67c48", "startBlock": 13200000, "module": [ "erc721", "ownable" ] }
  ]
}
```

- **output**: the directory where your subgraph shall be stored
- **datasources**: an array of `datasource`, where each datasource defines the following properties:
  - **address** - smart contract address to create the subgraph from
  - **startBlock** (optional) - the block to start the subgraph indexing from, speeds up the indexing process
  - **module** - array of modules that we want to index

OpenZeppelin Subgraphs support the following modules:
- `accesscontrol`
- `erc20`
- `erc721`
- `governor`
- `ownable`
- `pausable`
- `timeblock`


Since NFTs are `erc721` modules, we shall use that for indexing, along with the `ownable` module. To build the subgraph, run the following command:

```text
npx graph-compiler --config subgraphconfig.json --include node_modules/@openzeppelin/subgraphs/src/datasources --export-schema --export-subgraph
```

This will output:

```text
- Schema exported to generated/schema.graphql
- Manifest exported to generated/subgraph.yaml
```

It also creates a directory named `generated` containing two files:
- `subgraph.yaml`: This stores the [subgraph manifest](https://thegraph.academy/developers/working-with-the-graph/)
- `schema.graphql`: This defines the data to be stored and how it can be queried using GraphQL

Now we are ready to deploy the subgraph.

# Deploying the subgraph

Run the following command to set the deploy key for your subgraph project:

```text
graph auth --studio <DEPLOY_KEY>
```

Replace `<DEPLOY_KEY>` with the deploy key from the Studio page <https://thegraph.com/studio/subgraph/galaxyeggnft/>. You should see the following output:

```text
Deploy key set for https://api.studio.thegraph.com/deploy/
```

Once that is done, we can run the following commands to deploy the subgraph to Subgraph Studio:

```text
cd generated
graph deploy --studio galaxyeggnft
```

You can choose `v1.0.0` when you are prompted for a version label. You should see the following output:

```text
✔ Version Label (e.g. v0.0.1) · v1.0.0
  Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2 (graph-ts dependency not installed yet)
  Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3 (graph-ts dependency not installed yet)
  Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4 (graph-ts dependency not installed yet)
  Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
  Compile data source: erc721 => build/erc721/erc721.wasm
  Compile data source: ownable => build/ownable/ownable.wasm
✔ Compile subgraph
  Copy schema file build/schema.graphql
  Write subgraph file build/node_modules/@openzeppelin/contracts/build/contracts/IERC721Metadata.json
  Write subgraph file build/node_modules/@openzeppelin/contracts/build/contracts/Ownable.json
  Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
  Add file to IPFS build/schema.graphql
                .. QmPDKw3SDB138wUFYYvzAN1GatHRX6NvFwnDcvDfZsjwYp
  Add file to IPFS build/node_modules/@openzeppelin/contracts/build/contracts/IERC721Metadata.json
                .. QmXVNNtLfETmLrarDMwR18Tk2kNUXyczLf7LdES4aFZkLi
  Add file to IPFS build/node_modules/@openzeppelin/contracts/build/contracts/Ownable.json
                .. QmVjhxbJvwq39tGZCNxTDuY6rjW5HYiHzCm9kQnm1bLJ1M
  Add file to IPFS build/erc721/erc721.wasm
                .. QmUKy3JTwyeYNUn5BMa7SAWj3C6PAx47XBJQNfNG1X6Jb4
  Add file to IPFS build/ownable/ownable.wasm
                .. QmQg39Jp9zLUdShCcXoYjrnkhevLLpYerT3RcvYaxgZPph
✔ Upload subgraph to IPFS

Build completed: QmYDdVUPh6br4VqrgQzhM2i4Pedw7ysvDmhovvYVcA1Nu2

Deployed to https://thegraph.com/studio/subgraph/galaxyeggnft

Subgraph endpoints:
Queries (HTTP):     https://api.studio.thegraph.com/query/8676/galaxyeggnft/v1.0.0
Subscriptions (WS): https://api.studio.thegraph.com/query/8676/galaxyeggnft/v1.0.0
```

You have now deployed the subgraph to your Subgraph Studio account!

It will trigger a syncing process, where The Graph nodes will inspect historical blocks of Ethereum mainnet blockchain to retrieve any data for this subgraph. New blocks are inspected as soon as they are mined. Wait for the syncing process to be completed.

You shall also have access to the Playground, where you can run your queries, like shown below.

![GalaxyEggs NFT Subgraph](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_galaxyeggs_nft_subgraph.png)

**For now, you alone will have access to this subgraph in the Subgraph Studio. For others to be able to access your subgraph, you need to publish it to the Graph Network.**

![GalaxyEggs NFT Subgraph Publish](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_publish.png)

Publishing meaning pushing your subgraph on-chain to either Ethereum mainnet or Ethereum Rinkeny testnet. This will allow you to see how your subgraph works in the [Graph Explorer](https://thegraph.com/explorer/).

For now, let's skip publishing this subgraph.

# Querying the NFT data

Your subgraph is composed of schema types called `Entities`, defined in `schema.graphql` file. For each Entity, The Graph will generate an `entity` and `entities` fields, as seen in <https://thegraph.com/studio/subgraph/galaxyeggnft>.

To retrieve all the Galaxy-Eggs NFTs created (along with their identifier and uri), use the below query in the Playground:

```graphql
{
  erc721Tokens {
    identifier
    uri
  }
}
```

You will get an output like:

```json
{
  "data": {
    "erc721Tokens": [
      {
        "identifier": "0",
        "uri": "ipfs://QmfB3KH8GuZA9xoTCNwwiMEMk9hZBUaUZnMMWKra57oUse/0.json"
      },
      {
        "identifier": "1",
        "uri": "ipfs://QmfB3KH8GuZA9xoTCNwwiMEMk9hZBUaUZnMMWKra57oUse/1.json"
      },

      ...

    ]
  }
}
```

Here `identifier` denotes the unique id used for an NFT. For example, in NFT **Galaxy-Eggs #2074**, **2074** is the identifier.

Note that we are using `erc721Tokens` and not `erc721Token` in the query. If we want to retrieve a specific NFT, we have to use `erc721Token`:

```graphql
{
  erc721Token(id: "0xa08126f5e1ed91a635987071e6ff5eb2aeb67c48/0x0") {
    identifier
    uri
  }
}
```

But in this case `id` field is mandatory and must be a string. It will output:

```json
{
  "data": {
    "erc721Token": {
      "id": "0xa08126f5e1ed91a635987071e6ff5eb2aeb67c48/0x0",
      "identifier": "0",
      "uri": "ipfs://QmfB3KH8GuZA9xoTCNwwiMEMk9hZBUaUZnMMWKra57oUse/0.json"
    }
  }
}
```

If you visit the above IPFS link, you will get the details of **Galaxy-Eggs #0** NFT:

```json
{
  "name": "Galaxy Egg #0",
  "description": "(art)tificial is an art studio that explores the boundaries of technology and art. Our first project is Galaxy Eggs - a generative collection of 9,999 Eggs of the metaverse that live on the Ethereum Blockchain. Our Art Director, Gal Barkan, has been creating futuristic and sci-fi art for the past 20 years - this collection is the culmination of a lifetime of work on one hand, and the beginning of a new chapter in taking part in the creation of the metaverse. For more info about (art)ificial and Galaxy Eggs, visit - artificial.art",
  "image": "ipfs://QmUM1uGBE6H8pQ2zQSUj2BTzbpLSvuX6jtpBCB38xSiz2q/"
}
```

To retrieve the NFT purchases, we shall use the `transactions` entity (along with its `id` field). Run the below query:

```graphql
{
  transactions {
    id
  }
}
```

You will get an output like:

```json
{
  "data": {
    "transactions": [
      {
        "id": "0x0003b95db41b4bdadddb234d4d932fdc26bf9890267073e488e4b6f9fdb27400"
      },
      {
        "id": "0x000a9c8ddadffcd8832723fd2227c98d5401df2f83f9297205386fc59e8de13b"
      },

      ...

    ]
  }
}
```

The value of each `id` is a valid transaction hash on Ethereum mainnet. As an example, if you view the first transaction hash ([0x0003b95db...](https://etherscan.io/tx/0x0003b95db41b4bdadddb234d4d932fdc26bf9890267073e488e4b6f9fdb27400)) on the Etherscan block explorer, you can see it is a purchase transaction of the NFT **Galaxy Egg #8331**!

You can get the details from the Playground using the query:

```graphql
{
  erc721Transfers (orderBy: timestamp, orderDirection: desc) {
    token {
      identifier
    }
    to {
      id
    }
    transaction {
      id
    }
  }
}
```

`orderBy` and `orderDirection` attributes can be used to sort the results by a specific field. In this example, let's sort it based on the purchase timestamps in descending order, meaning last purchases will come first in the result.

`id` field inside the `to` field, denotes the address to which the NFT is transferred.

You shall get the below output:

```json
{
  "data": {
    "erc721Transfers": [
      {
        "to": {
          "id": "0x98c2f3a23a967ed100b6c51dcab8e354804e05d1"
        },
        "token": {
          "identifier": "2174"
        },
        "transaction": {
          "id": "0x31663947a5619c75217d127caa7c128d868c5b4cc3d8145d9b78e0e9a6e4a155"
        }
      },

      ...

    ]
  }
}
```

You can view the transaction on Etherscan ([0x31663947a...](https://etherscan.io/tx/0x31663947a5619c75217d127caa7c128d868c5b4cc3d8145d9b78e0e9a6e4a155)). As you can see it's the sale of **Galaxy Eggs #2174** made by the account `0x98c2...05d1`, which is exactly what is in the output!

# Conclusion

Congratulations on finishing this tutorial! You have learned how to retrieve the smart contract address of an NFT collection from OpenSea. You also learned how to create and deploy a subgraph for an NFT collection on Subgraph Studio, as well as query the subgraph for specific information using GraphQL and the Subgraph Studio Playground.

# About the Author

I'm Robin Thomas, a blockchain enthusiast with few years of experience working with various blockchain protocols. Feel free to connect with me on [GitHub](https://github.com/robin-thomas).


Learn how to create, deploy and use a subgraph for an ERC-721 smart contract on Ethereum mainnet

Query NFT Data with OpenZeppelin Subgraphs

# Introduction

In this tutorial, you will learn how to create a subgraph from an already deployed smart contract on the Ethereum Rinkeby testnet, deploy it to the Subgraph Studio, and then use the Subgraph Studio Playground to query the subgraph.

![Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph.png)

# Prerequisites

To successfully complete this tutorial, you will need to have a basic understanding of Ethereum, the Metamask wallet and the NodeJS ecosystem.

# Requirements

- You will need Metamask installed in your browser. You can install it from <https://metamask.io/>
- You need to have a recent version of Node.js installed. We recommend using v14.17.6 LTS for compatibility.

Topics covered in this tutorial:

- Creating a subgraph in the Subgraph Studio
- Downloading the contract abi and then creating a subgraph from it
- Deploying the subgraph to Subgraph Studio
- Querying the subgraph using Subgraph Studio Playground
- Using metamask to interact with the Rinkeby smart contract

Topics not covered in this tutorial:

- Writing the smart contract and then deploying it to Rinkeby testnet

# Project setup

Run the below commands to install the npm dependencies globally. These are required to build and deploy your subgraph.

```text
npm i -g yarn
npm i -g @graphprotocol/graph-cli
```

# Creating the graph project in Subgraph Studio

First, you will want to head over to the Subgraph Studio at <https://thegraph.com/studio/>.

![Login to Subgraph Studio](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_connect.png)

Click on the **Connect Wallet** button. Choose a Metamask wallet to login with. Once you are authenticated, you shall see the below screen, where you can create your first subgraph.

![Create your first subgraph](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_create_subgraph.png)

Next, you need to give your subgraph a name. Give the name as **vending**. Once that's done, you will see this screen:

![Subgraph dashboard](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_subgraph_created.png)

On this screen, you can see details about the subgraph like your deploy key, the subgraph slug and status.

# Creating and deploying the subgraph

- Run the following command to create the subgraph by downloading the contract ABI from the Rinkeby testnet. A new directory called `vending` will be created, and all node dependencies will be installed automatically.

```text
graph init --contract-name VendingMachine --index-events --studio --from-contract 0x4006c82FfB71933160948626dB3Ff8D8aaad6510 --network rinkeby vending
```

This will fetch the ABI from the Rinkeby smart contract passed as an argument to `--from-contract`, and store it in the `./vending/abis` directory. The Graph CLI will auto-generate the mappings from the smart contract ABI. You can view the mapping in `./vending/src/mapping.ts`.

> By passing in `--index-events` the CLI will automatically populate some code for us in both `schema.graphql` as well as `src/mapping.ts` based on the events emitted from the contract.

Output:

```text
✔ Subgraph slug · vending
✔ Directory to create the subgraph in · vending
✔ Ethereum network · rinkeby
✔ Contract address · 0x4006c82FfB71933160948626dB3Ff8D8aaad6510
✔ Fetching ABI from Etherscan
✔ Contract Name · VendingMachine
———
  Generate subgraph from ABI
  Write subgraph to directory
✔ Create subgraph scaffold
✔ Initialize subgraph repository
✔ Install dependencies with yarn
✔ Generate ABI and schema types with yarn codegen

Subgraph vending created in vending

Next steps:

  1. Run `graph auth` to authenticate with your deploy key.

  2. Type `cd vending` to enter the subgraph.

  3. Run `yarn deploy` to deploy the subgraph.

Make sure to visit the documentation on https://thegraph.com/docs/ for further information.
```


- Run the following command to set the deploy key. Replace <DEPLOY_KEY> with the key you got from <https://thegraph.com/studio/subgraph/vending/>

```text
graph auth --studio <DEPLOY_KEY>
Deploy key set for https://api.studio.thegraph.com/deploy/
```

- To create the subgraph, run the following command. Your new subgraph will be created in a `subgraph.yaml` file.

```text
cd vending
graph codegen && graph build
```

This will generate a `build` directory under `vending/build`.

Output:

```text
Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
Load contract ABI from abis/VendingMachine.json
✔ Load contract ABIs
Generate types for contract ABI: VendingMachine (abis/VendingMachine.json)
Write types to generated/VendingMachine/VendingMachine.ts
✔ Generate types for contract ABIs
✔ Generate types for data source templates
✔ Load data source template ABIs
✔ Generate types for data source template ABIs
✔ Load GraphQL schema from schema.graphql
Write types to generated/schema.ts
✔ Generate types for GraphQL schema

Types generated successfully

Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
Compile data source: VendingMachine => build/VendingMachine/VendingMachine.wasm
✔ Compile subgraph
Copy schema file build/schema.graphql
Write subgraph file build/VendingMachine/abis/VendingMachine.json
Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/

Build completed: /temp/vending/build/subgraph.yaml
```

The following command will deploy the subgraph to Subgraph Studio:

```text
graph deploy --studio vending
```

You shall be prompted for a version label. You can choose `1.0.1`.

Output:

```text
✔ Version Label (e.g. v0.0.1) · v1.0.1
  Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
  Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
  Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
  Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
  Compile data source: VendingMachine => build/VendingMachine/VendingMachine.wasm
✔ Compile subgraph
  Copy schema file build/schema.graphql
  Write subgraph file build/VendingMachine/abis/VendingMachine.json
  Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
  Add file to IPFS build/schema.graphql
                .. QmWEbGspWEL95ipBPxDCFFrddswSBsprwx1Ktm35Xk2t5M
  Add file to IPFS build/VendingMachine/abis/VendingMachine.json
                .. QmPvqMksRmuchK4Q7kL2KpKg4ZZEsBXwHE34PE55YZUd1Y
  Add file to IPFS build/VendingMachine/VendingMachine.wasm
                .. QmYR3nJToYt9HeuLhXeZ4rw11JrNJyu1NE5n4LQ8DCYsyi
✔ Upload subgraph to IPFS

Build completed: QmZMbjNuaEm1KvAhVaqE29Hz4EJfdNcDwtHgmGifWNrutV

Deployed to https://thegraph.com/studio/subgraph/vending

Subgraph endpoints:
Queries (HTTP):     https://api.studio.thegraph.com/query/8676/vending/v1.0.1
Subscriptions (WS): https://api.studio.thegraph.com/query/8676/vending/v1.0.1
```

Subgraph Studio might take few minutes to sync the graph from the Rinkeby testnet. Wait until the syncing process is complete.

Once the sync is complete, you can access the subgraph on the Playground to run your queries.

# Querying the graph

Head over to <https://thegraph.com/studio/subgraph/vending/> to start querying data with the Playground.

![Subgraph Studio Playground](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_playground.png)

This is a basic GraphQL query for the subgraph we have created:

```graphql
{
  purchases {
    buyer
    amount
    remaining
    timestamp
  }
}
```

We can set the order direction using `orderBy` and `orderDirection`:

```graphql
{
  purchases(
    orderBy: timestamp
    orderDirection: desc
  ) {
    buyer
    amount
    remaining
    timestamp
  }
}
```

Or get the first `x` results using the `first` clause:

```graphql
{
  purchases(
    orderBy: timestamp
    orderDirection: desc
    first: 2
  ) {
    buyer
    amount
    remaining
    timestamp
  }
}
```

Or skip forward results using the `skip` clause:

```graphql
{
  purchases(
    orderBy: timestamp
    orderDirection: desc
    skip: 2
  ) {
    buyer
    amount
    remaining
    timestamp
  }
}
```

Or filter the results by certain conditions using the `where` clause:

```graphql
{
  purchases(
    orderBy: timestamp
    orderDirection: desc
    where: { amount_gt: 5 }
  ) {
    buyer
    amount
    remaining
    timestamp
  }
}
```

## Creating data and querying it

Go to <https://rinkeby.etherscan.io/address/0x4006c82ffb71933160948626db3ff8d8aaad6510#writeContract> to see the Rinkeby smart contract.

![Rinkeby Smart Contract](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_rinkeby_contract.png)

Click on the **Connect to Web3** button. Choose **Metamask** from the wallet options. After authenticatng with Metamask, you shall see **Connected - Web3[address]** instead of the earlier button. Make sure you are connected to the **Rinkeby** test network.

Click on the **purchase** row. You need to fill in **purchase** and **amount** fields.

![Rinkeby Smart Contract Purchase](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_rinkeby_contract_purchase.png)

Fill in **purchase** as **0.2** and **amount** as **20**. Click on the **Write** button.

It will open up the Metamask prompt. Make sure you are on the **Rinkeby** test network.

![Metamask](https://github.com/figment-networks/learn-tutorials/raw/master/assets/graph_metamask.png)

Once you click on the **Confirm** button, wait for your transaction to be mined.

Then come back to Playground, and run the below query (after replacing `<YOUR_ADDRESS>` with your Metamask wallet address):

```graphql
{
  purchases(
    orderBy: timestamp
    orderDirection: desc
    where: { buyer: "<YOUR_ADDRESS>" }
  ) {
    buyer
    amount
    remaining
    timestamp
  }
}
```

You will see the information about the purchase you just created!

```json
{
  "data": {
    "purchases": [
      {
        "amount": "20",
        "buyer": "<YOUR_ADDRESS>",
        "remaining": "84",
        "timestamp": "1631577213"
      }
    ]
  }
}
```

# Conclusion

Congratulations on finishing this tutorial! You have learned how to create and deploy your first subgraph, as well as query the subgraph using the Subgraph Studio Playground.

# About the Author

I'm Robin Thomas, a blockchain enthusiast with few years of experience working with various blockchain protocols. Feel free to connect with me on [GitHub](https://github.com/robin-thomas) or [Figment Community](https://community.figment.io/u/robinthomas2591).


Learn how to create a subgraph from a deployed smart contract on Ethereum