GRAP:The Graph 入门教程：如何索引合约事件_PepeTheGrove

编写智能合约时，通常状态的变化是通过触发一个事件来表达，TheGraph则是捕捉区块链事件并提供一个查询事件的GraphQL接口，让我们可以方便的跟踪数据的变化。实际上很多DEFI协议及都是TheGraph来基于查询数据。

这篇TheGraph教程在官方的教程基础上，进行了一些补充扩展主要包含以下内容：

在Ropsten部署一个合约，并调用触发事件。

创建定义数据索引的Subgraph。

部署Subgraph到TheGraph，实现数据索引。

在前端DApp中查询索引数据。

本教程的完整代码已上传到GitHub:https://github

Gravatarpublicgravatars;mapping(uint=>address)publicgravatarToOwner;mapping(address=>uint)publicownerToGravatar;functioncreateGravatar(string_displayName,string_imageUrl)public{require(ownerToGravatar==0);uintid=gravatars

functionupdateGravatarName(string_displayName)public{require(ownerToGravatar!=0);require(msg

}

可以看到合约里在创建和更新时分别触发了NewGravatar和UpdatedGravatar事件，稍后再subgraph里，将跟踪这两个事件，但是需要我们先把合约部署到网络上，这里使用以太坊测试网Ropsten：

module.exports={networks:{ropsten:{provider:function(){returnnewHDWalletProvider(process.env.MNEMONIC,`https://ropsten.infura.io/v3/${process.env.ROPSTEN_INFURA_API_KEY}`。,network_id:'3',},}}

这里为了安全考虑，把助记词和APIKEY保存在.env文件中

添加部署脚本2_deploy_contract.js：

constGravatarRegistry=artifacts.require('./GravatarRegistry.sol')module.exports=asyncfunction(deployer){awaitdeployer.deploy(GravatarRegistry。

添加执行交易脚本，以便触发事件3_create_gravatars.js：

constGravatarRegistry=artifacts.require('./GravatarRegistry.sol')module.exports=asyncfunction(deployer,network,accounts){constregistry=awaitGravatarRegistry.deployed()console.log('Accountaddress:',registry.address)awaitregistry.createGravatar('Carl','https://thegraph.com/img/team/team_04.png',{from:accounts,}。

然后执行trufflemigrate--networkropsten以便完成部署和执行createGravatar交易，控制台里会打印出GravatarRegistry合约部署的地址，复制这个合约地址，后面在编写subgraph需要使用到。

2.创建定义数据索引的Subgraph

TheGraph中定义如何为数据建立索引，称为Subgraph，它包含三个组件：

Manifest清单(subgraph.yaml)-定义配置项

Schema模式(schema.graphql)-定义数据

Mapping映射(mapping.ts)-定义事件到数据的转换

后面我们将逐一介绍他们的作用及如何来编写。

在TheGraph创建一个Subgraph空间

因为需要借助TheGraph的节点来完成数据的索引，因此我们需要在TheGraph网站)上创建一个Subgraph。

如果你有自己的私有链，这可以克隆Graph节点代码，自己运行Graph节点来完成数据的索引。

如果没有TheGraph的账户，可以用GitHub注册。创建账户之后，进入仪表盘就可以开始通过界面创建subgraph，进入你的仪表板，并点击AddSubgraph：

image-20210428095928210

可以为你的subgraph选择一个图像，定义一个名称。完成后点击保存，一个新的、未部署的subgraph将显示在仪表板上。

开发和部署subgraph

先使用Yarn或NPM在全局安装GraphCLI：

$npminstall-g

ID，Bytes及String是GraphQL数据类型，！表示该值不能为空。模式的定义文档可以在这里找到：https://thegraph.com/docs/define-a-subgraph#the-graphql-schema。

定义映射(mapping.ts)

TheGraph中的映射文件定义了如何将传入事件转换为实体的函数。它用TypeScript的子集AssemblyScript编写。因此可以将其编译为WASM(WebAssembly)，以更高效，更便携式地执行映射。

需要定义_subgraph.yaml_文件中每个handler函数，因此在我们的例子中，我们需要实现函数：handleNewGravatar及handleUpdatedGravatar。

TheGraph提供了一个命令：graphcodegen可以生成解析事件的代码及模式实体代码，因此只需要基于生成的代码编写映射函数，mapping.ts定义如下：

import{NewGravatar,UpdatedGravatar}from'../generated/Gravity/Gravity'import{Gravatar}from'../generated/schema'exportfunctionhandleNewGravatar(event:NewGravatar):void{letgravatar=newGravatar(event.params.id.toHex())gravatar.owner=event.params.ownergravatar.displayName=event.params.displayNamegravatar.imageUrl=event.params.imageUrlgravatar.save(。exportfunctionhandleUpdatedGravatar(event:UpdatedGravatar):void{letid=event.params.id.toHex()letgravatar=Gravatar.load(id)if(gravatar==null){gravatar=newGravatar(id。gravatar.owner=event.params.ownergravatar.displayName=event.params.displayNamegravatar.imageUrl=event.params.imageUrlgravatar.save(。

在handler函数，我们使用事件的ID创建Gravatar实体。并使用相应的字段填充数据，最后需要.save()来存储实体。

如何编写映射函数，还可以参考文档：https://thegraph.com/docs/define-a-subgraph#writing-mappings。

接下来就是把编写好的Subgraph部署到TheGraph

3.部署Subgraph

在控制台先用graphauth进行授权：

graphauthhttps://api.thegraph.com/deploy/

请使用你在创建Subgraph空间提示的Accesstoken。

然后使用graphdeploy进行部署：

graphdeploy--debug--nodehttps://api.thegraph.com/deploy/--ipfshttps://api.thegraph.com/ipfs/

使用完成的Subgraph名称，我们这里是：xilibi2003/Gameplayer。

如果顺利的话，可以在TheGraph的面板上观察到subgraph索引过程，初始索引可能需要等待几分钟，如下图：

subgraph索引

当索引完成后，通过GraphExplorer中的GraphQLplayground进行交互查询：

GraphQL查询

4.DApp前端查询索引数据

在我们的代码库中，front目录中，已经提供一个示例DApp，用来访问数据。进入应用程序目录，配置查询subgraph的GraphQL端点地址：

$cdfront$echo'REACT_APP_GRAPHQL_ENDPOINT=https://api.thegraph.com/subgraphs/name//'>.env

最后，安装DApp的依赖并启动项目。

$yarn&&yarnstart

可以看到通过GraphQL查询出来了3条数据：

image-20210429183042997

在React前端使用了ApolloClient来集成GraphQL查询，如果是Vue可以使用VueApollo。

GraphQL查询的代码可以在front/App.js找到，这里不做详细介绍。

参考资料

智能合约:https://learnblockchain.cn/article/1717

DEFI:https://learnblockchain.cn/article/570

TheGraph:https://thegraph.com/explorer/

仪表板:https://thegraph.com/explorer/dashboard/

定义subgraph.yaml的详细文档:https://thegraph.com/docs/define-a-subgraph#the-subgraph-manifest

https://thegraph.com/docs/define-a-subgraph#the-graphql-schema:_https://thegraph.com/docs/define-a-subgraph＃the-graphql-schema_

AssemblyScript:https://www.assemblyscript.org/

WebAssembly:https://webassembly.org/

https://thegraph.com/docs/define-a-subgraph#writing-mappings:_https://thegraph.com/docs/define-a-subgraph＃writing-mappings_

VueApollo:https://apollo.vuejs.org/guide/#become-a-sponsor

免责声明：作为区块链信息平台，本站所发布文章仅代表作者个人观点，与链闻ChainNews立场无关。文章内的信息、意见等均仅供参考，并非作为或被视为实际投资建议。

本文来源于非小号媒体平台：

登链社区

现已在非小号资讯平台发布105篇作品，

非小号开放平台欢迎币圈作者入驻

入驻指南：

/apply_guide/

本文网址：

/news/9921988.html

免责声明：

1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险

2.本文版权归属原作所有，仅代表作者本人观点，不代表非小号的观点或立场

上一篇：

Bitfinex一周简报

标签：GRAPGRAVAVATEGRethnographyinbusinessGRAV币Avatar ChainPepeTheGrove

Luna热门资讯