Docs
⌘ K

6 分钟

从应用程序中进行查询

学习如何从您的应用程序查询The Graph。

获取GraphQL端点

在开发过程中，您将在两个不同阶段收到一个 GraphQL API 端点：用于在Subgrah Studio进行测试和另一个在生产中查询The Graph网络的问题。

子图工作室端点

将Subgraph部署到Subgraph Studio后，您将收到一个如下所示的端点：

https://api.studio.thegraph.com/query/<ID>/<SUBGRAPH_NAME>/<VERSION>

此端点仅用于测试目的仅并且是限定频率。

The Graph网络端点

在将您的子图发布到网络后，您将收到一个看起来像这样的端点：

https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>

此端点用于网络上的活动用途。 它允许您使用各种GraphQL客户端库查询子图并使用索引数据填充您的应用程序。

使用热门GraphQL客户端

Graph 客户端

The Graph提供了自己的GraphQL客户端，graph-client支持以下独特功能：

注意：graph-client 是与其他受欢迎的GraphQL客户端集成的，例如Apollo和 URQL，这些客户端与React、Angular、Node.js和React Native等环境兼容。 因此，使用 graph-client 可以为你提供与The Graph的更高工作体验。

使用 Graph客户端获取数据

让我们看看如何使用 graphql-client 从子图获取数据：

步骤1

在您的项目中安装The Graph客户端 CLI ：

yarn add -D @graphprotocol/client-cli# or, with NPM:npm install --save-dev @graphprotocol/client-cli

步骤2

定义在.graphql 文件(或在 .js 或 .ts 中嵌入)中的查询：

query ExampleQuery {  # this one is coming from compound-v2  markets(first: 7) {    borrowRate    cash    collateralFactor  }  #来自uniswap-v2的查询  pair(id: "0x00004ee988665cdda9a1080d5792cecd16dc1220") {    id    token0 {      id      symbol      name    }    token1 {      id      symbol      name    }  }}

步骤3

创建一个配置文件 (名为 .graphclientrc.yml) 并指向您的由The Graph提供的GraphQL 端点, 例如：

# .graphclientrc.ymlsources:  - name: uniswapv2    handler:      graphql:        endpoint: https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>  - name: compoundv2    handler:      graphql:        endpoint: https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>documents:  - ./src/example-query.graphql

步骤4

运行以下The Graph Client CLI 命令将生成类型化的并可以投入使用 的JavaScript 代码：

graphclient build

步骤5

更新您的 .ts 文件以使用生成的 GraphQL 文档：

import React, { useEffect } from 'react'// ...// we import types and typed-graphql document from the generated code (`..graphclient/`)import { ExampleQueryDocument, ExampleQueryQuery, execute } from '../.graphclient'function App() {  const [data, setData] = React.useState<ExampleQueryQuery>()  useEffect(() => {    execute(ExampleQueryDocument, {}).then((result) => {      setData(result?.data)    })  }, [setData])  return (    <div className="App">      <header className="App-header">        <img src={logo} className="App-logo" alt="logo" />        <p>Graph Client Example</p>        <fieldset>          {data && (            <form>              <label>Data</label>              <br />              <textarea value={JSON.stringify(data, null, 2)} readOnly rows={25} />            </form>          )}        </fieldset>      </header>    </div>  )}export default App

重要注意： graph-client 与其他GraphQL客户端，如Apollo客户端、URL或React查询完全整合； 您可以在官方仓库中找到示例⁠。 然而，如果您选择与另一个客户端联系，请记住您将无法使用跨链子处理或自动分页， 它们是查询The Graph的核心功能。

Apollo 客户端

Apollo 客户端⁠ 是前端生态系统常见的 GraphQL 客户端。它可用于React、Angular、Vue、Ember、iOS和Android。

虽然它是最重的客户端，但它有许多功能可以在 GraphQL 顶部构建高级用户界面：

  • 高级错误处理
  • 分页
  • 预获取数据
  • 优化用户界面
  • 本地状态管理

通过 Apollo 客户端获取数据

让我们看看如何用 Apollo 客户端从子图中获取数据。

步骤1

安装 @apollo/client 和 graphql：

npm install @apollo/client graphql

步骤2

用以下代码查询API：

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'const APIURL = 'https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>'const tokensQuery = `  query {    tokens {      id      tokenID      contentURI      metadataURI    }  }`const client = new ApolloClient({  uri: APIURL,  cache: new InMemoryCache(),})client  .query({    query: gql(tokensQuery),  })  .then((data) => console.log('Subgraph data: ', data))  .catch((err) => {    console.log('Error fetching data: ', err)  })

步骤3

要使用变量，你可以在查询中传递一个变量参数：

const tokensQuery = `  query($first: Int, $orderBy: BigInt, $orderDirection: String) {    tokens(      first: $first, orderBy: $orderBy, orderDirection: $orderDirection    ) {      id      tokenID      contentURI      metadataURI    }  }`client  .query({    query: gql(tokensQuery),    variables: {      first: 10,      orderBy: 'createdAtTimestamp',      orderDirection: 'desc',    },  })  .then((data) => console.log('Subgraph data: ', data))  .catch((err) => {    console.log('Error fetching data: ', err)  })

URQL 概述

URQL⁠可以在 Node.js, React/Preact, Vue 和 Svelte 环境中使用，具有更高级的功能：

  • 灵活的缓存系统
  • 可扩展设计(使在它上面添加新功能变得容易)
  • 轻量级捆绑包(比 Apollo Client 小约5倍)
  • 支持文件上传和离线模式

通过 URQL 获取数据

让我们看看如何从 URQL 的子图中获取数据：

步骤1

安装 urql 和 graphql：

npm install urql graphql

步骤2

用以下代码查询API：

import { createClient } from 'urql'const APIURL = 'https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>'const tokensQuery = `  query {    tokens {      id      tokenID      contentURI      metadataURI    }  }`const client = createClient({  url: APIURL,})const data = await client.query(tokensQuery).toPromise()