The Graph: Memperbaiki kueri data Web3

solidity

kontrak pintar

kueri

the graph

react

Menengah

Markus Waas

soliditydeveloper.com

6 September 2020

8 menit baca

Kali ini kita akan melihat lebih dekat The Graph yang pada dasarnya menjadi bagian dari tumpukan standar untuk mengembangkan aplikasi terdesentralisasi (dapp) pada tahun lalu. Mari kita lihat terlebih dahulu bagaimana kita akan melakukan berbagai hal dengan cara tradisional...

Tanpa The Graph...

Jadi mari kita gunakan contoh sederhana untuk tujuan ilustrasi. Kita semua menyukai permainan, jadi bayangkan sebuah permainan sederhana dengan pengguna yang memasang taruhan:

pragma solidity 0.7.1;

contract Game {
    uint256 totalGamesPlayerWon = 0;
    uint256 totalGamesPlayerLost = 0;
    event BetPlaced(address player, uint256 value, bool hasWon);

    function placeBet() external payable {
        bool hasWon = evaluateBetForPlayer(msg.sender);

        if (hasWon) {
            (bool success, ) = msg.sender.call{ value: msg.value * 2 }('');
            require(success, "Transfer failed");
            totalGamesPlayerWon++;
        } else {
            totalGamesPlayerLost++;
        }

        emit BetPlaced(msg.sender, msg.value, hasWon);
    }
}

Sekarang katakanlah di aplikasi terdesentralisasi (dapp) kita, kita ingin menampilkan total taruhan, total permainan yang kalah/menang, dan juga memperbaruinya setiap kali seseorang bermain lagi. Pendekatannya adalah:

Mengambil totalGamesPlayerWon.
Mengambil totalGamesPlayerLost.
Berlangganan peristiwa BetPlaced.

Kita dapat mendengarkan peristiwa di Web3 (opens in a new tab) seperti yang ditunjukkan di sebelah kanan, tetapi ini memerlukan penanganan beberapa kasus.

GameContract.events.BetPlaced({
    fromBlock: 0
}, function(error, event) { console.log(event); })
.on('data', function(event) {
    // peristiwa dipicu
})
.on('changed', function(event) {
    // peristiwa dihapus kembali
})
.on('error', function(error, receipt) {
    // transaksi ditolak
});

Sekarang ini masih agak baik-baik saja untuk contoh sederhana kita. Tetapi katakanlah kita sekarang ingin menampilkan jumlah taruhan yang kalah/menang hanya untuk pemain saat ini. Sayangnya kita kurang beruntung, Anda lebih baik menyebarkan kontrak baru yang menyimpan nilai-nilai tersebut dan mengambilnya. Dan sekarang bayangkan kontrak pintar dan dapp yang jauh lebih rumit, segalanya bisa menjadi berantakan dengan cepat.

Anda dapat melihat bagaimana ini tidak optimal:

Tidak berfungsi untuk kontrak yang sudah disebarkan.
Biaya gas ekstra untuk menyimpan nilai-nilai tersebut.
Memerlukan panggilan lain untuk mengambil data untuk node Ethereum.

Sekarang mari kita lihat solusi yang lebih baik.

Izinkan saya memperkenalkan Anda pada GraphQL

Pertama mari kita bicara tentang GraphQL, yang awalnya dirancang dan diimplementasikan oleh Facebook. Anda mungkin familier dengan model REST API tradisional. Sekarang bayangkan sebagai gantinya Anda dapat menulis kueri untuk data yang persis Anda inginkan:

Kedua gambar tersebut cukup banyak menangkap esensi dari GraphQL. Dengan kueri di sebelah kanan kita dapat menentukan dengan tepat data apa yang kita inginkan, jadi di sana kita mendapatkan semuanya dalam satu permintaan dan tidak lebih dari apa yang kita butuhkan. Server GraphQL menangani pengambilan semua data yang diperlukan, sehingga sangat mudah digunakan oleh sisi konsumen frontend. Ini adalah penjelasan yang bagus (opens in a new tab) tentang bagaimana tepatnya server menangani kueri jika Anda tertarik.

Sekarang dengan pengetahuan itu, mari kita akhirnya melompat ke ruang rantai blok dan The Graph.

Apa itu The Graph?

Rantai blok adalah basis data terdesentralisasi, tetapi berbeda dengan apa yang biasanya terjadi, kita tidak memiliki bahasa kueri untuk basis data ini. Solusi untuk mengambil data sangat menyulitkan atau sama sekali tidak mungkin. The Graph adalah protokol terdesentralisasi untuk mengindeks dan mengkueri data rantai blok. Dan Anda mungkin sudah bisa menebaknya, ia menggunakan GraphQL sebagai bahasa kueri.

Contoh selalu menjadi yang terbaik untuk memahami sesuatu, jadi mari kita gunakan The Graph untuk contoh GameContract kita.

Cara membuat Subgraf

Definisi tentang cara mengindeks data disebut subgraf. Ini membutuhkan tiga komponen:

Manifes (subgraph.yaml)
Skema (schema.graphql)
Pemetaan (mapping.ts)

Manifes (`subgraph.yaml`)

Manifes adalah file konfigurasi kita dan mendefinisikan:

kontrak pintar mana yang akan diindeks (alamat, jaringan, ABI...)
peristiwa mana yang akan didengarkan
hal lain yang akan didengarkan seperti panggilan fungsi atau blok
fungsi pemetaan yang dipanggil (lihat mapping.ts di bawah)

Anda dapat mendefinisikan beberapa kontrak dan penangan di sini. Pengaturan tipikal akan memiliki folder subgraf di dalam proyek Hardhat dengan repositorinya sendiri. Kemudian Anda dapat dengan mudah mereferensikan ABI.

Untuk alasan kenyamanan, Anda mungkin juga ingin menggunakan alat templat seperti mustache. Kemudian Anda membuat subgraph.template.yaml dan memasukkan alamat berdasarkan penyebaran terbaru. Untuk contoh pengaturan yang lebih tingkat lanjut, lihat misalnya repo subgraf Aave (opens in a new tab).

Dan dokumentasi lengkapnya dapat dilihat di sini (opens in a new tab).

specVersion: 0.0.1
description: Placing Bets on Ethereum
repository: - GitHub link -
schema:
  file: ./schema.graphql
dataSources:
  - kind: ethereum/contract
    name: GameContract
    network: mainnet
    source:
      address: '0x2E6454...cf77eC'
      abi: GameContract
      startBlock: 6175244
    mapping:
      kind: ethereum/events
      apiVersion: 0.0.1
      language: wasm/assemblyscript
      entities:
        - GameContract
      abis:
        - name: GameContract
          file: ../build/contracts/GameContract.json
      eventHandlers:
        - event: PlacedBet(address,uint256,bool)
          handler: handleNewBet
      file: ./src/mapping.ts

Skema (`schema.graphql`)

Skema adalah definisi data GraphQL. Ini akan memungkinkan Anda untuk mendefinisikan entitas mana yang ada dan tipenya. Tipe yang didukung dari The Graph adalah

Bytes
ID
String
Boolean
Int
BigInt
BigDecimal

Anda juga dapat menggunakan entitas sebagai tipe untuk mendefinisikan hubungan. Dalam contoh kita, kita mendefinisikan hubungan 1-ke-banyak dari pemain ke taruhan. Tanda ! berarti nilainya tidak boleh kosong. Dokumentasi lengkapnya dapat dilihat di sini (opens in a new tab).

type Bet @entity {
  id: ID!
  player: Player!
  playerHasWon: Boolean!
  time: Int!
}

type Player @entity {
  id: ID!
  totalPlayedCount: Int
  hasWonCount: Int
  hasLostCount: Int
  bets: [Bet]!
}

Pemetaan (`mapping.ts`)

File pemetaan di The Graph mendefinisikan fungsi kita yang mengubah peristiwa yang masuk menjadi entitas. Ini ditulis dalam AssemblyScript, bagian dari TypeScript. Ini berarti ia dapat dikompilasi menjadi WASM (WebAssembly) untuk eksekusi pemetaan yang lebih efisien dan portabel.

Anda perlu mendefinisikan setiap fungsi yang dinamai dalam file subgraph.yaml, jadi dalam kasus kita, kita hanya membutuhkan satu: handleNewBet. Kita pertama-tama mencoba memuat entitas Player dari alamat pengirim sebagai id. Jika tidak ada, kita membuat entitas baru dan mengisinya dengan nilai awal.

Kemudian kita membuat entitas Bet baru. Id untuk ini adalah event.transaction.hash.toHex() + "-" + event.logIndex.toString() yang memastikan nilainya selalu unik. Hanya menggunakan hash tidaklah cukup karena seseorang mungkin memanggil fungsi placeBet beberapa kali dalam satu transaksi melalui kontrak pintar.

Terakhir kita dapat memperbarui entitas Player dengan semua data. Array tidak dapat didorong secara langsung, tetapi perlu diperbarui seperti yang ditunjukkan di sini. Kita menggunakan id untuk mereferensikan taruhan. Dan .save() diperlukan di akhir untuk menyimpan entitas.

Dokumentasi lengkapnya dapat dilihat di sini: https://thegraph.com/docs/en/developing/creating-a-subgraph/#writing-mappings (opens in a new tab). Anda juga dapat menambahkan keluaran pencatatan (logging) ke file pemetaan, lihat di sini (opens in a new tab).

import { Bet, Player } from "../generated/schema"
import { PlacedBet } from "../generated/GameContract/GameContract"

export function handleNewBet(event: PlacedBet): void {
  let player = Player.load(event.transaction.from.toHex())

  if (player == null) {
    // buat jika belum ada
    player = new Player(event.transaction.from.toHex())
    player.bets = new Array<string>(0)
    player.totalPlayedCount = 0
    player.hasWonCount = 0
    player.hasLostCount = 0
  }

  let bet = new Bet(
    event.transaction.hash.toHex() + "-" + event.logIndex.toString()
  )
  bet.player = player.id
  bet.playerHasWon = event.params.hasWon
  bet.time = event.block.timestamp
  bet.save()

  player.totalPlayedCount++
  if (event.params.hasWon) {
    player.hasWonCount++
  } else {
    player.hasLostCount++
  }

  // perbarui array seperti ini
  let bets = player.bets
  bets.push(bet.id)
  player.bets = bets

  player.save()
}

Menggunakannya di Frontend

Dengan menggunakan sesuatu seperti Apollo Boost, Anda dapat dengan mudah mengintegrasikan The Graph di aplikasi terdesentralisasi (dapp) React Anda (atau Apollo-Vue). Terutama saat menggunakan React hooks dan Apollo, mengambil data semudah menulis satu kueri GraphQL di komponen Anda. Pengaturan tipikal mungkin terlihat seperti ini:

// Lihat semua subgraf: https://thegraph.com/explorer/
const client = new ApolloClient({
  uri: "{{ subgraphUrl }}",
})

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
)

Dan sekarang kita dapat menulis misalnya kueri seperti ini. Ini akan mengambilkan kita

berapa kali pengguna saat ini telah menang
berapa kali pengguna saat ini telah kalah
daftar stempel waktu dengan semua taruhan sebelumnya

Semuanya dalam satu permintaan tunggal ke server GraphQL.

const myGraphQlQuery = gql`
    players(where: { id: $currentUser }) {
      totalPlayedCount
      hasWonCount
      hasLostCount
      bets {
        time
      }
    }
`

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

Tetapi kita kehilangan satu kepingan teka-teki terakhir dan itu adalah server. Anda dapat menjalankannya sendiri atau menggunakan layanan yang di-host.

Server The Graph

Graph Explorer: Layanan yang di-host

Cara termudah adalah menggunakan layanan yang di-host. Ikuti instruksi di sini (opens in a new tab) untuk menyebarkan subgraf. Untuk banyak proyek, Anda sebenarnya dapat menemukan subgraf yang ada di penjelajah (opens in a new tab).

Menjalankan node Anda sendiri

Sebagai alternatif, Anda dapat menjalankan node Anda sendiri. Dokumen di sini (opens in a new tab). Salah satu alasan untuk melakukan ini mungkin karena menggunakan jaringan yang tidak didukung oleh layanan yang di-host. Jaringan yang didukung saat ini dapat ditemukan di sini (opens in a new tab).

Masa depan yang terdesentralisasi

GraphQL juga mendukung aliran (streams) untuk peristiwa yang baru masuk. Ini didukung pada grafik melalui Substreams (opens in a new tab) yang saat ini dalam versi beta terbuka.

Pada tahun 2021 (opens in a new tab) The Graph memulai transisinya ke jaringan pengindeksan terdesentralisasi. Anda dapat membaca lebih lanjut tentang arsitektur jaringan pengindeksan terdesentralisasi ini di sini (opens in a new tab).

Dua aspek utama adalah:

Pengguna membayar pengindeks untuk kueri.
Pengindeks melakukan stake Graph Tokens (GRT).