Release of The Graph 6 subgraph and query in dapp

release

When our subgraph is deployed to subgraph Studio and the tests pass, the next step is to put it into production. First we have to publish it. When a subgraph is published to the decentralized network, curators can curate it, and indexers can start indexing it.

Subgraphs can be published to decentralized networks directly from the Subgraph Studio dashboard by clicking the Publish button. Once a subgraph is published, it can be viewed in the graph explorer.

Note: Subgraphs published to Goerli can index and query data from the Goerli network or the Ethereum mainnet. Subgraphs published to the Ethereum mainnet can only index and query data from the Ethereum mainnet.

The official recommendation is to use 10,000 GRT to curate your own subgraph to ensure it is indexed and available for queries as soon as possible.

Of course, we can also temporarily publish without curating.

*Refer to the previous chapter for content about curation

access subgraph in nodejs

Currently, there are several popular clients to access subgraph, Graph client, Apollo client and URQL. All three clients can adapt to various application environments, such as nodejs, react, vue, ios, android, etc. Among them, Graph client is the official client provided by the graph, which provides special features:

Cross-chain subgraph processing: query multiple subgraphs in one query

Automatic block tracking

pagination

Structured query results

First, install The Graph Client CLI in your project:

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

Define the .graphql file and define the query statement in it (also in the .js or .ts file):

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

Among them, $first1 and $first2 represent the parameters that need to be passed later.

Next define the .graphclientrc.yml file

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

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

Where the endpoint is taken from the subgraph studio console:

Next generate the query code:

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.

The generated file structure is as follows:

Finally, write a .ts file to reference the generated code to do the query:

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)
});

verify:

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

search result:

{
  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查询的核心功能。