Docs

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

Reading time: 4 minutes

Learn how to query The Graph from your application.

Getting GraphQL Endpoint

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

Subgraf Studion

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

Graf Utforskaren

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

With your GraphQL endpoint, you can use various GraphQL Client libraries to query the subgraph and populate your app with data indexed by the subgraph.

Graph Client

The Graph is providing its own GraphQL client, graph-client that supports unique features such as:

Note: graph-client is integrated with other popular GraphQL clients such as Apollo and URQL, which are compatible with environments such as React, Angular, Node.js, and React Native. As a result, using graph-client will provide you with an enhanced experience for working with The Graph.

Fetch Data with Graph Client

Let’s look at how to fetch data from a subgraph with graph-client:

Steg 1

Install The Graph Client CLI in your project:

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

Steg 2

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

Steg 3

Create a configuration file (called .graphclientrc.yml) and point to your GraphQL endpoints provided by The Graph, for example:

# .graphclientrc.ymlsources:  - 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-v2documents:  - ./src/example-query.graphql

Step 4

Run the following The Graph Client CLI command to generate typed and ready to use JavaScript code:

graphclient build

Step 5

Update your .ts file to use the generated typed GraphQL documents:

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

Important Note: graph-client is perfectly integrated with other GraphQL clients such as Apollo client, URQL, or React Query; you can find examples in the official repository⁠. However, if you choose to go with another client, keep in mind that you won’t be able to use Cross-chain Subgraph Handling or Automatic Pagination, which are core features for querying The Graph.

Apollo Client

Apollo client⁠ is a common GraphQL client on front-end ecosystems. It’s available for React, Angular, Vue, Ember, iOS, and Android.

Although it’s the heaviest client, it has many features to build advanced UI on top of GraphQL:

  • Advanced error handling
  • Paginering
  • Data prefetching
  • Optimistic UI
  • Local state management

Fetch Data with Apollo Client

Let’s look at how to fetch data from a subgraph with Apollo client:

Steg 1

Install @apollo/client and graphql:

npm install @apollo/client graphql

Steg 2

Query the API with the following code:

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

Steg 3

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

URQL Overview

URQL⁠ is available within Node.js, React/Preact, Vue, and Svelte environments, with some more advanced features:

  • 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

Fetch data with URQL

Let’s look at how to fetch data from a subgraph with URQL:

Steg 1

Install urql and graphql:

npm install urql graphql

Steg 2

Query the API with the following code:

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()
⁠Edit on GitHub⁠