Dapp 接入 TheGraph 教程

1.TheGraph介绍

什么是 TheGraph

TheGraph官网基本介绍 说得很清楚：The Graph 是一个去中心化的协议，用于索引和查询区块链的数据，首先是从以太坊开始的。 它使查询那些难以直接查询的数据成为可能。

image.png

在之前，dapp前端直接与智能合约后端对接，对于一些数据的查询会异常的艰难。我们需要抽象出一个业务中间层，将dapp前端与智能合约后端解耦：
dapp前端 => TheGraph => 智能合约后端。

这样，智能合约专注于底层的逻辑和存储，而TheGraph帮我们更好的获取业务层所需的数据。怎么样，是不是和BFF的思想类似，其实GraphQL也是前端BFF的一种方案。

TheGraph 是如何工作的

流程遵循这些步骤：

1. 一个去中心化的应用程序通过智能合约上的交易向以太坊添加数据。
2. 智能合约在处理交易时，会发出一个或多个事件。
3. Graph 节点不断扫描以太坊的新区块和它们可能包含的子图的数据。
4. Graph 节点在这些区块中为你的子图找到 Ethereum 事件并运行你提供的映射处理程序。 映射是一个 WASM 模块，它创建或更新 Graph Node 存储的数据实体，以响应 Ethereum 事件。
5. 去中心化的应用程序使用节点的GraphQL 端点，从区块链的索引中查询 Graph 节点的数据。 Graph 节点反过来将 GraphQL 查询转化为对其底层数据存储的查询，以便利用存储的索引功能来获取这些数据。 去中心化的应用程序在一个丰富的用户界面中为终端用户显示这些数据，他们用这些数据在以太坊上发行新的交易。 就这样周而复始。

什么是 subgraph

使用 TheGraph 要创建子图，即 subgraph。subgraph 定义了 Graph 从以太坊索引哪些数据，以及如何存储这些数据。 也就是让用户定义如何去查询和返回数据。

image.png

subgraph 类似BFF层需要由开发者创建并部署一个项目，下面会详细讲到。

2. React 接入 TheGraph

由上面的整体架构可知，我们要接入 TheGraph，我们要做好以下准备：

• dapp前端项目
• subgraph BFF项目
• 智能合约后端

其中，dapp前端项目我使用React Next.js + Truffle + ethers.js搭建；一个ERC721代币合约已部署到goerli测试网，限于篇幅这里自己准备一下Demo就好。下面主要讲 subgraph 的搭建。

创建Subgraph (https://thegraph.com/docs/zh/cookbook/quick-start/)

在官网找到 Add Subgraph 进行创建：

image.png image.png

创建成功后自动跳转到 Dashboard 这里可以看到这个subgraph，按照其下面的 Install、Init、Deploy 在本地电脑进行创建项目。

image.png

Init 这里有两处比较坑的是
1.从Etherscan拉取abi json文件失败：这里我手动提供一下本地编译好的。
2.yarn安装依赖失败：这里我手动停掉，用npm安装，换了几个源尝试安装才成功。

image.png

初始化后生成的项目结构如下：

image.png

接着走完上面的 Deploy 操作后，就可以在网站上使用 GraphQL 语法 进行查询了：
（界面出来后还需等待几分钟，才可以正式使用。）

image.png

React项目接入查询 （https://www.apollographql.com/docs/react/get-started/）

对于前端接入，也已经有各种 npm 包了，按照文档接入即可。示例：

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

const client = new ApolloClient({
  uri: process.env.GRAPHQL_ENDPOINT,
  cache: new InMemoryCache(),
});

client
  .query({
    query: gql`
      query GetLocations {
        approvals(first: 5) {
          id
          owner
          approved
          tokenId
        }
        approvalForAlls(first: 5) {
          id
          owner
          operator
          approved
        }
      }
    `,
  })
  .then((result) => console.log("result:", result));

其中API链接可在这里查看：

image.png

3. 参考

• 以太坊中GraphQL简介及使用
• 在以太坊上构建 GraphQL API
• [译] 使用 TheGraph 完善Web3 事件数据检索
• The Graph入门教程：如何索引合约事件
• 剖析DeFi借贷产品之Compound：合约篇