Blockchain protocols such as Ethereum, Solana, Near, Polkadot, and so many others have paved the way for creating and storing immutable and cryptographically verifiable data but querying and accessing these data isn't easy at all.

As it stands now some web3 Dapps or companies out there, go through the stress of creating and managing a custom indexing service for their data. Building a custom indexing server comes with a major bottleneck due to the technical and financial resources involved, coupled with the fact that the indexing servers are majorly centralized hereby defeating the main goal of Web3 - decentralization. The decentralization stack ought to cut through all levels, logic, and data(storage and indexing)

https://twitter.com/dabit3/status/1506408692215857153

Data is essentially the powerhouse of major web and mobile applications, people go to Twitter because of its data, likewise YouTube and others, in a typical web2 system the owner of these servers that holds the data has the central power. Imagine data created by billions of people to be owned by a few hundred, it doesn't really make sense. This is what Web3 is out to fix.

In the Web3 space, data are primarily owned, managed, and controlled by the users of a DApp, this way users can move their data from one platform to another without any restriction, hence making data portability and interoperability a thing.

The graph was developed with the vision of being a decentralized indexing protocol for the web3 ecosystem. The Graph is an open & decentralized indexing protocol for dynamically querying several blockchain networks. It’s one thing to have your data properly and securely indexed and it’s another thing to have the ease and flair of querying the indexed data.

Blockchain Data can now be easily indexed and promptly queried without the need of having a centralized service provider. The Graph as an open & decentralized indexing protocol ensures users can dynamically query several blockchain networks such as Ethereum, Polygon, Avalanche, Celo, Optimism, Near, and many others. Aside from providing a protocol for decentralized data indexing, The graph network provides developers with the feature of using Graph QL as a querying language to access data in the exact format which they need it.

While using custom indexers, you pay for the computing resources, some of which you often time don’t exhaust, and also stand the risk of a hack or long downtime.

The graph has created an opportunity to provide great UX to consumers of DApp for serving up Data in a format in which it is required. Having the feature of filtering, sorting, searching, and paginating improves user experience and this is what The graph provides - A Global GraphQL API. With The graph, there is a guarantee to both the developer and users of data persistency.

By using The Graph, developers can query a peer-to-peer network of indexing nodes using GraphQL and verify the results on the client. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

Using The graph gives the assuredness and data persistency of decentralization and the flair of GraphQL for data querying and filtering. The put together gives a unique offering of better security and improved UX.

All data is stored and processed on open networks which are verifiable. The Graph makes querying this data seamless, fast, reliable, and highly secure.

The Graph protocol functions as a set of things working together as parts of a mechanism to provide the fastest, cheapest, most reliable way to access data for the web3 space. There are different roles in The graph network to facilitate the goal of decentralized data indexing and querying. This role involves Developers, Indexers, Curators, and Delegators. We’ll go over them to better understand their unique roles and their dynamics.

Developers:

Starting with this because I have strong a bias, being a developer myself 😀😀. Well, developers play a vital role in creating the subgraphs. According to the official website

Subgraphs can be composed into a global graph of all the world's public information. This data can be transformed, organized, and shared across applications for anyone to query with just a few keystrokes.

Developers have to define how to index the data(subgraph), this is mainly handled by Manifest, Schema, and Mapping. The Manifest(subgraph.yaml) is tasked with the configuration for the contract whose data is to be indexed, events to listen to, functions calls, or blocks activities. Schema(schema.graphql) from the file extension you can easily tell this is where the data structure and relationships are being set, setting the blueprint on how the data should be structured and its data types. It’s right to say developers create subgraphs and also consume the existing subgraphs. One key to mention is, that you have to pay Indexers for queries.

Indexers:

The indexers play the role of serving nodes for data indexing and serving queries. This set of individuals provides computational resources to store indexed data and return requested queries in exchange for monetary or financial rewards. The indexers ensure data persistency on the protocol.

Curators:

Curators on The Graph network are meant to organize data by signaling on subgraphs that are predicted to be valuable or profitable if indexed. Curators are mostly individuals who have technical skills and knowledge in pinpointing subgraphs that are likely to be widely used due to their unique offering or value-added. Curators also share their motivations for signaling a particular subgraph or it could be influenced by a personal reason for financial benefits. A curator use GRT - the native token for signaling a subgraph and gets some benefits every time the subgraph is queried.

Delegators:

A Delegator in The Graph network is someone who delegates GRT to one or more Indexers in exchange for a portion of the indexer’s earnings. They essentially contribute to securing the network without running a Graph Node themselves.

Simply put, a delegator engages in a “stake for gain” policy with indexers, an indexer’s capability to index and serve queries is capped on the amount of GRT staked and the chosen price per query, hence the higher the GRT staked, the higher the earning power for both the Indexer and Delegator.

We’ve had a deep overview of what The graph is all about, most notably the problem it solves and the roles of its key players, now I believe you’ve been bought over to The Graph Side 😉

Let’s get fully into it, The graph has provided a platform to participate in this moving vehicle of decentralizing the data stack of the web3 ecosystem. There are currently three core products of The Graph. Subgraph Studio, Graph Explorer, Hosted Service.

Subgraph Studio: This is likened to be the backbone of The graph protocol, this is where you create, manage, and publish subgraphs to the explorer, you can also add metadata to your subgraphs.

https://thegraph.com/studio/

You can also get and manage your API Keys in the subgraph studio. Do you have a project on Ethereum, Polygon, Near, Avalanche, or any other blockchain protocol? This is where you create the subgraph to index your data. It’s very simple to use.

Starting out, you’ll have to sign in with your wallet(currently supports Metamask, WalletConnect, Gnosis safe wallet) to get full access to create and manage your subgraphs. The subgraph studio gives you the full access to

• Create a subgraph

• Publish a subgraph

• Test it in the playground

• Integrate it in staging using the query URL

• Create and manage your API keys for specific subgraphs

You’ll also need to install The graph CLI to deploy the subgraph, you can install Graph CLI with either npm or yarn.

npm install -g @graphprotocol/graph-cli
yarn global add @graphprotocol/graph-cli

Upon signing your account, you select the chain where you want the data indexed and input a name for the subgraph, a unique deploy key is given for each subgraph. You then proceed to supply the necessary details such as image, display name, source graph URL, website URL, and categories. The graph provides a step-by-step guide and commands on how to install the CLI, init a project, authenticate your access, build your files and deploy to the studio, more like a mini-documentation.

Graph Explorer: This is an easy-to-use tool for the purpose of exploring or querying subgraphs and also interacting with the protocol. The graph explorer gives you full details on a subgraph, you’ll get in-depth knowledge such as the general overview, listed indexers and curators, and analytics over time. To query a subgraph and display it to your frontend, you need to get to the query URL that is visible on the subgraph studio. You’ll get access to a subgraph’s playground, this is where you get to play with your data, performing things like filtering, sorting, paginations and so many others before integrating to your frontend.

https://thegraph.com/explorer

Another valuable piece of information you can get from The Graph Explorer is the GitHub link to where the code can be accessed, that way you learn more about how to properly index your subgraph using a guide that is fully functional. No more trial and errors, follow a usable logic and structure, this is definitely super helpful for those just starting to explore The Graph in general, so knock yourself out 😀😀😀

Did I mention, that you can signal a subgraph from The Graph Explorer? One of the core processes of The Graph is signaling, as earlier explained under the Key Players of the Graph Protocol section, a subgraph can be signaled by curators to indicate to indexers on which subgraph to index, this can be done from The Graph Explorer. If convinced by a subgraph’s overview or analytics you can choose to signal the subgraph by price/share in GRT and get a part of the query fees on the subgraph you signaled.

Hosted Service: For the hosted service, the subgraphs are indexed by The Graph. You can easily create and explore subgraphs on the Hosted Service which are on the supported chains. Subgraphs indexed on hosted service can be easily discovered on The Graph Explorer, you can view and access some of the best projects in the web3 space. All the data are immediately made available and ready to be queried using GraphQL. If you don't have an account on the Hosted Service, you can signup with your Github account. Once you authenticate, you can start creating subgraphs through the UI and deploying them from your terminal. Graph Node supports a number of Ethereum testnets (Rinkeby, Ropsten, Kovan) in addition to mainnet.

https://thegraph.com/hosted-service/

Deploying your subgraph will upload the subgraph files that you've built with yarn build to IPFS and tell The Graph Explorer to start indexing your subgraph using these files.

Now let’s be more practical and explore some of the things we’ve touched on, The Graph being a querying and indexing platform, gives us full access to a subgraph, you don’t necessarily need to deploy a subgraph before using one. Let’s say, for example, you are working on a project built for the public good where you help individuals smoothly onboard into the web3 space and understand how the entire decentralization works. Now over to the Defi section of your application, you want to provide real-time data on transactions to help users make better-informed decisions. Sushiswap is one of the top projects that use The Graph Protocol to index its data with over 140K GRT curated so far. We’ll be querying data from the sushi subgraph and displaying it to our users, sounds exciting right? Let’s go for it.

Here’s a link to the sushiswap’s subgraph, the structure of the data, and relationships of the data entities are all stated. We’ll be using the playground to get the exact format we need before taking it to the frontend, to query a subgraph from the frontend you need to get an API Key, which can be created from the subgraph studio.

https://thegraph.com/explorer/subgraph?id=D7azkFFPFT5H8i32ApXLr34UQyBfxDAfKoCEK4M832M6&view=Overview

Here is some information we want to display to our users, the top 10 traded tokens, the hourly liquation per token, users with the highest liquidation, token pair data, PairDay data, PairHour data, transaction mint swap data, and also the sushiswap subgraph metadata.

Now let’s make The Graph’s playground, our playground 👍🏾. The first thing I’ll advice you to always do, whenever you want to query a subgraph is to go through the schema of the subgraph to get information about the data types and fields. Let’s begin by querying for the top 10 tokens on Sushiswap based on the volume of the transaction in USD.

{
  tokens(first: 10, orderBy: volumeUSD orderDirection: desc) {
    id
    volumeUSD 
  }
}

This returns the token volume in USD and the ID - which is the address of the token smart contract. Now we can tell our users the tokens with the highest volume of transactions. Querying these data from the front end cost some GRTs. Let’s proceed to create the other queries we need.

Let’s get some data on the first five users and their existing bundles. This will return the users id, the positions of their liquidity pool, and their corresponding IDs as well the attached bundles and their prices in ETH

{
  users(first: 5) {
    id
    liquidityPositions {
      id
    }
  }
  bundles(first: 5) {
    id
    ethPrice
  }
}

Next, let’s get to the top token pairs on the sushi swap protocol

{
  pairs(first: 10, orderBy: volumeUSD orderDirection: desc) {
    id,
    factory {
      pairCount,
      volumeUSD,
      userCount
    },
    name
  }
}

Let’s get the recent swap transactions on sushiswap

{
  transactions(orderBy: id, orderDirection: desc) {
    id,
    swaps {
      sender,
      amount0In,
      amount0Out,
      amount1In,
      amount1Out,
      to,
      amountUSD
    }
  }
}

We can decide to skip some certain mints and get the results of the other mints on the sushiswap protocol

{
  mints(skip: 100, orderBy: id, orderDirection:desc) {
    id,
    transaction {
      id
    },
    pair {
      name
    }
    liquidity,
    sender,
    amount0,
    amount1,
    amountUSD,
    feeTo
  }
}

Now let’s see how to display these data to a frontend application, to do that you might need to use Apollo Boost to seamlessly integrate GraphQL to your frontend - react applications, this way fetching the data is as simple as writing the normal graphQL commands.

Below are snippets of some codes you need to get graph QL up and running with react

const client = new ApolloClient({
  uri: "{{ subgraphUrl }}",
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root"),
); 

const { loading, error, data } = useQuery(myGraphQlQuery);

React.useEffect(() => {
    if (!loading && !error && data) {
        console.log({ data });
    }
}, [loading, error, data]);

const myGraphQlQuery = gql`
    mints(skip: 100, orderBy: id, orderDirection:desc) {
    id,
    transaction {
      id
    },
    pair {
      name
    }
    liquidity,
    sender,
    amount0,
    amount1,
    amountUSD,
    feeTo
`;

We’ve gone over querying existing subgraphs created by others, you know what’s way cooler? Creating your own subgraph. We’ll go over a step-by-step guide on creating your own subgraph. Excited? Let’s go.

The main components of a subgraph consist of a Graph QL Schema, Subgraph Manifest, and the AssemblyScript Mappings.

• GraphQL Schema: Data structuring

• Subgraph Manifest (yaml): Smart Contract Referencing

• AssemblyScript Mappings: Data Indexing

Earlier in this article, I explained the difference between hosted service and subgraph studio, for this exercise of creating a subgraph we’ll be using subgraph studio. To complete the process in this tutorial, you need to have the following prerequisite:

1. Node.js v16 or above installed on your machine

2. Metamask wallet

   https://thegraph.com/studio/

Sign in using metamask and click on create a subgraph. We’ll create a subgraph for the VeeFriends NFTs - A Gary Vaynerchuk NFT project around meaningful intellectual property and an extraordinary community, Let’s call it veeFriendsNft

After creating the subgraph in the subgraph studio, now head over to your local environment and run the following commands.

First, install The Graph CLI if you don’t have it installed, You can install Graph CLI with either npm or yarn.

npm install -g @graphprotocol/graph-cli
OR
yarn global add @graphprotocol/graph-cli

Next, create a new folder for the subgraph and init a subgraph. Once The Graph CLI has been successfully installed, you can proceed to initialize the new subgraph with The Graph CLI init command. The address of the Vee Friends Nft is 0xa3AEe8BcE55BEeA1951EF834b99f3Ac60d1ABeeB

graph init --contract-name Token \
--index-events --studio \
--from-contract 0xa3AEe8BcE55BEeA1951EF834b99f3Ac60d1ABeeB

You’ll be prompted to fill in some responses in your terminal

Subgraph slug: veefriendsnft

Directory to create the subgraph in: veefriendsnft

Ethereum network: mainnet

Contract address: 0xa3AEe8BcE55BEeA1951EF834b99f3Ac60d1ABeeB

Fetching ABI from Etherscan

Contract Name › Token

The commands will auto-generate a basic subgraph as a scaffold based on the veeFriendsNft contract address entered in as the argument to --from-contract. By using this contract address, the CLI will initialize a few things to the project to get you started (including fetching the ABIs and saving them in the ABIs directory).

Passing in the --index-events flag the CLI will automatically populate some code and configuration for you in schema.graphql, subgraph.yaml, and src/mapping.ts based on the contracts events emitted from the contract.

The schema is the GraphQL file for data definition. It will allow you to specify the data entities and their respective types. Examples are

• Bytes

• ID

• String

• Boolean

• Int

• BigInt

• BigDecimal

You can also use entities as types to define relationships. The ! means the value can't be empty.

Let’s set up the schema for the veeFriendsNft subgraph

type Token @entity {
  id: ID!
  tokenID: BigInt!
  createdAtTimestamp: BigInt!
  creator: User!
  owner: User!
}

type User @entity {
  id: ID!
  tokens: [Token!]! @derivedFrom(field: "owner")
  created: [Token!]! @derivedFrom(field: "creator")
}

The @derivedFrom field is used to perform a reverse lookup to create relationships amongst the data. Next, run the command below for the code generation.

Next, we proceed to set up the subgraph manifest, you can use this tool called Startblock to get the startBlock of your smart contract.

specVersion: 0.0.2
schema:
  file: ./schema.graphql
dataSources:
  - kind: ethereum/contract
    name: Token
    network: mainnet
    source:
      address: "0xa3AEe8BcE55BEeA1951EF834b99f3Ac60d1ABeeB"
      abi: Token
      startBlock: 12414465
    mapping:
      kind: ethereum/events
      apiVersion: 0.0.5
      language: wasm/assemblyscript
      entities:
        - Token
        - User
      abis:
        - name: Token
          file: ./abis/Token.json
      eventHandlers:
        - event: Transfer(indexed address,indexed address,indexed uint256)
          handler: handleTransfer
      file: ./src/mapping.ts

This set up the indexing mechanism for the veeFriendsNft smart contract and set event handlers to point to an Ethereum event to a function in the local project.

The next step is to set up the Assembly scripts mapping. Update your src/mappings.ts with the code below

import {
  Transfer as TransferEvent,
  Token as TokenContract
 } from "../generated/Token/Token"
 
 import {
  Token, User
 } from '../generated/schema'
 
 export function handleTransfer(event: TransferEvent): void {
  let token = Token.load(event.params.tokenId.toString());
  if (!token) {
    token = new Token(event.params.tokenId.toString());
    token.creator = event.params.to.toHexString();
    token.tokenID = event.params.tokenId;
    token.createdAtTimestamp = event.block.timestamp;
 
    let tokenContract = TokenContract.bind(event.address);
  }
  token.owner = event.params.to.toHexString();
  token.save();
 
  let user = User.load(event.params.to.toHexString());
  if (!user) {
    user = new User(event.params.to.toHexString());
    user.save();
  }
 }

The final step is to deploy your subgraph

graph auth --studio

This will prompt you to enter your DEPLOY_KEY which you can get from the subgraph page on the subgraph studio.

graph deploy --studio <Subgraph Name>

Once the subgraph is deployed, the Studio should update with a new UI allowing you to test queries in The GraphQL playground as well as view logs and other details. Below is a sample query.

{
  tokens(first: 5) {
    id
    tokenID
    createdAtTimestamp
    creator {
      id
    }
  }
  users(first: 5) {
    id
    tokens {
      id
    }
    created {
      id
    }
  }
}

The status of the subgraph is now set to Deployed, you can proceed to publish the subgraph. Deploying a subgraph is different from publishing it, publishing it makes it publicly accessible and unlocks the signaling feature.

To deploy to a network, click the Publish button. You will be prompted to choose which network you would like to deploy the subgraph. Now we’ve successfully created a subgraph using The Graph Studio 🎉🎉.

Companies Using The Graph

Using The Graph is definitely a no-brainer for individuals and companies in the web3 space, I’ll like to mention some amazing companies that use The Graph to index and query their data.

Uniswap: Swap, earn and build on the leading decentralized crypto trading protocol.

https://uniswap.org/

Livepeer: Livepeer is a decentralized video streaming network built on the Ethereum blockchain.

https://livepeer.org/

Synthetix: Synthetix is a new financial primitive enabling the creation of synthetic assets, offering unique derivatives and exposure to real-world assets on the blockchain.

https://synthetix.io/

Audius: Giving everyone the freedom to distribute, monetize, and stream unstoppable audio

https://audius.org/

Decentraland: Create, explore and trade in the first-ever virtual world owned by its users.

https://decentraland.org/

To learn more about The Graph and contribute to decentralized data indexing in the web3 space, I’ll suggest you check out the links below

https://thegraph.com/blog/roadmap-2022

Twitter:

https://twitter.com/graphprotocol

Discord:

https://discord.gg/vtvv7FP

Blog:

https://thegraph.com/blog/

The Graph AdvocatesDAO:

https://twitter.com/graphprotocol/status/1511378310475005954

Blockchain protocols such as Ethereum, Solana, Near, Polkadot, and so many others have paved the way for creating and storing immutable and cryptographically verifiable data but querying and accessing these data isn't easy at all.

As it stands now some web3 Dapps or companies out there, go through the stress of creating and managing a custom indexing service for their data. Building a custom indexing server comes with a major bottleneck due to the technical and financial resources involved, coupled with the fact that the indexing servers are majorly centralized hereby defeating the main goal of Web3 - decentralization. The decentralization stack ought to cut through all levels, logic, and data(storage and indexing)

https://twitter.com/dabit3/status/1506408692215857153

Data is essentially the powerhouse of major web and mobile applications, people go to Twitter because of its data, likewise YouTube and others, in a typical web2 system the owner of these servers that holds the data has the central power. Imagine data created by billions of people to be owned by a few hundred, it doesn't really make sense. This is what Web3 is out to fix.

In the Web3 space, data are primarily owned, managed, and controlled by the users of a DApp, this way users can move their data from one platform to another without any restriction, hence making data portability and interoperability a thing.

The graph was developed with the vision of being a decentralized indexing protocol for the web3 ecosystem. The Graph is an open & decentralized indexing protocol for dynamically querying several blockchain networks. It’s one thing to have your data properly and securely indexed and it’s another thing to have the ease and flair of querying the indexed data.

Blockchain Data can now be easily indexed and promptly queried without the need of having a centralized service provider. The Graph as an open & decentralized indexing protocol ensures users can dynamically query several blockchain networks such as Ethereum, Polygon, Avalanche, Celo, Optimism, Near, and many others. Aside from providing a protocol for decentralized data indexing, The graph network provides developers with the feature of using Graph QL as a querying language to access data in the exact format which they need it.

While using custom indexers, you pay for the computing resources, some of which you often time don’t exhaust, and also stand the risk of a hack or long downtime.

The graph has created an opportunity to provide great UX to consumers of DApp for serving up Data in a format in which it is required. Having the feature of filtering, sorting, searching, and paginating improves user experience and this is what The graph provides - A Global GraphQL API. With The graph, there is a guarantee to both the developer and users of data persistency.

By using The Graph, developers can query a peer-to-peer network of indexing nodes using GraphQL and verify the results on the client. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

Using The graph gives the assuredness and data persistency of decentralization and the flair of GraphQL for data querying and filtering. The put together gives a unique offering of better security and improved UX.

All data is stored and processed on open networks which are verifiable. The Graph makes querying this data seamless, fast, reliable, and highly secure.

The Graph protocol functions as a set of things working together as parts of a mechanism to provide the fastest, cheapest, most reliable way to access data for the web3 space. There are different roles in The graph network to facilitate the goal of decentralized data indexing and querying. This role involves Developers, Indexers, Curators, and Delegators. We’ll go over them to better understand their unique roles and their dynamics.

Developers:

Starting with this because I have strong a bias, being a developer myself 😀😀. Well, developers play a vital role in creating the subgraphs. According to the official website

Subgraphs can be composed into a global graph of all the world's public information. This data can be transformed, organized, and shared across applications for anyone to query with just a few keystrokes.

Developers have to define how to index the data(subgraph), this is mainly handled by Manifest, Schema, and Mapping. The Manifest(subgraph.yaml) is tasked with the configuration for the contract whose data is to be indexed, events to listen to, functions calls, or blocks activities. Schema(schema.graphql) from the file extension you can easily tell this is where the data structure and relationships are being set, setting the blueprint on how the data should be structured and its data types. It’s right to say developers create subgraphs and also consume the existing subgraphs. One key to mention is, that you have to pay Indexers for queries.

Indexers:

The indexers play the role of serving nodes for data indexing and serving queries. This set of individuals provides computational resources to store indexed data and return requested queries in exchange for monetary or financial rewards. The indexers ensure data persistency on the protocol.

Curators:

Curators on The Graph network are meant to organize data by signaling on subgraphs that are predicted to be valuable or profitable if indexed. Curators are mostly individuals who have technical skills and knowledge in pinpointing subgraphs that are likely to be widely used due to their unique offering or value-added. Curators also share their motivations for signaling a particular subgraph or it could be influenced by a personal reason for financial benefits. A curator use GRT - the native token for signaling a subgraph and gets some benefits every time the subgraph is queried.

Delegators:

A Delegator in The Graph network is someone who delegates GRT to one or more Indexers in exchange for a portion of the indexer’s earnings. They essentially contribute to securing the network without running a Graph Node themselves.

Simply put, a delegator engages in a “stake for gain” policy with indexers, an indexer’s capability to index and serve queries is capped on the amount of GRT staked and the chosen price per query, hence the higher the GRT staked, the higher the earning power for both the Indexer and Delegator.

We’ve had a deep overview of what The graph is all about, most notably the problem it solves and the roles of its key players, now I believe you’ve been bought over to The Graph Side 😉

Let’s get fully into it, The graph has provided a platform to participate in this moving vehicle of decentralizing the data stack of the web3 ecosystem. There are currently three core products of The Graph. Subgraph Studio, Graph Explorer, Hosted Service.

Subgraph Studio: This is likened to be the backbone of The graph protocol, this is where you create, manage, and publish subgraphs to the explorer, you can also add metadata to your subgraphs.

https://thegraph.com/studio/

You can also get and manage your API Keys in the subgraph studio. Do you have a project on Ethereum, Polygon, Near, Avalanche, or any other blockchain protocol? This is where you create the subgraph to index your data. It’s very simple to use.

Starting out, you’ll have to sign in with your wallet(currently supports Metamask, WalletConnect, Gnosis safe wallet) to get full access to create and manage your subgraphs. The subgraph studio gives you the full access to

• Create a subgraph

• Publish a subgraph

• Test it in the playground

• Integrate it in staging using the query URL

• Create and manage your API keys for specific subgraphs

You’ll also need to install The graph CLI to deploy the subgraph, you can install Graph CLI with either npm or yarn.

npm install -g @graphprotocol/graph-cli
yarn global add @graphprotocol/graph-cli

Upon signing your account, you select the chain where you want the data indexed and input a name for the subgraph, a unique deploy key is given for each subgraph. You then proceed to supply the necessary details such as image, display name, source graph URL, website URL, and categories. The graph provides a step-by-step guide and commands on how to install the CLI, init a project, authenticate your access, build your files and deploy to the studio, more like a mini-documentation.

Graph Explorer: This is an easy-to-use tool for the purpose of exploring or querying subgraphs and also interacting with the protocol. The graph explorer gives you full details on a subgraph, you’ll get in-depth knowledge such as the general overview, listed indexers and curators, and analytics over time. To query a subgraph and display it to your frontend, you need to get to the query URL that is visible on the subgraph studio. You’ll get access to a subgraph’s playground, this is where you get to play with your data, performing things like filtering, sorting, paginations and so many others before integrating to your frontend.

https://thegraph.com/explorer

Another valuable piece of information you can get from The Graph Explorer is the GitHub link to where the code can be accessed, that way you learn more about how to properly index your subgraph using a guide that is fully functional. No more trial and errors, follow a usable logic and structure, this is definitely super helpful for those just starting to explore The Graph in general, so knock yourself out 😀😀😀

Did I mention, that you can signal a subgraph from The Graph Explorer? One of the core processes of The Graph is signaling, as earlier explained under the Key Players of the Graph Protocol section, a subgraph can be signaled by curators to indicate to indexers on which subgraph to index, this can be done from The Graph Explorer. If convinced by a subgraph’s overview or analytics you can choose to signal the subgraph by price/share in GRT and get a part of the query fees on the subgraph you signaled.

Hosted Service: For the hosted service, the subgraphs are indexed by The Graph. You can easily create and explore subgraphs on the Hosted Service which are on the supported chains. Subgraphs indexed on hosted service can be easily discovered on The Graph Explorer, you can view and access some of the best projects in the web3 space. All the data are immediately made available and ready to be queried using GraphQL. If you don't have an account on the Hosted Service, you can signup with your Github account. Once you authenticate, you can start creating subgraphs through the UI and deploying them from your terminal. Graph Node supports a number of Ethereum testnets (Rinkeby, Ropsten, Kovan) in addition to mainnet.

https://thegraph.com/hosted-service/

Deploying your subgraph will upload the subgraph files that you've built with yarn build to IPFS and tell The Graph Explorer to start indexing your subgraph using these files.

Now let’s be more practical and explore some of the things we’ve touched on, The Graph being a querying and indexing platform, gives us full access to a subgraph, you don’t necessarily need to deploy a subgraph before using one. Let’s say, for example, you are working on a project built for the public good where you help individuals smoothly onboard into the web3 space and understand how the entire decentralization works. Now over to the Defi section of your application, you want to provide real-time data on transactions to help users make better-informed decisions. Sushiswap is one of the top projects that use The Graph Protocol to index its data with over 140K GRT curated so far. We’ll be querying data from the sushi subgraph and displaying it to our users, sounds exciting right? Let’s go for it.

Here’s a link to the sushiswap’s subgraph, the structure of the data, and relationships of the data entities are all stated. We’ll be using the playground to get the exact format we need before taking it to the frontend, to query a subgraph from the frontend you need to get an API Key, which can be created from the subgraph studio.

https://thegraph.com/explorer/subgraph?id=D7azkFFPFT5H8i32ApXLr34UQyBfxDAfKoCEK4M832M6&view=Overview

Here is some information we want to display to our users, the top 10 traded tokens, the hourly liquation per token, users with the highest liquidation, token pair data, PairDay data, PairHour data, transaction mint swap data, and also the sushiswap subgraph metadata.

Now let’s make The Graph’s playground, our playground 👍🏾. The first thing I’ll advice you to always do, whenever you want to query a subgraph is to go through the schema of the subgraph to get information about the data types and fields. Let’s begin by querying for the top 10 tokens on Sushiswap based on the volume of the transaction in USD.

{
  tokens(first: 10, orderBy: volumeUSD orderDirection: desc) {
    id
    volumeUSD 
  }
}

This returns the token volume in USD and the ID - which is the address of the token smart contract. Now we can tell our users the tokens with the highest volume of transactions. Querying these data from the front end cost some GRTs. Let’s proceed to create the other queries we need.

Let’s get some data on the first five users and their existing bundles. This will return the users id, the positions of their liquidity pool, and their corresponding IDs as well the attached bundles and their prices in ETH

{
  users(first: 5) {
    id
    liquidityPositions {
      id
    }
  }
  bundles(first: 5) {
    id
    ethPrice
  }
}

Next, let’s get to the top token pairs on the sushi swap protocol

{
  pairs(first: 10, orderBy: volumeUSD orderDirection: desc) {
    id,
    factory {
      pairCount,
      volumeUSD,
      userCount
    },
    name
  }
}

Let’s get the recent swap transactions on sushiswap

{
  transactions(orderBy: id, orderDirection: desc) {
    id,
    swaps {
      sender,
      amount0In,
      amount0Out,
      amount1In,
      amount1Out,
      to,
      amountUSD
    }
  }
}

We can decide to skip some certain mints and get the results of the other mints on the sushiswap protocol

{
  mints(skip: 100, orderBy: id, orderDirection:desc) {
    id,
    transaction {
      id
    },
    pair {
      name
    }
    liquidity,
    sender,
    amount0,
    amount1,
    amountUSD,
    feeTo
  }
}

Now let’s see how to display these data to a frontend application, to do that you might need to use Apollo Boost to seamlessly integrate GraphQL to your frontend - react applications, this way fetching the data is as simple as writing the normal graphQL commands.

Below are snippets of some codes you need to get graph QL up and running with react

const client = new ApolloClient({
  uri: "{{ subgraphUrl }}",
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root"),
); 

const { loading, error, data } = useQuery(myGraphQlQuery);

React.useEffect(() => {
    if (!loading && !error && data) {
        console.log({ data });
    }
}, [loading, error, data]);

const myGraphQlQuery = gql`
    mints(skip: 100, orderBy: id, orderDirection:desc) {
    id,
    transaction {
      id
    },
    pair {
      name
    }
    liquidity,
    sender,
    amount0,
    amount1,
    amountUSD,
    feeTo
`;

We’ve gone over querying existing subgraphs created by others, you know what’s way cooler? Creating your own subgraph. We’ll go over a step-by-step guide on creating your own subgraph. Excited? Let’s go.

The main components of a subgraph consist of a Graph QL Schema, Subgraph Manifest, and the AssemblyScript Mappings.

• GraphQL Schema: Data structuring

• Subgraph Manifest (yaml): Smart Contract Referencing

• AssemblyScript Mappings: Data Indexing

Earlier in this article, I explained the difference between hosted service and subgraph studio, for this exercise of creating a subgraph we’ll be using subgraph studio. To complete the process in this tutorial, you need to have the following prerequisite:

1. Node.js v16 or above installed on your machine

2. Metamask wallet

   https://thegraph.com/studio/

Sign in using metamask and click on create a subgraph. We’ll create a subgraph for the VeeFriends NFTs - A Gary Vaynerchuk NFT project around meaningful intellectual property and an extraordinary community, Let’s call it veeFriendsNft

After creating the subgraph in the subgraph studio, now head over to your local environment and run the following commands.

First, install The Graph CLI if you don’t have it installed, You can install Graph CLI with either npm or yarn.

npm install -g @graphprotocol/graph-cli
OR
yarn global add @graphprotocol/graph-cli

Next, create a new folder for the subgraph and init a subgraph. Once The Graph CLI has been successfully installed, you can proceed to initialize the new subgraph with The Graph CLI init command. The address of the Vee Friends Nft is 0xa3AEe8BcE55BEeA1951EF834b99f3Ac60d1ABeeB

graph init --contract-name Token \
--index-events --studio \
--from-contract 0xa3AEe8BcE55BEeA1951EF834b99f3Ac60d1ABeeB

You’ll be prompted to fill in some responses in your terminal

Subgraph slug: veefriendsnft

Directory to create the subgraph in: veefriendsnft

Ethereum network: mainnet

Contract address: 0xa3AEe8BcE55BEeA1951EF834b99f3Ac60d1ABeeB

Fetching ABI from Etherscan

Contract Name › Token

The commands will auto-generate a basic subgraph as a scaffold based on the veeFriendsNft contract address entered in as the argument to --from-contract. By using this contract address, the CLI will initialize a few things to the project to get you started (including fetching the ABIs and saving them in the ABIs directory).

Passing in the --index-events flag the CLI will automatically populate some code and configuration for you in schema.graphql, subgraph.yaml, and src/mapping.ts based on the contracts events emitted from the contract.

The schema is the GraphQL file for data definition. It will allow you to specify the data entities and their respective types. Examples are

• Bytes

• ID

• String

• Boolean

• Int

• BigInt

• BigDecimal

You can also use entities as types to define relationships. The ! means the value can't be empty.

Let’s set up the schema for the veeFriendsNft subgraph

type Token @entity {
  id: ID!
  tokenID: BigInt!
  createdAtTimestamp: BigInt!
  creator: User!
  owner: User!
}

type User @entity {
  id: ID!
  tokens: [Token!]! @derivedFrom(field: "owner")
  created: [Token!]! @derivedFrom(field: "creator")
}

The @derivedFrom field is used to perform a reverse lookup to create relationships amongst the data. Next, run the command below for the code generation.

Next, we proceed to set up the subgraph manifest, you can use this tool called Startblock to get the startBlock of your smart contract.

specVersion: 0.0.2
schema:
  file: ./schema.graphql
dataSources:
  - kind: ethereum/contract
    name: Token
    network: mainnet
    source:
      address: "0xa3AEe8BcE55BEeA1951EF834b99f3Ac60d1ABeeB"
      abi: Token
      startBlock: 12414465
    mapping:
      kind: ethereum/events
      apiVersion: 0.0.5
      language: wasm/assemblyscript
      entities:
        - Token
        - User
      abis:
        - name: Token
          file: ./abis/Token.json
      eventHandlers:
        - event: Transfer(indexed address,indexed address,indexed uint256)
          handler: handleTransfer
      file: ./src/mapping.ts

This set up the indexing mechanism for the veeFriendsNft smart contract and set event handlers to point to an Ethereum event to a function in the local project.

The next step is to set up the Assembly scripts mapping. Update your src/mappings.ts with the code below

import {
  Transfer as TransferEvent,
  Token as TokenContract
 } from "../generated/Token/Token"
 
 import {
  Token, User
 } from '../generated/schema'
 
 export function handleTransfer(event: TransferEvent): void {
  let token = Token.load(event.params.tokenId.toString());
  if (!token) {
    token = new Token(event.params.tokenId.toString());
    token.creator = event.params.to.toHexString();
    token.tokenID = event.params.tokenId;
    token.createdAtTimestamp = event.block.timestamp;
 
    let tokenContract = TokenContract.bind(event.address);
  }
  token.owner = event.params.to.toHexString();
  token.save();
 
  let user = User.load(event.params.to.toHexString());
  if (!user) {
    user = new User(event.params.to.toHexString());
    user.save();
  }
 }

The final step is to deploy your subgraph

graph auth --studio

This will prompt you to enter your DEPLOY_KEY which you can get from the subgraph page on the subgraph studio.

graph deploy --studio <Subgraph Name>

Once the subgraph is deployed, the Studio should update with a new UI allowing you to test queries in The GraphQL playground as well as view logs and other details. Below is a sample query.

{
  tokens(first: 5) {
    id
    tokenID
    createdAtTimestamp
    creator {
      id
    }
  }
  users(first: 5) {
    id
    tokens {
      id
    }
    created {
      id
    }
  }
}

The status of the subgraph is now set to Deployed, you can proceed to publish the subgraph. Deploying a subgraph is different from publishing it, publishing it makes it publicly accessible and unlocks the signaling feature.

To deploy to a network, click the Publish button. You will be prompted to choose which network you would like to deploy the subgraph. Now we’ve successfully created a subgraph using The Graph Studio 🎉🎉.

Companies Using The Graph

Using The Graph is definitely a no-brainer for individuals and companies in the web3 space, I’ll like to mention some amazing companies that use The Graph to index and query their data.

Uniswap: Swap, earn and build on the leading decentralized crypto trading protocol.

https://uniswap.org/

Livepeer: Livepeer is a decentralized video streaming network built on the Ethereum blockchain.

https://livepeer.org/

Synthetix: Synthetix is a new financial primitive enabling the creation of synthetic assets, offering unique derivatives and exposure to real-world assets on the blockchain.

https://synthetix.io/

Audius: Giving everyone the freedom to distribute, monetize, and stream unstoppable audio

https://audius.org/

Decentraland: Create, explore and trade in the first-ever virtual world owned by its users.

https://decentraland.org/

To learn more about The Graph and contribute to decentralized data indexing in the web3 space, I’ll suggest you check out the links below

https://thegraph.com/blog/roadmap-2022

Twitter:

https://twitter.com/graphprotocol

Discord:

https://discord.gg/vtvv7FP

Blog:

https://thegraph.com/blog/

The Graph AdvocatesDAO:

https://twitter.com/graphprotocol/status/1511378310475005954