The Graph Academy
Master The GraphBug BountyExplorer
  • Welcome to The Graph Hub
  • FAQs
  • Official Docs
    • Get Started
    • About The Graph
      • Introduction
      • Network Overview
    • Developer
      • Mastering Subgraphs
      • Quick Start
      • Define a Subgraph
      • Create a Subgraph
      • Publish a Subgraph to the Decentralized Network
      • Query The Graph
      • Querying from an Application
      • Distributed Systems
      • AssemblyScript API
      • AssemblyScript Migration Guide
      • GraphQL API
      • Unit Testing Framework
      • Quick and easy subgraph debugging using forks
      • Deprecating a Subgraph
    • Indexer
      • What are Indexers?
      • Revenue Streams
      • Reward Distribution
      • Allocation Lifecycles
      • Indexing & Querying
      • Hardware requirements
      • IPFS hash converter
      • Vulnerabilities
      • Indexer Subgraph Selection Guide
      • Testnet
        • Graph Protocol Testnet Docker Compose
        • Graph Protocol Testnet Baremetal
          • Architecture Considerations
          • Deploy and Configure Database
          • Deploy and Configure Graph-node
          • Deploy and Configure Indexer stack
      • Monitoring
        • Ethereum Node Chainhead Monitoring - no third parties
      • Best Practices
        • Failed subgraphs - Manually Closing Allocations
    • Delegator
      • Choosing Indexers
        • Network Page
        • Tools
        • Guides
      • Reward Statuses
    • Curator
    • Subgraph Studio
      • How to Use the Subgraph Studio
      • Deploy a Subgraph to the Subgraph Studio
      • Billing on the Subgraph Studio
      • Managing your API keys
      • Subgraph Studio FAQs
      • Transferring Subgraph Ownership
    • The Graph Explorer
    • Supported Networks
      • Building Subgraphs on NEAR
      • Building Subgraphs on Cosmos
      • Building Subgraphs on Arweave
  • The Graph Ecosystem
    • Network
      • Core Developer Teams
        • Edge & Node
        • Streamingfast
        • Figment
        • Semiotic
        • The Guild
        • GraphOps
      • The Graph Foundation
      • The Graph Council
      • Graph Advocates
      • Graph Advocates DAO
    • Infrastructure
      • Mainnet
      • Testnet
      • Network Migration
      • Multichain Migration
      • Firehose
      • Substreams
      • The Graph Client
Powered by GitBook
On this page

Was this helpful?

  1. Official Docs
  2. Developer

Querying from an Application

PreviousQuery The GraphNextDistributed Systems

Last updated 2 years ago

Was this helpful?

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

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

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

Another option is , a somewhat lighter-weight GraphQL client library.

Apollo client
URQL