The Graph 6 subgraph的发布并在dapp中查询

发布

当我们的subgraph被部署到subgraph Studio并且测试通过，下一步就是将它投入生产。首先我们要将它发布出去。当subgraph被发布到去中心化的网络中，策展人就可以对其进行策展，索引人可以开始对其进行索引。

通过单击Publish按钮，子图可以直接从Subgraph Studio仪表板发布到分散的网络。一旦子图发布，就可以在图形资源管理器中查看。

注意：发布到Goerli的subgraph可以索引和查询来自Goerli网络或以太坊主网的数据。发布到以太坊主网的subgraph只能索引和查询来自以太坊主网的数据。

官方建议使用10,000 GRT来策展自己的subgraph，以确保它被索引，并可尽快用于查询。

当然，我们也可以暂时不进行策展，直接publish。

*关于策展的内容参照上一章节

在nodejs中访问subgraph

目前有几个比较流行的几个客户端来访问subgraph，Graph client，Apollo client和URQL，三种客户端都可以适应各类应用环境，如nodejs，react，vue，ios，android等。其中Graph client是the graph官方提供的客户端，提供了专门的特性：

跨链subgraph处理:在一次查询中查询多个subgraph

自动块跟踪

自动分页

查询结果结构化

首先，在你项目中安装The Graph Client CLI:

yarn add -D @graphprotocol/client-cli
# 或者使用 NPM:
npm install --save-dev @graphprotocol/client-cli

定义.graphql文件，并在其中定义查询语句(也可以在.js或.ts文件中):

#example-query.graphql
query ExampleQuery($first1: Int,$first2: Int) {
  gravatars(first: $first1) {
    id
    owner
    groupName
    displayName
  }
  transactions(first: $first2) {
    id
    block {
      id
    }
    gasPrice
  }
}

其中$first1，$first2代表后需要传递的参数。

接下来定义.graphclientrc.yml文件

sources:
  - name: subgraph-example
    handler:
      graphql:
        endpoint: https://api.studio.thegraph.com/query/39656/subgraph-example/v0.2.8

documents:
  - ./src/example-query.graphql

其中endpoint取自subgraph studio控制台：

接下来生成查询代码：

yarn graphclient build

#输出如下
yarn run v1.22.19
$ D:\workspace\gambo\gql\subgraph-example\node_modules\.bin\graphclient build
� GraphClient Cleaning existing artifacts
� GraphClient Reading the configuration
� GraphClient Generating the unified schema
� GraphClient Generating artifacts
� GraphClient Generating index file in TypeScript
� GraphClient Writing index.ts for CJS to the disk.
� GraphClient Cleanup
� GraphClient Done! => D:\workspace\gambo\gql\subgraph-example\.graphclient
Done in 6.46s.

生成的文件结构如下：

最后，编写.ts文件引用生成的代码做查询：

import { ExampleQueryDocument, execute } from '../.graphclient'
import {  ExecutionResult } from 'graphql';


execute(ExampleQueryDocument, {
  "first1":1,
  "first2":1,
}).then((result:ExecutionResult) => {
  console.log(result.data)
}).catch((e:Error) => {
    console.error(e)
});

验证：

#需要提前安装yarn add -D ts-node
yarn ts-node-esm .\src\query.ts

查询结果：

{
  gravatars: [
    {
      id: '0test1',
      owner: '0xba8b604410ca76af86bda9b00eb53b65ac4c41ac',
      groupName: 'test1',
      displayName: 'subgraph1'
    }
  ],
  transactions: [
    {
      id: '0x4913dcae5a4a983e58314cf093b822c76048d5161911486613c6a731e4ab0f57',
      block: [Object],
      gasPrice: '2500000016'
    }
  ]
}

graph-client与其他GraphQL客户端(如Apollo客户端、URQL或React Query)完美集成;你可以在官方github中找到示例。但是，如果你选择使用其他客户端将无法使用跨链subgraph处理或自动分页，这是the graph查询的核心功能。