Los datos históricos de los contratos inteligentes de Ethereum son abiertos y verificables, sin embargo, en muchos casos no es fácil consultarlos. Para resolver este problema, el equipo de The Graph creó una plataforma de indexación que ayuda a los desarrolladores a recopilar y exponer en APIs la información sobre cualquier contrato inteligente. Tener esta información a mano abre la puerta a muchas cosas entre ellas paneles informativos perspicaces, mejoras en la experiencia del usuario en aplicaciones descentralizadas o incluso nuevos casos de uso de blockchain.

En este tutorial, cubriremos cómo almacenar datos creando un subgraph utilizando The Graph Studio y cómo consultar información realizando llamadas a la API en GraphQL.

Antes de iniciar

Para este tutorial necesitarás Metamask, o cualquier otra wallet de tu preferencia, con fondos en Scroll Sepolia que puedes obtener desde la Sepolia faucet y luego los puedes bridgear a L2 usando el Scroll Sepolia bridge. También puedes usar una Scroll Sepolia Faucet para recibir fondos directamente en L2.

En esta guía lanzaremos en Scroll Sepolia. También explicaré los cambios exactos que debes realizar para lanzar en cualquier otra chain EVM.

1. Lanza un Smart Contract

Comencemos lanzando un contrato inteligente ejemplo. Para este tutorial, lanzaremos un contrato Greeter. Ten en cuenta que estamos emitiendo un evento cuando se llama a la función greet. Esto se debe a que es muy fácil para The Graph recopilar información de los eventos emitidos. Sin embargo, si ya has implementado un contrato que no tiene eventos, también es posible que The Graph lo indexe.

// SPDX-License-Identifier: MIT
pragma solidity 0.8.23;

contract TheGraphGreeter
{
    string public greeting;
    event Greeted(string hello, address sender);

    function greet(string memory greeting_) public
    {
        greeting = greeting_;
        emit Greeted(greeting, msg.sender);
    }
}

Para este ejemplo usaremos Scroll Sepolia testnet, donde deployé y verifiqué el contrato en etherscan en:
0x111690a4468ba9b57d08280b2166aff2bac65248

Para más información sobre lanzando en Scroll visita la página de deployment y verification.

2. Crea un Subgraph

Ahora lanzaremos un subgraph desde el The Graph Studio. Un subgraph es donde se le indica a The Graph qué información se desea indexar y cómo se vá a mostrar en la API.

Primero dirígete al thegraph.com/studio, crea una cuenta y dá clic en Create a Subgraph.

Ahora, indícale el nombre de tu subgraph y selecciona la chain donde vas a deployarlo (para usar The Graph Studio, la chain debe de estar integrada en The Graph).

Ahora que lanzaste un subgraph, vamos a otorgarle la información necesaria para lanzarlo.

3. Lanzar un Subgraph

En la terminal, crea un nuevo folder y salva el ABI de tu smart contract en un archivo que llamaremos MyABI.json.

Este es el ABI de nuestro contrato Greeter.

MyABI.json

[
    {
        "inputs": [
            {
                "internalType": "string",
                "name": "greeting_",
                "type": "string"
            }
        ],
        "name": "greet",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": false,
                "internalType": "string",
                "name": "hello",
                "type": "string"
            },
            {
                "indexed": false,
                "internalType": "address",
                "name": "sender",
                "type": "address"
            }
        ],
        "name": "Greeted",
        "type": "event"
    },
    {
        "inputs": [],
        "name": "greeting",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    }
]

Sí lanzaste tu contrato usando Remix, puedes obtener tu ABI en la pestaña de compilador.

En el mismo directorio donde guardaste tu ABI, ejecuta los comandos siguientes.

Pero antes de hacerlo asegúrate de establecer tu llave en la variable DEPLOYKEY. Puedes obtener tu llave en el Subgraph Studio.

# 1. Instala la CLI de The Graph
npm install -g @graphprotocol/graph-cli
# 2. Inicializa, authentícate y lanza tu subgraph
graph init --studio my-subgraph
graph auth --studio DEPLOYKEY
cd my-subgraph
graph codegen && graph build
graph deploy --studio my-subgraph

Esto vá a mostrarte un menú en la línea de comandos que puedes llenar de la siguiente manera:

• Protocol: ethereum
• Subgraph slug: my-subgraph
• Directory: my-subgraph
• Ethereum Network: scroll-sepolia
• Contract address: 0xADDRESSDETUGREETING
• ABI file (path): ../MyABI.json

4. Consulta la información

Una vez que el subgraph ha sido lanzado, generará una API en graphql que puedes consultar desde el browser.

En la interfaz de graphqli intenta hacer la siguiente consulta. Recuerda llamar la función greet de antemano para tener información indexada.

{
  greeteds(arg: "value") {
    hello
  }
}

Usualmente vas a estar haciendo consultas a tu subgraph desde la web. Para hacerlo puedes enviar una llamada tipo POST con tu consulta en el formato de graphql como lo indica este ejemplo:

Recuerda reemplazar YOURAPIURL con tu Production Query URL que puedes obtener en el The Graph Studio.

El siguiente javascript debería devolver toda la data del subgraph.

await fetch('YOURAPIURL', {
  method: 'POST',
  body: JSON.stringify({
    query: `{
  greeteds(arg: "value") {
    hello
  }}`
  }),
  headers: {
      'content-type': 'application/json'
  }
}).then(async (data) => {
    // Console log our return data
    console.log(await data.json());
});

¡Con esto deberías poder mostrar en tu website información recolectada on-chain!

Documentación oficial: https://thegraph.com/docs/en/

¡Gracias por ver este tutorial!

Sígueme en dev.to y en Youtube para todo lo relacionado al desarrollo en Blockchain en Español.