Subgraphs > Querying

Learn how to query The Graph from your application.

Getting GraphQL Endpoints

During the development process, you will receive a GraphQL API endpoint at two different stages: one for testing in Subgraph Studio, and another for making queries to The Graph Network in production.

Subgraph Studio Endpoint

After deploying your Subgraph to Subgraph Studio, you will receive an endpoint that looks like this:

This endpoint is intended for testing purposes only and is rate-limited.

The Graph Network Endpoint

After publishing your Subgraph to the network, you will receive an endpoint that looks like this: :

This endpoint is intended for active use on the network. It allows you to use various GraphQL client libraries to query the Subgraph and populate your application with indexed data.

Using Popular GraphQL Clients

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:

Step 1

Install The Graph Client CLI in your project:

Step 2

Define your query in a .graphql file (or inlined in your .js or .ts file):

Step 3

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

Step 4

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

Step 5

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

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
  • Pagination
  • 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:

Step 1

Install @apollo/client and graphql:

Step 2

Query the API with the following code:

Step 3

To use variables, you can pass in a variables argument to the query:

URQL Overview

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

  • Flexible cache system
  • Extensible design (easing adding new capabilities on top of it)
  • Lightweight bundle (~5x lighter than Apollo Client)
  • Support for file uploads and offline mode

Fetch data with URQL

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

Step 1

Install urql and graphql:

Step 2

Query the API with the following code: