Interrogation à partir d'une application

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 (point de terminaison de test)

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

Graph Explorer

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

À l'aide du point de terminaison GraphQL, vous pouvez utiliser diverses bibliothèques client GraphQL pour interroger le subgraph et remplir votre application avec les données indexées par le subgraph.

Voici quelques-uns des clients GraphQL les plus populaires de l'écosystème et comment les utiliser :

The Graph fournit son propre client GraphQL, graph-client qui prend en charge des fonctionnalités uniques telles que :

• Gestion des subgraphs inter-chaînes : interrogation à partir de plusieurs subgraphs en une seule requête
• Suivi automatique des blocs
• Pagination automatique
• Résultat entièrement typé

Également intégré aux clients GraphQL populaires tels qu'Apollo et URQL et compatible avec tous les environnements (React, Angular, Node.js, React Native), l'utilisation de graph-client vous offrira la meilleure expérience d'interaction avec The Graphique.

Voyons comment récupérer les données d'un subgraph avec graphql-client.

Pour commencer, assurez-vous d'installer le CLI du graph client dans votre projet:

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

Définissez votre requête dans un fichier .graphql (ou dans votre fichier .js ou .ts) :

query ExampleQuery {
  # celle-ci provient de compound-v2
  markets(first: 7) {
    borrowRate
    cash
    collateralFactor
  }
  # celle-ci provient de uniswap-v2
  pair(id: "0x00004ee988665cdda9a1080d5792cecd16dc1220") {
    id
    token0 {
      id
      symbol
      name
    }
    token1 {
      id
      symbol
      name
    }
  }
}

Ensuite, créez un fichier de configuration (appelé .graphclientrc.yml) et pointez vers vos points de terminaison GraphQL fournis par The Graph, par exemple :

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

L’exécution de la commande CLI Graph Client suivante générera du code JavaScript tapé et prêt à être utilisé :

graphclient build

Enfin, mettez à jour votre fichier .ts pour utiliser les documents GraphQL typés générés :

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

⚠️ Avis important

graph-client est parfaitement intégré à d'autres clients GraphQL tels que le client Apollo, URQL ou React Query ; vous trouverez des exemples dans le référentiel officiel.

Cependant, si vous choisissez d'utiliser un autre client, gardez à l'esprit que vous ne pourrez pas utiliser la gestion des subgraphs inter-chaînes ou la pagination automatique, qui sont des fonctionnalités essentielles pour les requêtes. Le graph.

Le Client Apollo est le client GraphQL omniprésent dans l'écosystème front-end.

Disponible pour React, Angular, Vue, Ember, iOS et Android, Apollo Client, bien que le client le plus lourd, apporte de nombreuses fonctionnalités pour créer une interface utilisateur avancée sur GraphQL :

• gestion avancée des erreurs
• pagination
• data prefetching
• optimistic UI
• gestion de l'État local

Voyons comment récupérer les données d'un subgraph avec le client Apollo dans un projet Web.

Tout d'abord, installez @apollo/client et graphql :

npm install @apollo/client graphql

Ensuite, vous pouvez interroger l'API avec le code suivant :

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

Pour utiliser des variables, vous pouvez transmettre un argument variables à la requête :

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

Une autre option est URQL qui est disponible dans les environnements Node.js, React/Preact, Vue et Svelte, avec des fonctionnalités plus avancées. caractéristiques:

• Système de cache flexible
• Conception extensible (facilitant l’ajout de nouvelles fonctionnalités par-dessus)
• Offre légère (~ 5 fois plus légère que Apollo Client)
• Prise en charge des téléchargements de fichiers et du mode hors ligne

Voyons comment récupérer les données d'un subgraph avec URQL dans un projet Web.

Tout d'abord, installez urql et graphql :

npm install urql graphql

Ensuite, vous pouvez interroger l'API avec le code suivant :

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