Subgraph

Introduction​

Web3Task utilizes a Subgraph that can be deployed on the local network or executed in the front end to fetch data quickly and effectively.

Running subgraph locally

Prerequisites

Install dependencies

NOTE When choosing between NPM and Yarn for your project, it's generally recommended to stick with the package manager you started with. If you initially used NPM, it's best to continue using NPM for any future package installations. Likewise, if you began with Yarn, it's best to stick with Yarn for future package installations. This helps to maintain consistency and avoid potential conflicts between the two package managers.

Guide to install docker and Nodejs

Docker Desktop

nodeJS LTS

Install dependencies inside the web3task-contracts directory

cd web3task-contracts
yarn
npm i

NPM or Yarn to install the graph-cli

npm install @graphprotocol/graph-cli
or
yarn add @graphprotocol/graph-cli

Setting Up Local Blockchain

Run a Hardhat node:

npx hardhat node

The node will generate some accounts. You can realize they are already set at .env.sample, you should just let it be.

Add the first one to Metamask to be the leader and the second to be the member. The account will be:

0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
0x70997970C51812dc3A010C7d01b50e0d17dc79C8

To add the localhost network to metamask, click on the network dropdown and select Custom RPC. Fill in the following fields:

  • Network Name: localhost

  • New RPC URL: http://localhost:8545

  • Chain ID: 31337

  • Currency Symbol: ETH

NOTE

Use the recommended accounts to avoid errors.

Deploying Smart Contracts in the Localhost

Makefile will set everything for us, just run:

make mocks

Installing dependencies of subgraph

cd web3task-subgraph
npm i

Running docker

Go to the graph-node directory

cd subgraph/graph-node

Make sure there is not any residual file remaining in the directory

rm -rf graph-node/data/

start the docker

docker-compose up

You should see the log looking like this for the docker:

    *graph-node-graph-node-1  |* Oct 15 04:44:57.420 INFO Downloading latest blocks from Ethereum, this may take a few minutes..., provider: localhost-rpc-0, component: EthereumPollingBlockIngestor

And looking something like this for hardhat:

    eth_blockNumber (2)
    eth_getBlockByNumber (19)
    eth_blockNumber (2)
    eth_getBlockByNumber (14)

Create a subgraph

cd web3task-subgraph
graph create --node http://localhost:8020/ subgraph/web3task

Deploy the subgraph

graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 subgraph/web3task

The Graph Explorer

IMPORTANT

You must run the test scripts on the local network to generate events to check on The Graph Explorer with queries. In case that step is skipped, it won't be possible to fetch data from the subgraph.

Query Examples​

Below are some sample queries you can use to gather information from the Web3Task contracts.

You can build your own queries using GraphQL Explorer to test it out and query exactly what you need.

Updated tasks​

Retrieve all tasks that have been updated.

{
  taskUpdateds {
    id
    taskId
    status
    blockNumber
    transactionHash
  }
}

Querying Authorized Personnel for a Specific Role​

Fetch all personnel authorized for a specific role.

{
  authorizePersonnels(where: { roleId: 123 }) {
    id
    roleId
    authorizedAddress
    isAuthorized
    blockNumber
    transactionHash
  }
}

All approvals

Fetch all approvals.

{
 approvals {
   id
   owner
   approved
   tokenId
   blockNumber
   blockTimestamp
   transactionHash
 }
}

In case you update the smart contract with new events to be added

  1. Cancel and clean the docker. In the graph-node folder running the docker, press crtl + c and type docker-compose down, then delete the data folder rm -rf /data

  2. Update the smart contract and compile it

  3. Update the files web3task-subgraph/networks.json and the web3task-subgraph/subgraph.yaml with the new address

  4. Copy and paste the new ABI on web3task-subgraph/abis/TasksManager.json

  5. Update the file web3task-subgraph/schema.graphql with the new entities

  6. Update the file web3task-subgraph/subgraph.ymal with the new event handlers

  7. Update the file web3task-subgraph/src/tasks-manager.ts with the new functions and imports

  8. Run the commands graph codegen and graph build --network localhost in the web3task-subgraph folder.

  9. Deploy the new version of the subgraph graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 subgraph/web3task

Deploying to Tesnet and Mainnet

  1. Access the studio https://thegraph.com/studio/, connect your wallet and create a subgraph

  2. Give a name and select a network

  3. Run the command line: graph init --studio <your subgraph name>

  4. Choose the protocol you want to deploy the subgraph

  5. Create the slug which will be the unique identifier your subgraph will be identified by

  6. Create the name of the directory that will have the subgraph files

  7. Choose the network you want to deploy the subgraph

  8. Fill the address field with the smart contract deployed on the network

  9. Set the path to the ABI file

  10. Fill the block in which the contract was deployed to

  11. Give the name of the contract

  12. Press "Y" to index events as entities

  13. Press "n" if you don't want to add another contract.

  14. run the command graph auth --studio <your subgraph deploy key>

  15. Go to the subgraph's directory cd web3task-subgraph

  16. Run the commands graph codegen && graph build to generate the necessary files

  17. Run the command graph deploy --studio web3task-subgraph to deploy the subgraph

Use The Graph Studio to play around with the queries. You can use the query mentioned earlier to start.

Executing Subgraph in the frontend

Prerequisites

Node service.js

Install dependencies

Install dependencies inside the web3task-frontend directory

cd web3task-frontend
yarn
or
npm i

Execute the subgraph service

Node src/services/subgraph-queries.ts

This will execute an example query that will retrieve data from the Web3Task smart contract deployed to the Mumbai testnet.

To test other queries, you can follow the previous examples by editing the file web3task-frontend/src/services/subgraph-queries.ts

PreviousIWeb3TaskNextFAQ

Last updated