Docs
⌘ K

5 minutos

Como Fazer Queries de um Aplicativo

Aprenda a solicitar um query do The Graph a partir do seu aplicativo.

Como Resgatar Pontos Finais da GraphQL

Durante o processo de programação, você receberá um ponto final da API da GraphQL em dois estágios diferentes: um para testar no Subgraph Studio, e outro para fazer queries à The Graph Network na produção.

Ponto Final do Subgraph Studio

Após implementar o seu subgraph ao Subgraph Studio, você receberá um ponto final parecido com isto:

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

Este ponto final é apenas para testes, e tem limite de taxa.

Ponto Final da The Graph Network

Após editar o seu subgraph à rede, você receberá um ponto final parecido com isto:

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

O ponto final é feito para uso ativo na rede, e permite o uso de várias bibliotecas de cliente da GraphQL para solicitar queries do subgraph e popular o seu aplicativo com dados indexados.

Como Usar Clientes GraphQL Populares

Graph Client

O The Graph fornece um cliente GraphQL próprio, graph-client, que apoia recursos únicos como:

Observação: o graph-client também é integrado com clientes GraphQL populares como Apollo e URQL, compatíveis com todos os ambientes (React, Angular, Node.js, React Native); utilizar o graph-client proverá a melhor experiência para interagir com o The Graph.

Como Resgatar Dados com o Graph Client

Vamos ver como retirar dados de um subgraph com o graph-client:

Passo 1

Instale a CLI do The Graph Client no seu projeto:

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

Passo 2

Defina o seu query num arquivo .graphql (ou embutido no seu arquivo, .js ou .ts):

query ExampleQuery {  # este vem do compound-v2  markets(first: 7) {    borrowRate    cash    collateralFactor  }  # este vem do uniswap-v2  pair(id: "0x00004ee988665cdda9a1080d5792cecd16dc1220") {    id    token0 {      id      symbol      name    }    token1 {      id      symbol      name    }  }}

Passo 3

Depois, crie um arquivo de configuração (chamado .graphclientrc.yml) e aponte aos seus endpoints GraphQL oferecidos pelo The Graph, por exemplo:

# .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

Passo 4

Execute o seguinte comando na CLI do Graph Client para gerar códigos JavaScript digitados e prontos para uso:

graphclient build

Passo 5

Atualize o seu arquivo .ts para usar os documentos digitados em GraphQL já gerados:

import React, { useEffect } from 'react'// ...// Importamos tipos e documentos digitados da graphql do código gerado (`..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

Importante: graph-client é perfeitamente integrado com outros clientes GraphQL, como Apollo, URQL, ou React Query; mais exemplos no repositório oficial⁠. No entanto, se escolher outro cliente, lembre-se que não terá como usar o Manuseio de Subgraphs Cross-chain ou a Paginação Automática, que são recursos essenciais para consultar o The Graph.

Cliente Apollo

O Apollo⁠ é um cliente GraphQL comum em ecossistemas de front-end. Disponível para React, Angular, Vue, Ember, iOS, e Android.

É o cliente mais pesado, mas tem muitas funções para construir interfaces avançadas em cima da GraphQL:

  • Tratamento de erros avançado
  • Paginação
  • Pré-resgate de dados
  • Interface otimista
  • Gestão de estado local

Como Resgatar Dados pelo Cliente Apollo

Vamos ver como retirar dados de um subgraph com o cliente Apollo:

Passo 1

Primeiro, instale o @apollo/client e o graphql:

npm install @apollo/client graphql

Passo 2

Depois, solicite um query da API com o seguinte código:

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

Passo 3

Para usar variáveis, dá para passar um argumento variables ao query:

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

Visão Geral do URQL

O URQL⁠ está disponível nos ambientes: Node.js, React/Preact, Vue, e Svelte, com algumas funções mais avançadas:

  • Sistema de cache flexível
  • Design extensível (mais fácil adicionar novas capacidades em cima dele)
  • Pacote leve (cerca de 5x mais leve que o Apollo)
  • Apoio para envios de arquivo e modo offline

Como retirar dados com o URQL

Vamos ver como retirar dados de um subgraph com o URQL:

Passo 1

Instale urql e graphql:

npm install urql graphql

Passo 2

Depois, solicite um query da API com o seguinte código:

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()