Querying Blockchain Data with GraphQL from a Web Application with URQL and The Graph

Nader Dabit: [0:00] In this video, you'll learn how to query a subgraph from a front-end web application. While what we're covering will show you how to query web as well as JavaScript mobile applications like React Native, the techniques and ideas that we'll be covering can also be applied to native iOS, Android, and Flutter applications as well.

[0:18] There are various GraphQL clients available in the ecosystem. I'll be going over two of them today. The Apollo Client is one of the more mature libraries in the ecosystem and supports both web as well as native iOS and native Android. URQL is somewhat newer and also more lightweight. It supports web applications as well as React Native. This is what we'll be using today.

[0:42] There are a couple of scenarios in which you might be querying a subgraph. You can query any subgraph in the Graph Explorer by opening the subgraph and then clicking on Query. Here, you'll be given a query URL from which you'll need to update the API key with an API key in your account.

[1:07] You can also query any subgraph which you've created in the Subgraph Studio. Here, you'll be given a temporary query URL which can be used for testing. This is the approach we'll be taking today.

[1:26] To get started, we'll first create a new empty React application using npx create-react-app. Next, we'll change into the new directory and install URQL as well as GraphQL.

[1:47] Now, we can open the project in our text editor to start writing some code. The file that we'll be working in is src/App.js.

[1:54] We'll first import createClient from URQL which will allow us to create our GraphQL client. Next, we'll import useEffect and useState hooks from React to manage state as well as to call lifecycle methods. Now, we can define our subgraph API URL which was given to us by the Subgraph Studio.

[2:16] Next, we'll define our query by creating a variable called query using template literals in setting the query keyword. Here, we can paste in any GraphQL query. To test out queries, we can go to the Subgraph Studio and click on Playground.

[2:40] Here, I'll make a couple of updates to create the query that I'd like to use. Then, copy it to my clipboard.

[2:51] In the app, I can now paste in the code copied from the Subgraph Studio playground. Now, we'll create the GraphQL client setting the URL as the API URL. Using this client, we can now query our API. To do so, I'll create a function called fetchData in the main app component that calls client.query, passing in the query, and setting it to a promise.

[3:24] When the response comes back, we'll just log it out. To invoke the function, we'll use a useEffect hook which will call the function as soon as the application loads. To test this out, we can now run npm start.

[3:42] When we inspect the console, we can see that the data has been returned and logged out to the console.

[3:53] Next, let's display some of this data in our UI. To do so, we'll create a tokens array in the local state using useState, setting the initial value as an empty array and a setTokens function that we can call to update the tokens array. In our fetchData function, we can now call setTokens, passing in the response.data.tokens. In our UI, we can now map over the tokens.

[4:32] Here, we'll render links so that we can view the content URI as well as the metadata URI. When the UI updates, we should now see links for the content as well as the metadata for each token.