Docs
⌘ K

4 dakika

Bir Uygulamadan Sorgu Yapma

Uygulamanızdan The Graph’e nasıl sorgu yapacağınızı öğrenin.

GraphQL Uç Noktalarını Alma

Geliştirme süreci boyunca iki farklı aşamada birer GraphQL API’si uç noktası alırsınız: biri Subgraph Studio’da test etmek için, diğeri ise üretim ortamında The Graph Ağı’na sorgular göndermek içindir.

Subgraph Studio Uç Noktası

Subgraph Studio ortamına Subgraph’inizi dağıttıktan sonra, aşağıdakine benzer bir uç nokta alırsınız:

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

Bu uç nokta yalnızca test amaçlıdır ve istek sayısı sınırlandırılmıştır.

The Graph Ağı Uç Noktası

Subgraph’inizi ağa yayımladıktan sonra, aşağıdakine benzer bir uç nokta alırsınız:

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

Bu uç nokta, ağ üzerinde aktif kullanım için tasarlanmıştır. Çeşitli GraphQL istemci kütüphanelerini kullanarak Subgraph’e sorgu göndermenize ve uygulamanızı endekslenmiş verilerle beslemenize olanak tanır.

Popüler GraphQL İstemcilerini Kullanma

Graph İstemcisi

The Graph, kendisine ait bir GraphQL istemcisi olan graph-client’i sunar ve bu istemci aşağıdaki gibi rakipsiz özellikleri destekler:

Not: graph-client, Apollo ve URQL gibi diğer popüler GraphQL istemcileriyle entegredir ve React, Angular, Node.js ile React Native gibi ortamlarla uyumludur. Bu nedenle, graph-client kullanmak, The Graph ile çalışırken size geliştirilmiş bir deneyim sunar.

Graph Client ile Veri Çekme

graph-client ile bir Subgraph’ten nasıl veri çekebileceğimize bakalım:

1. Adım

Projenizde The Graph Client CLI’yi kurun:

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

2. Adım

Sorgunuzu bir .graphql dosyasında tanımlayın (veya doğrudan .js ya da .ts dosyanıza satır içi olarak ekleyin):

query ExampleQuery {  # burası compound-v2'den geliyor  markets(first: 7) {    borrowRate    cash    collateralFactor  }  # burası uniswap-v2'den geliyor  pair(id: "0x00004ee988665cdda9a1080d5792cecd16dc1220") {    id    token0 {      id      symbol      name    }    token1 {      id      symbol      name    }  }}

3. Adım

Bir yapılandırma dosyası oluşturun (.graphclientrc.yml adında) ve The Graph tarafından sağlanan GraphQL uç noktalarına işaret edin. Örneğin:

# .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. Adım

Halihazırda yazılmış ve kullanıma hazır JavaScript kodu üretmek için aşağıdaki The Graph Client CLI komutunu çalıştırın:

graphclient build

5. Adım

Oluşturulan tip tanımlı GraphQL dökümanlarını kullanmak için .ts dosyanızı güncelleyin:

import React, { useEffect } from 'react'// ...// oluşturulan koddan (`..graphclient/`) tipleri ve tip tanımlı graphql dökümanını içe aktarıyoruzimport { 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

Önemli Not: graph-client, Apollo Client, URQL veya React Query gibi diğer GraphQL istemcileriyle tamamen entegredir; resmi depoda örneklere ulaşabilirsiniz⁠. Ancak farklı bir istemci kullanmayı tercih ederseniz, The Graph ile sorgu yaparken temel özelliklerden olan Zincirler Arası Subgraph İşleme ve Otomatik Sayfalama fonksiyonlarını kullanamayacağınızı unutmayın.

Apollo Client

Apollo Client⁠, önyüz ekosistemlerinde yaygın olarak kullanılan bir GraphQL istemcisidir. React, Angular, Vue, Ember, iOS ve Android gibi platformlarda kullanılabilir.

En ağır istemci olmasına rağmen, GraphQL üzerine gelişmiş bir kullanıcı arayüzü oluşturmak için birçok özelliğe sahiptir:

  • Gelişmiş hata yönetimi
  • Sayfalandırma
  • Veriyi ön belleğe alma (prefetching)
  • Optimist kullanıcı arayüzü (UI)
  • Yerel durum yönetimi

Apollo Client ile Veri Getirme

Apollo client ile bir Subgraph’ten nasıl veri çekebileceğimize bakalım:

1. Adım

@apollo/client ve graphqli yükleyin:

npm install @apollo/client graphql

2. Adım

Aşağıdaki kod ile API’ye sorgu gönderin:

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. Adım

Değişken kullanmak için, sorguya bir variables argümanı geçebilirsiniz:

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’e Genel Bakış

URQL⁠, Node.js, React/Preact, Vue ve Svelte ortamlarında kullanılabilir ve bazı gelişmiş özellikler sunar:

  • Esnek önbellek sistemi
  • Genişletilebilir tasarım (üzerine yeni özellikler eklemeyi kolaylaştırır)
  • Hafif paket yapısı (Apollo Client’tan yaklaşık 5 kat daha hafif)
  • Dosya yükleme ve çevrimdışı mod desteği

URQL ile veri getirme

URQL ile bir Subgraph’ten nasıl veri çekebileceğimize bakalım:

1. Adım

urql and graphqli yükleyin:

npm install urql graphql

2. Adım

Aşağıdaki kod ile API’ye sorgu gönderin:

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