Querying from an Application
Once a subgraph is deployed to the Subgraph Studio or to The Graph Explorer, you will be given the endpoint for your GraphQL API that should look something like this:
Subgraph Studio (testing endpoint)
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>
Using the GraphQL endpoint, you can use various GraphQL Client libraries to query the subgraph and populate your app with the data indexed by the subgraph.
Here are a couple of the more popular GraphQL clients in the ecosystem and how to use them:
Apollo client
Apollo client supports web projects, including frameworks like React and Vue, as well as mobile clients like iOS, Android, and React Native.
Let's look at how to fetch data from a subgraph with Apollo client in a web project.
First, install @apollo/client
and graphql
:
npm install @apollo/client graphql
Then you can 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) })
To use variables, you can pass in a variables
argument to the query:
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
Another option is URQL, a somewhat lighter-weight GraphQL client library.
Let's look at how to fetch data from a subgraph with URQL in a web project.
First, install urql
and graphql
:
npm install urql graphql
Then you can 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()
Last updated
Was this helpful?