Skip to content

subhokarmakar/Subgraph-Dev-Workshop-2023

 
 

Repository files navigation

Subgraph Development and Querying Workshop

Top Slide

Open These Tabs to Code Along with Live Workshop:

Cheatsheet

Cheatsheet

Prerequisites

  • Install graph-cli: yarn global add @graphprotocol/graph-cli

Learning Environment 1 :

Compare a Starter Subgraph with a Published Cryptopunks Subgraph Thats Live on The Graph Network

Deploy a Starter Subgraph

1. Gather information

Use Miniscan to find important information relevant to your subgraph (smart contract name, ABI, startblock).

  • Cryptopunks contract on Etherscan: 0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb

2. Go to Subgraph Studio, and create a new subgraph

  • Follow the instructions in Subgraph Studio to spin up a new subgraph on your local computer using graph-cli.

  • Enter information gathered from Miniscan into graph-cli as prompted.

  • Choose "yes" when asked if wanting to index events as entites.

  • graph deploy... to deploy your subgraph

Review Key Files in your Starter Cryptopunks Subgraph.

  • subgraph.yaml (Subgraph Manifest)
  • src/mappings.ts (Subgraph Logic)
  • schema.graphql (Presented Subgraph Data)

Compare Starter Subgraph's Key Files to Published Cryptopunks Subgraph Key Files

- What are the first 10 transfers in Cryptopunks history
- Find the total value in Eth sales all punks, the total supply, and the total number of sales?
- 10 highest value Cryptopunks transactions of all time?
- How much ETH sales in total?
- Does Vitalik have a Cryptopunk?
- How many Cryptopunks wear a Pilot Helmet?
- What account has made the most transactions ever?
- Provenance (Who owned it before? Is it really the right one?)
- If available (only on-chain market places), what is the current asking price?
- What’s the highest current bid?
- Number of transfers made in the first block of Cryptopunks deployment?

Next steps:

  1. Try building with Kevin Jones' blog that combines ScaffoldETH-2 and Subgraphs

Second Slide

  1. Try out Learning Environment 2

Learning Environment 2:

Deploy a Starter Subgraph and Extend an Entity

1. Gather information

Use Miniscan to find important information relevant to your subgraph (smart contract name, ABI, startblock).

2. Go to Subgraph Studio, and create a new subgraph

  • Follow the instructions in Subgraph Studio to spin up a new subgraph on your local computer using graph-cli.

  • Enter information gathered from MiniScan into graph-cli as prompted.

  • Choose "yes" when asked if wanting to index events as entites.

  • graph deploy... to deploy your subgraph

Review key files in your starter Cryptopunks subgraph.

  • subgraph.yaml (Subgraph Manifest)
  • src/mappings.ts (Subgraph Logic)
  • schema.graphql (Presented Subgraph Data)

Understand the Generated Transfer Entity in Schema.graphql

# schema.graphql
type Transfer @entity(immutable: true) {
	id: Bytes!
	from: Bytes! # address
	to: Bytes! # address
	value: BigInt! # uint256
	blockNumber: BigInt!
	blockTimestamp: BigInt!
	transactionHash: Bytes!
}

Extend the Transfer Entity

Lets create a property in the Transfer entity that records the gas price of the transfer.

Add gasPrice to Transfer entity:

# schema.graphql
type Transfer @entity(immutable: true) {
	id: Bytes!
	from: Bytes! # address
	to: Bytes! # address
	value: BigInt! # uint256
	blockNumber: BigInt!
	blockTimestamp: BigInt!
	transactionHash: Bytes!
	gasPrice: BigInt! ## ADDED HERE
}

Update mappings.ts to send event data to the gasPrice property on the Transfer entity

// mappings.ts
export function handleTransfer(event: TransferEvent): void {
	let entity = new Transfer(
		event.transaction.hash.concatI32(event.logIndex.toI32())
	);
	entity.from = event.params.from;
	entity.to = event.params.to;
	entity.value = event.params.value;

	entity.blockNumber = event.block.number;
	entity.blockTimestamp = event.block.timestamp;
	entity.transactionHash = event.transaction.hash;

	entity.gasPrice = event.transaction.gasPrice;

	entity.save();
}

Add a new entity to store Account information

This new gasSpent property will total gas spent by an Account.

# schema.graphql
type Transfer @entity(immutable: true) {
	id: Bytes!
	from: Bytes! # address
	to: Bytes! # address
	value: BigInt! # uint256
	blockNumber: BigInt!
	blockTimestamp: BigInt!
	transactionHash: Bytes!
	gasPrice: BigInt!
}
type Account @entity {
	id: Bytes! # address
	gasSpent: BigInt! # uint256
}

Update mappings.ts to populate new Account entity

You must import BigInt from the graph-ts typscript helper library to perform the plus() function described below.

// src/mappings.ts
import { BigInt } from "@graphprotocol/graph-ts";

Read more about the graph-ts helper library.

// mappings.ts
export function handleTransfer(event: TransferEvent): void {
	let entity = new Transfer(
		event.transaction.hash.concatI32(event.logIndex.toI32())
	);
	entity.from = event.params.from;
	entity.to = event.params.to;
	entity.value = event.params.value;

	entity.blockNumber = event.block.number;
	entity.blockTimestamp = event.block.timestamp;
	entity.transactionHash = event.transaction.hash;
	entity.gasPrice = event.transaction.gasPrice;

	entity.save();

	// Load account from store. If account does not exist, create an account and set the gasSpent to 0.

	let account = Account.load(
		event.transaction.hash.concatI32(event.block.hash.toI32())
	);
	if (account == null) {
		account = new Account(
			event.transaction.hash.concatI32(event.block.hash.toI32())
		);
		account.gasSpent = BigInt.fromI32(0);
	}

	// Add the gas price of the current transaction to the total gas spent
	account.gasSpent = account.gasSpent.plus(event.transaction.gasPrice);

	account.save();
}

Next Steps:

  • Add more entities and mappings logic as desired.

  • Build queries using the Playground Explorer and reference the The Graph GraphQL docs to improve query accuracy.

  • Try building with Kevin Jones' blog that combines ScaffoldETH-2 and Subgraphs

Second Slide


Happy hacking,

Marcus Rein

Developer Relations and Developer Success

Edge & Node

https://www.twitter.com/Marcus_Rein_


Other example subgraphs:

Other resources

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%