09.12.2024

Lição 271: Integrando The Graph em DApps

Nesta lição, exploraremos como integrar o The Graph em aplicações descentralizadas (DApps). O The Graph é um protocolo para indexar e consultar dados de blockchain, facilitando o acesso e a interação dos desenvolvedores com esses dados em suas aplicações. Vamos percorrer o processo, incluindo conceitos importantes e trechos de código.

O que é The Graph?

O The Graph é um protocolo descentralizado que permite que os desenvolvedores construam APIs, conhecidas como subgrafos, que podem consultar dados de redes de blockchain de maneira eficiente. Os subgrafos podem ser consultados usando a linguagem de consulta GraphQL, que permite consultas flexíveis e poderosas.

Configurando um Subgraf

Antes de integrar o The Graph em nosso DApp, precisamos criar um subgraf. Aqui está um guia passo a passo para configurar um subgraf.

1. Instalando Dependências

Primeiro, certifique-se de que você tem o Node.js instalado. Em seguida, instale @graphprotocol/graph-cli globalmente:

npm install -g @graphprotocol/graph-cli

2. Criando um Subgraf

No diretório do seu projeto, crie um novo subgraf:

graph init --from-contract <SEU_ENDERECO_DE_CONTRATO> --network <REDE> --protocol <PROTOCOLO>

Certifique-se de substituir <SEU_ENDERECO_DE_CONTRATO>, <REDE> e <PROTOCOLO> com valores apropriados relevantes ao seu projeto.

3. Definindo o Seu Esquema Graph

Em seguida, defina a estrutura de dados do seu subgraf no arquivo schema.graphql. Este arquivo descreve as entidades que você irá rastrear no seu subgraf.

type Post @entity {
  id: ID!
  title: String!
  content: String!
  author: String!
}

4. Criando Mapeamentos

Os mapeamentos definem como os dados da blockchain serão processados e armazenados no seu subgraf. Você criará um arquivo chamado mapping.ts no diretório src. Cada evento na blockchain que você deseja ouvir terá um manipulador correspondente.

import { Post } from "../generated/schema";
import { NewPost } from "../generated/MyContract/MyContract";

export function handleNewPost(event: NewPost): void {
  let post = new Post(event.params.id.toString());
  post.title = event.params.title;
  post.content = event.params.content;
  post.author = event.params.author;
  post.save();
}

5. Implantando Seu Subgraf

Execute o seguinte comando para implantar seu subgraf:

graph deploy --product hosted-service <USUARIO_GITHUB>/<NOME_SUBGRAF>

Certifique-se de substituir <USUARIO_GITHUB> e <NOME_SUBGRAF> pelo seu nome de usuário do GitHub e o nome do seu subgraf.

Consultando Dados do The Graph

Uma vez que seu subgraf esteja implantado, você pode começar a consultá-lo usando GraphQL. Aqui está como fazer requisições a partir do seu DApp frontend.

1. Configurando Apollo Client

Primeiro, instale o Apollo Client na sua aplicação frontend:

npm install @apollo/client graphql

2. Consultando Dados

Você pode criar uma consulta para buscar os dados do seu subgraf. Por exemplo, para obter todos os posts:

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

const client = new ApolloClient({
  uri: 'https://api.thegraph.com/subgraphs/name/seu-subgraf',
  cache: new InMemoryCache()
});

const GET_POSTS = gql`
  {
    posts {
      id
      title
      content
      author
    }
  }
`;

client
  .query({
    query: GET_POSTS,
  })
  .then((response) => console.log(response.data.posts))
  .catch((error) => console.error(error));

3. Exibindo Dados

Você pode então exibir os dados consultados em seus componentes React:

import React, { useEffect, useState } from 'react';

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    client.query({ query: GET_POSTS })
      .then(response => setPosts(response.data.posts))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
          <p><strong>Autor:</strong> {post.author}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

Conclusão

Nesta lição, abordamos o básico da integração do The Graph em seu DApp. Definimos um subgraf, criamos mapeamentos para armazenar dados e implementamos consultas em uma aplicação frontend usando Apollo Client. Ao utilizar o The Graph, você pode interagir de forma eficiente com os dados da blockchain, tornando seus DApps mais dinâmicos e responsivos.

Lembre-se, embora esta seja apenas uma introdução básica, o The Graph oferece um grande potencial para a construção de DApps escaláveis e eficientes. A possibilidade de consultas complexas permite que os desenvolvedores criem experiências de usuário mais ricas na blockchain.

Video

Navigation