Docs
⌘ K

5 minutes

Interrogation à partir d'une application

Apprenez à interroger The Graph à partir de votre application.

Obtenir des endpoints GraphQL

Au cours du processus de développement, vous recevrez un Endpoint de l’API GraphQL à deux étapes différentes : l’une pour les tests dans Subgraph Studio, et l’autre pour effectuer des requêtes sur The Graph Network en production.

Endpoint Subgraph Studio

Après avoir déployé votre subgraph dans Subgraph Studio, vous recevrez un endpoint qui ressemble à ceci :

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

Cet endpoint est destiné à des fins de test uniquement et son débit est limité.

Endpoint de The Graph Network

Après avoir publié votre subgraph sur le réseau, vous recevrez un endpoint qui ressemble à ceci : :

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

Cet endpoint à une utilisation active sur le réseau. Il vous permet d’utiliser diverses bibliothèques client GraphQL pour interroger le Subgraph et alimenter votre application en données indexées.

Utilisation de clients GraphQL populaires

Graph Client

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

Remarque : graph-client est intégré à d’autres clients GraphQL populaires tels qu’Apollo et URQL, qui sont compatibles avec des environnements tels que React, Angular, Node.js et React Native. Par conséquent, l’utilisation de graph-client vous fournira une expérience améliorée pour travailler avec The Graph.

Récupérer des données avec Graph Client

Voyons comment récupérer les données d’un subgraph avec graph-client :

Étape 1

Installez The Graph Client CLI dans votre projet :

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

Étape 2

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

Étape 3

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

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

Étape 4

Exécutez la commande CLI suivante de The Graph Client pour générer un code JavaScript typé et prêt à l’emploi :

graphclient build

Étape 5

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

import React, { useEffect } from 'react'// ...// nous importons les types et le document typed-graphql du code généré (`..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>Exemple de Graph Client</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

Note importante: graph-client est parfaitement intégré avec d’autres clients GraphQL tels que Apollo client, URQL, ou React Query ; vous pouvez trouver des exemples dans le dépôt officiel⁠. Cependant, si vous choisissez d’aller avec un autre client, gardez à l’esprit que vous ne serez pas en mesure d’utiliser Cross-chain Subgraph Handling (La manipulation cross-chain des subgraphs) ou Automatic Pagination (La pagination automatique), qui sont des fonctionnalités essentielles pour interroger The Graph.

Le client Apollo

[Apollo client] (https://www.apollographql.com/docs/⁠) est un client GraphQL commun sur les écosystèmes front-end. Il est disponible pour React, Angular, Vue, Ember, iOS et Android.

Bien qu’il s’agisse du client le plus lourd, il possède de nombreuses fonctionnalités permettant de construire des interfaces utilisateur avancées sur GraphQL :

  • Gestion avancée des erreurs
  • Pagination
  • Pré-récupération des données
  • UI optimiste
  • Gestion locale de l’État

Récupérer des données avec Apollo Client

Voyons comment récupérer les données d’un subgraph avec le client Apollo :

Étape 1

Installez @apollo/client et graphql :

npm install @apollo/client graphql

Étape 2

Interrogez l’API avec le code suivant :

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

Étape 3

Pour utiliser des variables, vous pouvez passer 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)  })

Vue d’ensemble d’URQL

[URQL] (https://formidable.com/open-source/urql/⁠) est disponible dans les environnements Node.js, React/Preact, Vue et Svelte, avec des fonctionnalités plus avancées :

  • 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

Récupérer des données avec URQL

Voyons comment récupérer des données d’un subgraph avec URQL :

Étape 1

Installez urql et graphql :

npm install urql graphql

Étape 2

Interrogez l’API avec le code suivant :

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