Att göra förfrågningar från en Applikation

Reading time: 4 min

Once a subgraph is deployed to Subgraph Studio or to Graph Explorer, you will be given the endpoint for your GraphQL API that should look something like this:

Subgraph Studio (testslutpunkt)

Queries (HTTP)
https://api.studio.thegraph.com/query/<ID>/<SUBGRAPH_NAME>/<VERSION>

Graf Utforskaren

Queries (HTTP)
https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>

Genom att använda GraphQL-slutpunkten kan du använda olika GraphQL-klientbibliotek för att göra förfrågningar till undergrafen och fylla din app med de data som indexeras av undergrafen.

Här är ett par av de populärare GraphQL-klienterna i ekosystemet och hur du använder dem:

The Graph tillhandahåller sin egen GraphQL-klient, graph-client, som stödjer unika funktioner som:

• Hantering av undergrafer över blockkedjor: Förfrågan från flera undergrafer i en enda förfrågan
• Automatisk Blockspårning
• Automatisk Paginering
• Fullständigt typad resultat

Även integrerad med populära GraphQL-clients som Apollo och URQL och kompatibel med alla miljöer (React, Angular, Node.js, React Native), kommer användning av graph-client att ge dig den bästa upplevelsen för interaktion med The Graf.

Låt oss titta på hur du hämtar data från en undergraf med graphql-client.

För att komma igång, se till att installera The Graph Client CLI i ditt projekt:

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

Definiera din förfrågan i en .graphql-fil (eller inline i din .js eller .ts-fil):

query ExampleQuery {
  # den här kommer från compound-v2
  markets(first: 7) {
    borrowRate
    cash
    collateralFactor
  }
  # den här kommer från uniswap-v2
  pair(id: "0x00004ee988665cdda9a1080d5792cecd16dc1220") {
    id
    token0 {
      id
      symbol
      name
    }
    token1 {
      id
      symbol
      name
    }
  }
}

Därefter, skapa en konfigurationsfil (kallad .graphclientrc.yml) och peka till dina GraphQL-slutpunkter som tillhandahålls av The Graph, till exempel:

# .graphclientrc.yml
sources:
  - name: uniswapv2
    handler:
      graphql:
        endpoint: https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v2
  - name: compoundv2
    handler:
      graphql:
        endpoint: https://api.thegraph.com/subgraphs/name/graphprotocol/compound-v2

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

Kör följande The Graph Client CLI-kommando för att generera typade och klara att använda JavaScript-kod:

graphclient build

Slutligen, uppdatera din .ts-fil för att använda de genererade typade GraphQL-dokumenten:

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

⚠️ Viktig uppmärksamhet

graph-client är perfekt integrerad med andra GraphQL-klienter som Apollo-klient, URQL eller React Query; du kommer att finna exempel i det officiella arkivet.

Men om du väljer att gå med en annan klient, kom ihåg att du inte kommer att kunna använda Cross-chain Subgraph Handling eller Automatic Pagination, som är kärnfunktionerna för att fråga The Graph.

Apollo client är den vanliga GraphQL-klienten i front-end-ekosystemet.

Tillgänglig för React, Angular, Vue, Ember, iOS och Android, bringar Apollo Client, även om den tyngsta klienten, många funktioner för att bygga avancerad UI ovanpå GraphQL:

• avancerad felhantering
• paginering
• datavisning i förväg
• optimistiskt UI
• lokal statshantering

Låt oss titta på hur du hämtar data från en undergraf med Apollo-klienten i ett webbprojekt.

Först installerar du @apollo/client och graphql:

npm install @apollo/client graphql

Sedan kan du göra en förfrågan till API:et med följande kod:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'

const APIURL = 'https://api.studio.thegraph.com/query//<SUBGRAPH_NAME>/'

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

För att använda variabler kan du skicka in ett variables argument till förfrågan:

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

Ett annat alternativ är URQL som är tillgänglig inom Node.js, React/Preact, Vue och Svelte-miljöer, med fler avancerade funktioner:

• Flexibelt cachelagersystem
• Utbyggbar design (förenklar tillägg av nya funktioner på toppen)
• Lättviktsbundle (~5 gånger lättare än Apollo-klienten)
• Stöd för filöverföringar och offline-läge

Låt oss titta på hur du hämtar data från en undergraf med URQL i ett webbprojekt.

Först installerar du urql och graphql:

npm install urql graphql

Sedan kan du göra en förfrågan till API:et med följande kod:

import { createClient } from 'urql'

const APIURL = 'https://api.thegraph.com/subgraphs/name/username/subgraphname'

const tokensQuery = `
  query {
    tokens {
      id
      tokenID
      contentURI
      metadataURI
    }
  }
`

const client = createClient({
  url: APIURL,
})

const data = await client.query(tokensQuery).toPromise()