New Ethereum talks, every Monday. The week's conference uploads by event, in your inbox.

Loading player…

The Graph 🛠 Querying Web3 Data

ETHGlobalMon, Oct 9, 2023, 12:00 AM

Get web3 data into your dapp fast by learning how to navigate the 1000+ subgraphs already live on The Graph Network. In this workshop you'll learn how to assess a subgraph's quality, understand how to identify a subgraph's features, and use various querying techniques to get the data your dapp needs ASAP. Some of the most skilled web3 developers, designers and product builders from all around the globe came together for a weekend-long hackathon at ETHGlobal New York 2023. ----------------- Follow us: https://twitter.com/ETHGlobal​ Check us out: https://ethglobal.co​m Email us at: hello@ethglobal.com

Transcript

foreign [Music] web3 data with the graph right away let's go ahead and go to the important part if you are hacking and you are planning to build with the graph this is the QR code that you should scan this provides you with hacker technical support where you could reach out to us on our telegram there's also going to be quick start videos documentation lots of links to get you started also the slides of this presentation and the repo associated with this presentation will be in this QR code so I want to sdl phones down um I'll be going on okay oh phone up also um every month I write a graph Builders newsletter for Builders like you for any updates that are in the ecosystem there we go another phone up okay okay it's phone up okay phones are down alright so if you were hacking and playing the build with the graph these are the bounties available and if you want to pay attention to the second category the best use of existing subgraph or substream that's if you simply have a query sent to the graph ecosystem and actually use that in your dap and that's what we're focusing on this presentation just sending a query we're not actually going to be building a subgraph so let's get into it the graph Network what is the graph Network the graph network is decentralized indexing and querying there's 250 plus indexers worldwide that are organizing and providing your data and there's seven chains on the graph network with over 1 000 sub graphs which means over 1 000 endpoints for you to all query it's pretty cool we could all use this and build already today and really quickly what is a subgraph well a subgraph if you look at this is pretty much this you get disorganized data and that's on the blockchain and then from there a subgraph will organize that data and then from there you have nice buckets at the bottom that we can query and actually provide data to our dapps it has an API endpoint that we're able to use it has a when you build a subgraph you actually build it in subgraph studio and then when you have that subgraph built and we have it going on it starts centralized and when we iterate and build it and build it and build it we then publish it to the graph Network and then it becomes decentralized so that's just important to know every subgraph that you find in this graph explorer that we'll go through in a second will be decentralized on all of those indexers around the world who are indexing that subgraph so um and why might we go on the uh the graph Network and actually publish our subgraph the subgraph will have increased uptime speed and redundancy uh and these Network subgraphs exist in a Marketplace when we publish our subgraphs to the marketplace we have our subgraphs being competitive it's actually a tokenomic incentivization going on in there with the GRT utility token so the indexes are incentivized to work harder for you all right that's really important as a builder to know that when you see a subgraph in the Explorer that is one that's a competitive Marketplace subgraph okay let's keep on going um let's take a look really quickly at the graph Explorer here we can see this is the marketplace this is a little GIF of it and you can go through we can all go through and check it out and see right there there is the endpoint and that's the query URL we'll go through this in a little bit with uh some uh actually exploring the graph Explorer let's shift a little bit after that high level overview into something that is more what we are trying to do today which is querying all right we actually want to get some answers so it's not the answer that enlightens but the question and that is really important we want to ask some good questions we want to get some good questions from our web3 world and let's go into that process right now okay the steps to query a subgraph first we have to set up an API key we have to set up that API key to access the graph Network and actually send out queries the next thing if we need to find the necessor sub graph on the graph Explorer which is exploring the graph Network number three we then design queries in the graphs in the subgraphs playground that we are interested in and then number four we integrate the query that we like with our dap and we can just send it out and get to work building okay so first things first let's go ahead and set up an API key go to the graph.com and we'll go up to products and subgraph Studio and we'll go to the top and we'll go to keys and really quickly I want to preview we are excited um and always always uh it's really exciting to see that we're going to be putting in subscriptions for queries so you'll have a set rate per month if that's something that interests you um that's not what we're doing today but that's a little preview I'll talk about that a little bit later but these are our API Keys when we set up an API key for the first time we actually get 1 000 free queries so if you if any of us are setting up API keys today you'll get a thousand free queries and this is mine that I've built for myself and this is also a query key that was created for everyone here so if anyone here runs out of their 1000 free queries go ahead and reach out to us on telegram or find us at the booth and we'll get you this query key right here and you'll be able to keep on building okay that's really important we don't want you guys to stop building query keys right there so just to keep create a API key just go right here live demo key and from there that is it we have our query key and we're able the API key and from there we're actually able to fill that up with the billing balance and then continue on with building okay so now that we have our API key we have uh 1000 free queries and also a free uh API key that's able to be used Let's uh move on to the next step okay number two we want to find and assess a subgraph on the graph Explorer all right so let's dive in to really what that might look like how do we find the subref how do we assess it what does that actually mean well we can go through a few steps here and the easiest way to assess if a subgraph is of high quality because remember it's in a Marketplace is as if I'm is is if it is a massari standard subgraph if you see if we all see a massari standard subgraph that subgraph has been built by the massari team and that has a standardized schema and a actual standardized way that we can interact with it that's quite powerful let's go through really quickly their website that shows a really nice list of massari subgraphs and also we can see that in the graph Explorer but this is through massari each of these These are bridge subgraphs that we can access blockchain data and they all are standardized together their derivatives subgraphs these have their own standard the derivatives here have their own standard the exchanges these have their own standard and soon later in the present and I'll show you why this is so powerful just know that subgraphs.xyz is a helpful place to see all the Missouri subgraphs in one location and then from there you can be able to use that power and I'll show you how that is empowered very soon let's go back and say let's say we see a subgraph on the graph Explorer and it's not a massari standard subgraph well we got to get a little bit more um we have to know the actual protocol a little bit better we have to understand what's going on and there's three things that we can look at to understand if a subgraph is of higher quality or moderate quality or lower quality because all these subgraphs are permissionless anyone could uh publish these we need to assess if it's helpful in the marketplace so let's go through uh and find and assess a subgraph in the graph Explorer together right now let's go to it's a graph.com Explorer okay so here is the graph Explorer and right at the beginning we see there's 932 sub graphs 932 endpoints 932 locations where we can access uh data through the blockchain and we have even more on uh arbitrary one and really quick differentiation these are subgraphs indexed by indexers who are incentivized by the GRT utility token on ethereum the graph protocol is on its process of migrating over to arbitrum one to take advantage of L to all the advantages of L2 and so right now we see 376 subgraphs that have migrated from ethereum and are currently being indexed on arbitrum one and just so you know if you are going through this this is going to help you identify these different batches of uh subgraphs so let's go ahead and go to ethereum and we will see a let's go to a crypto Punk sub graph and I want to be very specific here I want to look at one community of nfts and from there we can start to dive into a little bit more detail so right away we see this is organized uh in a way where curation signal is quite important and that's important to understand where the ones with the highest curation signal have the most GRT incentive uh tokenomic uh incentives going on to reward those that participate with the subgraph and that goes into a little bit of the tokenomics I'm not going to go too deep into that because it's yellow Builders we're all Builders it's more important just to know the ones with the most signal also known as curation typically are the most valuable subgraphs and have the most proven quality in this ecosystem so right now this is the one that we're saying and that's the curation that's the signal that's the one that we want to take a look at so let's dive in there and let's move on so how do we assess the subgraphs quality let's keep on going this subgraph is actually finished indexing that's awesome because indexing takes time this is already complete so we're getting fresh data at the chain head which is great let's keep on going all right let's say all right the next thing that we want to look at first we're going to look at the curation then we want to look at the documentation and any good subgraph is going to have its actual code available to the public and we can see right here this developer Jerry okolo has its stereo Colo has provided uh his documentation right there so let's take a look at what he has done so let's see if there is quality documentation we can see awesome there is quality documentation we know what's going on with the subgraph because this is permissionless it's important that we can investigate all right what's going on with this is this Gathering the data how is this organizing the data that's really what we like okay the last thing on that previous slide was comments so it's curation it's documentation and the comments specifically the comments in schema dot graphql now why are comments important in this location that'll come up in a little bit when you're playing around the playground but just I want you to see here that Jerry has been kind and put in comments here and why might that be powerful well we'll see when we're in the playground why that might be powerful in a little bit but if you are diving into a subgraph and we're able to see comments in this location that helps USPS Builders really get building really quickly because this developer has taken the time and kindness to really make our querying experience much more effective okay so curation the documentation the comments in schema.graphql of the subgraph okay now I think we think I think personally this subgraph is pretty good it's a pretty dang good subgraph we're able to say all right we've got some good curation on there we've got some documentation and also has comments The Next Step let's go back to here would be to begin to design some graphql queries we found the endpoint we want we've found the actual a subgraph that we think has the information that we want because it's Gathering and organizing in a very nice way the graphql queries are important because we have to start designing these little queries to say what data are we getting and is it the actual data we need for our dap so the few features that uh the playground has there's many but we'll just go over the filtering some logical operators we could save some queries and there's many many more features that are available in the graph.

com docs and you can see how it has those features in there so let's think of some queries and just demonstrate how we might go through some uh investigation of this subgraph so here's some example queries and we'll start simple first 10 transfers in crypto Punk's history let's go ahead and dive into that one the first 10 of all so we'll be here and we'll go to the playground it automatically populates with the query and it has accounts and it has punks but we don't want the account entity we don't want the punks entities remember we want to look at the transfers and that's really how the schema is organized with every subgraph it creates these buckets also known as these entities in the schema.graphql and these are the entities that we can begin to query and we're looking for the transfer entity right here we have a single transfer we want to see that but we could also look at many transfers and we want to actually take a look at many of them so we'll click on that and that little arrow that brings it down is allowing us to say all right let's look at transfers and look for the first okay 10 very nice we could look at 15 or 20 or 100 whatever we want and then we also want to look at the first 10 so we'll say all right we got to look at the timestamp that's going to be important because it's timestamp and then we also want the ID and then just to understand the ID a little bit we could hover our Mouse over different locations in the timestamp and we'll see that in just a little bit why that might be powerful coming up why that might be powerful when we're looking at more complex information that that hovering is quite powerful so let's go ahead and say all right we want to order this by the timestamp here and we want the order Direction okay very nice we've created a little query and Bam we've got this back and now it's ascending from the beginning timestamp and it's going up and up and up and we have the IDS right there so already we have a valuable query that we can then bring into our actual dap and then from there we can keep on playing around we can play around and play around find different bits of information that we like and go from there what's the next question that we might want to answer okay what's the total value of all sales the total Supply and the number of sales on the crypto punks contracts all right so that's a little bit more detailed can we actually get that information has Jerry done the work at actually doing some compute on the subgraph and then providing us that data let's go see we'll go here and we want to look at we don't want transfers we want contracts and we'll get whatever's there and here we can see the total amount traded and if we hover our Mouse over the actual location we can see the comment pop right up here this is where the comment comes through so if the developer has done a nice job putting a comment in there we're able to see exactly what this means when we query this property because sometimes properties can be a little bit vague and just by putting that in there we know exactly what that means this number right here what is total sales we just are able to hover Mouse over thank you Jerry for putting those comments in that is awesome because we're able to understand this better and get building let's keep on going with this uh Journey here um this is a comparison of two massari standard subgraphs remember those missari standard subgraphs I was talking to you about these are both under the same category uh the both standard subgraphs that we can query and we could send the exact same query to any massari standardized subgraphs that are under the same category and that's really powerful because let's say we have five or six different subgraphs each going into their own different protocols and then from there we just want to we'll send one query to all of them all right using graph client which I'll talk about in a little bit we can do that so I'll just demonstrate this query here find the tvl for August 20th 2023 we can look at the curve Finance ethereum uh subgraph and then send that out that the there we get that information right back and then also we're able to send the exact same query because this is a standard subgraph it's a massari standard subgraph here and to get that exact same information back because the scheme of the standardizer is going to help you get information from many different protocols all at once all to one location through graph client that's a really powerful thing all right so um and that's through subgraphs.xyz remember go through there and see the different categories for the standardization if you want some homework here's some homework um and that's going to be fun for you if there was to be one QR code for everyone to scan to integrate queries into their dap right away it would be this one this is the repo that I created for everyone here that gives demos of the vanilla JavaScript and python query an Apollo query a graph client query graph client was created by the team that's building many teams that are building the graph um that allows for one query to be sent out to multiple subgraphs all at once which really cool there's Auto pagination in there so we can have lots of responses um really cool and then finally at the bottom here there's two things I want to pay attention to um and once I see phones down I'll move on thumbs up good yep that's it thank you two minutes quick all right phones are down um cool here likes machine learning I think it's super cool um if you're interested in diving into machine learning uh this is an amazing library that connects directly to subgraphs and is written in Python so we can go ahead and start going into machine learning data science right away without having to go and do anything else just use this library and it connects right to a subgraph and you send queries right from there super cool and then also if anyone here likes dashboards that are no code this is daplooker it's awesome it's built on top of sub graphs and sub streams and from there you could literally drag and drop these into your dap and have these analytics right there and you don't really have to do any front-end design it just literally drag and drop and that's it it's really really nice um it's it's really good so yeah playgrounds and dap looker um one final thing billing subscription that's a new thing if anyone here is querying the sub graph a lot and wants standard monthly rates this is a subscription so it's a flat rate you don't have to worry about big spikes and big drops this is something that's rolling out or in beta right now if you have any questions about this reach out to us on telegram or meet us at the booth we can get you signed up and you can actually use that so some takeaways we love these centralized indexing there's a thousand sub graphs and the endpoints ready for everyone here to query and then go ahead and play in the playground thank you very much sister and if anyone wants to scan this and tweet uh that's the lifeblood of crypto so it does help foreign

Automatic transcript — names and jargon may be misspelled.