package.json
file in your directory:
Query URL
that you can use to interact with the deployed subgraph.
We already saw this in action when we used the Query URL
along with curl to fetch the data from the subgraph, in the previous article. Now, let’s see how we can translate that to code.
To send an HTTP request, we need to install an additional npm package called node-fetch
, so:
node-fetch
package due to its ease of use. Since making an HTTP request is more or less the same throughout the various packages, you are free to try the following code using an npm package of your liking.index.js
in the project directory and add the following code to it:
getTokenList()
which will get us the list of tokens. The user can specify the number of tokens that he wants. Within the function, we have set the query URL of the subgraph (queryURL
), the query (uniswapGraphQuery
), and the options (options
) for our request.
${_number}
) with an actual number.fetch()
function, we make a request to the subgraph and process and display the response. Here’s the sample response:
graph-client
is a GraphQL client that is provided by The Graph protocol. The client helps manage subgraph requests. graph-client help us include complex functionalities like fetch strategies, block tracking, pagination, and cross-chain subgraph handling while making requests to our subgraphs, thereby extending the request scope and capabilities.
To fetch data using graph client:
npm init
.graphclientrc.yml
in the project directory and add the following configuration:
.graphclient
, in your project, containing the code (runtime artifacts) we need for fetching data. The —fileType json
flag will generate the source artifacts (.graphclient/sources/
) in JSON format and provide a JavaScript file (.graphclient/index.js
) as the entry point.
index.js
file, we are given an execute()
function that we can import onto our application and use in order to fetch query data from subgraphs.
To try this out, create a new JavaScript file, query.js
in the root directory of your project:
.graphclientrc.yml
and add the required properties:
index.js
within your project
graph-client
, but this time, we are using the urql client.
So, once we create the client (client
) using the createClient()
method, we can use the query()
method to make the requests.
This is how you can use the urql library to fetch data from a subgraph.
And with that, we have explored some rather interesting ways of fetching data from a subgraph onto your application.