编写智能合约时，通常状态的变化是通过触发一个事件来表达，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一周简报
郑重声明： 本文版权归原作者所有， 转载文章仅为传播更多信息之目的， 如作者信息标记有误， 请第一时间联系我们修改或删除， 多谢。