## Deploying a Subgraph Using The Graph Protocol

### Setting Up the Subgraph Studio

1. Visit [The Graph website](https://thegraph.com/en/).
2. Click on "Products" and select "Subgraph Studio."
3. Connect your wallet.
4. Complete all account verification and signing processes.

Once you've completed the above steps, click on the "Create a Subgraph" button. Choose a name that suits the subgraph you want to create (in this tutorial, we'll name it `subgraph-tutorial`).

Next, fill in all the details of your subgraph. On the side panel, you'll see several commands that you'll need to follow in your terminal.

### Scaffolding the Subgraph via the Terminal

1. Initialize a folder and navigate into it:

    mkdir subgraph-tutorial 
    cd subgraph-tutorial

2. Install The Graph CLI:

    npm install -g @graphprotocol/graph-cli

3. Initialize the subgraph:

    graph init --studio subgraph-tutorial

- Select the protocol, slug, network, and contract address to proceed. In this tutorial, we'll use the Ethereum mainnet and the Uniswap token with the contract address `0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984`.

- If the ABI isn't fetched automatically, create a `.json` file, save the ABI, and provide the path to the ABI. Then, pick a block number, set the contract name (it's best to use the actual contract name), and select `true` to index contract events as entities.

4. Authenticate and deploy:

    graph auth --studio <authToken>

After authenticating, proceed with the following steps:
1. Navigate into the subgraph directory:

        cd subgraph-tutorial

2. Run the following commands to ensure type safety and compile your subgraph whenever you make changes:

        graph codegen
        graph build

3. Review the schema file, as it defines what you can query from the frontend.

### Deploying the Subgraph to Subgraph Studio and Working with the Studio

To deploy your subgraph to the Subgraph Studio, use the following command:

graph deploy --studio uni-sg-tut

You can then check the Subgraph Studio to see it indexing. Head over to the playground to demo the requests and see how it works.

These requests can then be integrated into your frontend and utilized in a dApp. Your subgraph can be published and made available for other developers to use. Keep in mind that this is a hosted service, and publishing will require some gas fees.

## Building a Dapp and leveraging the Graph in real time

- Network faucet for base - https://docs.base.org/tools/network-faucets
- Network details for base
- Name Value
Network Name Base Sepolia
Description A public testnet for Base.
RPC Endpoint https://sepolia.base.org
Rate limited and not for production systems.
Chain ID 84532
Currency Symbol ETH
Block Explorer https://sepolia-explorer.base.org

Setup in metamask or download coinbbase wallet https://chromewebstore.google.com/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad?hl=en and switch network to base sepolia
### Initializing environments
`npm create vite@latest my-app -- --template react` to initialize a react project
- `cd my-app` to enter the project folder
- `yarn add hardhat` to setup the smart contract development and testing suite
- `npx hardhat init` to initiate hardhat
- Follow the prompt and select Create a Javascript project.
Press “y" to agree to other options and continue.https://hackmd.io/Nk1sAIyrQDybqbVt8kQiPA?both#
- Setup Hardhat config for deploy to testnet
- Enter the smart contract code

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract SimpleRecord {
    // Define a Record structure
    struct Record {
        uint256 id;
        string data;
        address creator;
    }

    // State variables
    uint256 public recordCount = 0;
    mapping(uint256 => Record) public records;

    // Event to be emitted when a new record is created
    event RecordCreated(
        uint256 id,
        string data,
        address indexed creator
    );

    // Function to create a new record
    function createRecord(string memory _data) public {
        recordCount++;
        records[recordCount] = Record(recordCount, _data, msg.sender);

        // Emit the RecordCreated event
        emit RecordCreated(recordCount, _data, msg.sender);
    }

    // Function to retrieve a record by ID
    function getRecord(uint256 _id) public view returns (Record memory) {
        return records[_id];
    }
}

- Update Hardhat config to

require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();

/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
    solidity: "0.8.23",
    networks: {
        "base-sepolia": {
            chainId: 84532,
            url: "https://sepolia.base.org", // Insert Infura Celo Url here
            accounts: [`0x${process.env.WALLET_KEY}`],
        },
    },
};

- Install the toolbox and dotenv

- ```npx hardhat compile``` to compile the smart contract
- Now to deploy the Smart contract , Create this set of files : scripts/deploy.js
- Add This :-1: 

require("hardhat");

async function main() {
const SimpleRecord = await ethers.deployContract("SimpleRecord");

await SimpleRecord.waitForDeployment();

console.log("SimpleRecord Contract Deployed at " + SimpleRecord.target);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});

-  Next run the following command to deploy to base sepolia ```npx hardhat run scripts/deploy.js --network base-sepolia```
-  Head over to https://sepolia.basescan.org/ to confirm the address has actually been deployed , then verify the contract. Fetch Abi from artifact folder

Now we can head over to the dapp section .

- Open src/app.jsx and update with the following code, Note our dapp would allow us Create record and also get record based on its ID

import "./App.css";
import React from "react";
import { useState } from "react";
import { ethers, BrowserProvider } from "ethers";

// Import the json-file from the ABI
import SimpleRecord from "../artifacts/contracts/SimpleRecord.sol/SimpleRecord.json";

// Store the contract address in a variable
const simpleRecordAddress = "0x98F7eDaB05Cd392232D317e250CE3337981401D9"; // Deployed to testnet

const App = () => {
// Store Record details in a local state
const [record, setRecordValue] = useState();
const [id, setIdValue] = useState();
const [fetchedRecord, setFetchedRecordValue] = useState();

// Request access to User's MetaMask account
const requestAccount = async () => {
await window.ethereum.request({ method: "eth_requestAccounts" });
};

// Function for retrieving record value from smart contract.
const getRecord = async () => {
if (!id) return;
if (typeof window.ethereum !== "undefined") {
const web3Provider = new ethers.BrowserProvider(window.ethereum);
const contract = new ethers.Contract(
simpleRecordAddress,
SimpleRecord.abi,
web3Provider
);
try {
const data = await contract.getRecord(id);
console.log(`Data: ${data}`);
setFetchedRecordValue(data);
} catch (error) {
console.error(error);
}
}
};

// Function for updating message value on smart contract
const createRecord = async () => {
if (!record) return;
if (typeof window.ethereum !== "undefined") {
await requestAccount();
const web3Provider = new ethers.BrowserProvider(window.ethereum);
const signer = await web3Provider.getSigner();
const contract = new ethers.Contract(
simpleRecordAddress,
SimpleRecord.abi,
signer
);
const transaction = await contract.createRecord(record);
await transaction.wait();
setRecordValue("");
alert("created successfully");
}
};

return (
<div className="container">
<button onClick={getRecord}>FetchRecord</button>
<button onClick={createRecord}>Create Record</button>

<input
onChange={(e) => setRecordValue(e.target.value)}
placeholder="Write your Record here..."
/>
<input
onChange={(e) => setIdValue(e.target.value)}
placeholder="Write The id of record you want to fetch here..."
/>
{fetchedRecord && (
<p>{` Id of ${fetchedRecord[0]} with value of ${fetchedRecord[1]} and creator of address ${fetchedRecord[2]}`}</p>
)}
</div>
);
};

export default App;

Then Update src/App.css with :-1: 

#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

/* styles.css */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}

button {
background-color: #4caf50; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #45a049;
}

input {
padding: 10px;
margin: 10px;
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s ease;
}

input:focus {
border-color: #4caf50;
outline: none;
}

Then to View it , run ```yarn run dev```
Test functions and all

- Now we build our graph to make things work better
- `yarn global add @graphprotocol/graph-cli` to install graph cli
- `graph init ` to initialize our subgraph then fill in all details
- Follow the prompt > ethereum > subgraphstudio > pick nice slug > base-sepolia> input contract address > index entities - true
- Head over to subgraph studio, create and follow the prompts 
- Remember the endpoint created for you

Now we install the graphQL apollo client to interact with the frontend
- We use `yarn add @apollo/client graphql` to install it
- Then import it in our app.jsx with 

import { ApolloProvider, ApolloClient, InMemoryCache, gql, useQuery } from '@apollo/client';

- Create a client that would be used when querying

const client = new ApolloClient({
uri: 'https://api.thegraph.com/subgraphs/name/<GITHUB_USER>/<SUBGRAPH_NAME>',
cache: new InMemoryCache(),
});

- Then a query to collect first 3 values from the indexed data 

const GET_DATA = gql`
query {
entities {
id
field1
field2
}
}
`;

- Remember to Wrap App component with Apollo Provider and pass client as a prop
- ` <ApolloProvider client={client}>`

- Create a data fetcher component that will fetch all data 

const client = new ApolloClient({
uri: "https://api.studio.thegraph.com/query/87032/simplerecords/version/latest",
cache: new InMemoryCache(),
});

const GET_DATA = gql`
{
recordCreateds(first: 5) {
id
SimpleRecord_id
data
creator
}
}
`;

function DataFetcher() {
const { loading, error, data } = useQuery(GET_DATA);

if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;

return (
<div>
{data.recordCreateds.map((entity) => (
<div key={entity.SimpleRecord_id}>
<p>{entity.SimpleRecord_id}</p>
<p>{entity.data}</p>
<p>{entity.creator}</p>
</div>
))}
</div>
);
}

- This component can further be utilized in our project
- By importing it. Final code should look like this 

import "./App.css";
import React from "react";
import { useState } from "react";
import { ethers, BrowserProvider } from "ethers";

// Import the json-file from the ABI
import SimpleRecord from "../artifacts/contracts/SimpleRecord.sol/SimpleRecord.json";

// Store the contract address in a variable
const simpleRecordAddress = "0x98F7eDaB05Cd392232D317e250CE3337981401D9"; // Deployed to testnet

//GRAPHQL ADDITION
import {
ApolloProvider,
ApolloClient,
InMemoryCache,
gql,
useQuery,
} from "@apollo/client";

const client = new ApolloClient({
uri: "https://api.studio.thegraph.com/query/87032/simplerecords/version/latest",
cache: new InMemoryCache(),
});

const GET_DATA = gql`
{
recordCreateds(first: 5) {
id
SimpleRecord_id
data
creator
}
}
`;

function DataFetcher() {
const { loading, error, data } = useQuery(GET_DATA);

if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;

return (
<div>
{data.recordCreateds.map((entity) => (
<div key={entity.SimpleRecord_id}>
<p>{entity.SimpleRecord_id}</p>
<p>{entity.data}</p>
<p>{entity.creator}</p>
</div>
))}
</div>
);
}

const App = () => {
// Store Record details in a local state
const [record, setRecordValue] = useState();
const [id, setIdValue] = useState();
const [fetchedRecord, setFetchedRecordValue] = useState();

// Request access to User's MetaMask account
const requestAccount = async () => {
await window.ethereum.request({ method: "eth_requestAccounts" });
};

// Function for retrieving record value from smart contract.
const getRecord = async () => {
if (!id) return;
if (typeof window.ethereum !== "undefined") {
const web3Provider = new ethers.BrowserProvider(window.ethereum);
const contract = new ethers.Contract(
simpleRecordAddress,
SimpleRecord.abi,
web3Provider
);
try {
const data = await contract.getRecord(id);
console.log(`Data: ${data}`);
setFetchedRecordValue(data);
} catch (error) {
console.error(error);
}
}
};

// Function for updating message value on smart contract
const createRecord = async () => {
if (!record) return;
if (typeof window.ethereum !== "undefined") {
await requestAccount();
const web3Provider = new ethers.BrowserProvider(window.ethereum);
const signer = await web3Provider.getSigner();
const contract = new ethers.Contract(
simpleRecordAddress,
SimpleRecord.abi,
signer
);
const transaction = await contract.createRecord(record);
await transaction.wait();
setRecordValue("");
alert("created successfully");
}
};

return (
<ApolloProvider client={client}>
<div className="container">
<button onClick={getRecord}>FetchRecord</button>
<button onClick={createRecord}>Create Record</button>

<input
onChange={(e) => setRecordValue(e.target.value)}
placeholder="Write your Record here..."
/>
<input
onChange={(e) => setIdValue(e.target.value)}
placeholder="Write The id of record you want to fetch here..."
/>
{fetchedRecord && (
<p>{` Id of ${fetchedRecord[0]} with value of ${fetchedRecord[1]} and creator of address ${fetchedRecord[2]}`}</p>
)}
</div>
<DataFetcher />
</ApolloProvider>
);
};

export default App;