The Graph: Indexado y consultas paso a paso
Published: 2023-10-10 00:02:15

---
title: The Graph: Indexado y consultas paso a paso
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tuvdrsz7srw5ujxyc569.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-09-25 19:27 +0000
---

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.

{% youtube RIbf52hK44I %}

## Antes de iniciar

Para este tutorial necesitarás [Metamask](https://metamask.io/), o cualquier otra wallet de tu preferencia, con fondos en Scroll Sepolia que puedes obtener desde la [Sepolia faucet](https://sepoliafaucet.com/) y luego los puedes bridgear a L2 usando el [Scroll Sepolia bridge](https://scroll.io/bridge). También puedes usar una [Scroll Sepolia Faucet](https://docs.scroll.io/en/user-guide/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.

```solidity
// 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](https://sepolia.scrollscan.dev/address/0x111690a4468ba9b57d08280b2166aff2bac65248)

Para más información sobre lanzando en Scroll visita la página de [deployment](https://docs.scroll.io/en/developers/guides/contract-deployment-tutorial/) y [verification](https://docs.scroll.io/en/developers/verifying-smart-contracts/).

## 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](https://thegraph.com/studio/subgraph/tribilin/), crea una cuenta y dá clic en `Create a Subgraph`.

![Botón para crear subgraphs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mn0j33jiqqziq5kl87m.png)

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).

![Formulario de creación de un Subgraph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4qh2h9o9mm0hlv442qv.png)

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`
```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.

![Cómo obtener el ABI de un contrato en Remix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pf5hfrifcy2ovmklqgfl.png)

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.

![Llave de deploy o lanzamiento en The Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojjzmvjquhwzxehtksup.png)

```
# 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.

![API url de un graphqli de un subgraph en The Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkvf01yiyewx92883n4o.png)

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.

```javascript
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/](https://thegraph.com/docs/en/quick-start/)

**¡Gracias por ver este tutorial!**

Sígueme en dev.to y en [Youtube](https://www.youtube.com/channel/UCNRB4tgwp09z4391JRjEsRA) para todo lo relacionado al desarrollo en Blockchain en Español.