Building on Ethereum with GraphQL, The Graph, and Next.js

well it looks like we're live what's up everyone i can see your comments so if you're around say hello i'm going to send out a tweet to kind of spread the word and putting that together now if you are on social media on twitter or anything like that check out my my twitter and like retweet me because i'm going to share this so yeah man and uh women and anyone that's watching say uh hello in the chat this isn't my normal studio if you can kind of see i'm at the beach so that's where i'm going to be streaming from the beach because that's what we do you know we work remote we work wherever the hell we want today i'm working from the beach so i'm gonna be streaming from right here i might take a little break in the middle of the stream you know grab me some um something to drink or some some food or something because we're going to be here for for about an hour but uh yeah today we are doing a big launch at the graph and that's kind of what i'm going to be talking about today have a pretty cool project that we're going to build out i'm going to talk about some of the um ideas around some of the stuff that we've done here so we're pretty excited about this um i've only been on this team for about three months but they've been working on this for like four years so some of the ideas that are kind of launching today have been have been thought of but they've been theoretical ideas they've been concepts that that have been thrown around the industry but no one's actually i would say implemented something that's this complicated in this um comprehensive with a user interface that people can actually interact with on a bunch of different levels so we're pretty excited about it and kind of what i'm going to be doing today is just showing how to build out an api and use it on the front end i'm going to talk a little bit about the network and how you can participate in a few different ways and yeah we're going to kind of be writing some code today so that's kind of mainly what this is about so if you haven't seen the launch um let me go ahead and kind of link to it here and see if you can kind of like check out some of the work that's been done just by kind of like reading over the blog posts so this is kind of a link to the tweet um yeah someone mentioned ethereum conference in paris yeah i don't have tickets to that but i'll be there so even if you're in paris and you don't come to that conference hit me up um i would love to hang out i'm bringing in a bunch of grass swag i'm bringing t-shirts i'm bringing stickers um i'll buy you a drink or i'll buy you coffee i might even buy you dinner you know i'm going to be there for about a week so i'm looking forward to that um yeah so i shared a link to the launch and what we kind of launched today was like two new products or two new features of of the graph one is called the subgraph studio which allows developers like myself to kind of build these open apis on top of open data sets and i can curate um on my own api meaning that i can basically say hey i want someone in the network to start indexing the data from my api and i can start earning money based on the fees that they are able to generate um i can basically find other people's apis and i can signal on those and make money from those as well i can be a software engineer that just runs a node an indexer i can make money that way so there's all types of ways that you can make money um and that's what interests me uh the most about this is that i think this is going to be kind of um incentivized in a way that allows people to make money and that's kind of to me the best incentive you know and that's that's one of the incentives that uh drives me the most mainly because i grew up um or i wouldn't say i grew up like poor anything like that but i would say for the first 10 years of my life i was making and hardly any money so like software has been enabled enabling me and then i've seen a lot of other people around the world a lot of people that are actually part of the graph protocol all over the world that have been participating since early on mattified financial freedom because of it so i'm pretty excited about the incentives there and i think that that's one of the coolest things anyone can can come up with an idea using all these open data sets that are available from any of the different types of networks that we support so like right now it's mainly blockchain and decentralized data sources but the idea in the future is that we'll be able to have our indexers deal with any type of open data set and a lot of people are actually getting around that today by actually finding data sets that they won't index and building them into some type of existing network so writing writing those transactions themselves and then indexing them on a graph api is also possible but let's say i come up with a cool idea for an app or an api and i kind of just put that api together i deploy it it's now on the um the ui you can go check it out on the dashboard anyone that wants to use it can now build a front end on top of it they can use the smart contracts as a transaction layer like how they would before but they can now query those on their front end and we're going to kind of build out a ui that shows that and then doing so it's kind of like anyone that wants to use that can use it and any money that gets charged for that is now instead of going to massive companies like google and aws of course like the people running their infrastructure might still be on those but the actual the profits are going to the developers to me that's one of the coolest parts as well so um with that being said like that's kind of just a general overview i mean if you've been following the graph you kind of already understand some of this already but i think a lot of the people in my network are um you know web developers that are in the traditional web space still fairly early days even though we're kind of starting to hit some really really wild and interesting numbers i think we recently hit over a billion queries in a single day we're growing at a really fast clip you know that exponential type of growth is what you look for when you kind of get in on a a company or when you kind of want to get in early on a technology it's not about the actual i would say total numbers today it's about the growth because in a year you stay at that same growth you're going to be crushing it so that's kind of what i'm interested uh interested in so with that being said i'm going to go ahead and start building and um to do that i'm going to i'm going to be sharing my screen so let's go ahead and do that and i think to do that i want to go ahead and get my computer ready to start doing this so i'm going to close some of these apps that i have open and start sharing my screen alright there we go so this is the graph website you know you've probably seen this already what i basically want to do in this in this video is kind of show you how you can build out an api deploy it to the new ui the studio here and then build out a front end on top of it and be using next.js so that's we're going to do so to get started i'm going to kind of like go ahead and create um in my terminal like an empty window and to do that i first need to maybe like increase my font size because that's really small we're going to bump this up to something like 33. all right and so i'm in my empty terminal window and i want to go ahead and create a new sub graph so like i think if you look at the explorer which is also something we launched today you can kind of see some of the apps or some of the apis that are already on the decentralized network um so you know pull together is a really popular one unit swap of course is like you know doing billions of dollars in some pretty big apps are already here these are kind of like our launch partners people that launch today but if you kind of look at one of these apis and you know um you're familiar with maybe some of these applications that they're driving a lot of these are kind of like financial applications and to me the more interesting ones for demo purposes are actually like artwork or uh visual stuff so um the thing that i'm going to be building out is for an nft marketplace to visualize that because i think financial data is kind of harder to visualize and it isn't as interesting for like a user interface demo like this so basically um what i'm going to be doing is building out a subgraph so if you guys like the legacy explorer and i go to zora you'll see a bunch of like zora smart contracts that have been deployed for uh for subgraphs and then using this data like a content uri like this you can actually see a little bit more interesting data so if i kind of order by id and we pull up something from here you know when you when you have when you have stuff like this it's a little cooler like videos and stuff that you can actually show this isn't like loading right now but let's see here maybe we can find an image there we go so stuff like that so that's what we're going to be doing and let me just check and see if there's any questions that i'm like missing i'm sure there are but i will get back uh and answer questions and when i have a moment yeah so this will this is being recorded and it will be available on my twitch as well as my youtube later so what i basically want to do is build out for zora so zoro.co this is their website you know they have a bunch of nfts you know that people are buying and selling so this is kind of what i want to build out a ui for and another interesting one is foundation so if you go to foundation.app this is actually really nice as well and um you know you can kind of see the current bids so like this one's like four thousand dollars or two e this one's like five thousand dollars so this this one foundation and zora both get a decent amount of action but i'm going to be using zora so zora is you know again an nft marketplace and we're going to build out a sub graph and then we're going to build out a ui for that so to get started i'm going to go to subgraph studio and i'm going to go ahead and create a new subgraph and this is going to be zora live stream and here we can go ahead and see that we have our subgraph available now in the studio so we can now basically create and and write the code locally and then we're going to deploy this thing and push it up here to the actual studio dashboard and you kind of have some you know instructions here on how to do that but really the best instructions are going to be on the on the new website that we you know the new um the new docs that we have and you can also go to the blog building sub-graphs with stub graph studio and this is actually going to be essentially what we walked through today and this is kind of the actually i personally wrote this blog post so this is going to be kind of the api that we're building today and it should walk you through all the steps so we've already created this we now have our slug we have the status meaning like is it deployed or not right now it's not we have our deploy key we have some installation instructions you know graph cli and things like that and this is what we're going to be using now that we're ready to start writing some code so now that we have this placeholder here we can go back to our cli and i'm going to go ahead and install the cli and i think this is already installed on my machine but i'm just going to install it again and then once this is installed we have the binary and we can start using the graphcli all right so while that's installing i'm going to kind of go to this tutorial and this is essentially again going to be what i'm kind of walking through so this shows you how to kind of get set up i'm already kind of past that though i've created my subgraph and now we're going to be kind of right here where we install so now that we have the graph cli installed you should be able to just run graph and see kind of like the bottom area is giving you instructions there so graph dash dash help will kind of give you some common commands what we want to do is emit so we'll initialize a new subgraph and what this will basically do is create all the boilerplate that you need for your api so um this is going to be the command that we run graph init here we're passing it a couple of flags so we're passing in the contract name so this is going to be kind of like what we're calling this data source and for us it's going to be token because these are going to be digital assets using the open zeppelin 721 standard which is as in non-fungible token so token you know makes a lot of sense we're going to say index events meaning that we're going to look inside the apis or the application binary interfaces which is an ethereum smart contract api essentially that you can use to interact with a contract and it will look inside of the api and it will pull down the actual events that are emitted and create that create some boilerplate code locally for us so this is just a helper to kind of write some code essentially for us based on the events we also are saying we want to use subgraph studio because now we have both the hosted service as well as the studio so the studio is kind of what all most future apps are going to be using but we still want to support the old service so we specify studio and then we can also specify the smart contract that we're working with so i said we're using zora this this number here is the zora smart contract so how would you get that well if you go to zora developer documentation you can get it there um you know they have a link to the smart contracts here um of course though you could just go to etherscan right like etherscan has pretty much everyone's smart contracts listed there and you can you can find it in some other ways but i would say a lot of um contracts have their address public so in this case zora even goes as far as to have a developer documentation site foundation also does this dose of foundation school too fnd.dev has all of their sub they even have their own subgraph actually that they support i think zoro does as well yeah they have their own subgraph so you could use their existing subgraph but we're basically building out our own from scratch so that's kind of where this from contract comes it's the contract address right here so now that we've done that we can just hit enter and this should go ahead and walk us through the steps we only really need one more thing the subgraph name and i can just copy that from like this slug right here and then all these things we can just take the defaults so this is going to create all of that boilerplate code locally for us and now i should be able to go into this new directory and go ahead and open up my text editor all right cool so um this is our boilerplate code so this is like literally everything you really need to publish a subgraph is made up of i would say three main three main parts like if you can figure out how to uh if you can understand these three main pieces you can build an api on top of pretty much any of the of course like networks that we support you have your schema.graphql which is your graphql schema i'm just going to delete all of that for now we have our subgraph.yaml this subgraph.yaml is your configuration it is you know by default about 35 lines of code that's given to you ours is going to be a little bit less but your subgraph.yaml is basically almost like you can think of infrastructure as code we're kind of like telling the indexer that we're deploying this api to like what to do with the data sources that we're going to be working with and we'll walk we'll look at that a little more in a second and then the last thing you have is your src slash mapping so these are mapping templates if you've ever worked with something like appsync or even graphql you probably worked with a mapping template in the past so these just define they're essentially handler functions right so you have like the events and you want to handle those events and in our case we might have an event where someone mints a new token and we want to handle that data and we want to store it in our local node you know in our own um and our own api we want to store that and make it available so we have the mappings so a lot of these a lot of these ideas transfer for me directly from grockql days working in the web 2 space in traditional applications and stuff so those are the main things your schema.graphql your subgraph ymo and your mappings so for the first thing we'll mess with is the graphql schema so i'm going to go ahead and copy and paste some of the entities or the two types that we're working with one is a token type and one is a user type so if we look at zora you see that we have you know these mfts and they are associated with a user's address so um we want to be able to kind of store that information and we also want to store the metadata about the token itself so that's kind of why we have these two entities and for the token we just have all the metadata that we want to store so we can we can get this metadata from the actual event that we're going to be working with or if we really wanted to we could actually go out to a separate smart contract or data source and get data for a type or we can actually go directly into the graph node itself and get data as well so in the mappings you can essentially work with different data sources that are going to populate the the types that we're we're defining here and if you've ever worked with graphql you probably understand that a an exclamation point means it's a required field and if it's not exclamation point it means it's an optional or a nullable field so we're going to store the token id the content uri the metadata uri the created timestamp the creator and the owner and then we have the user type and the user is basically going to have a one-to-many relationship so a user has many tokens that they've created here and then they have many tokens that they've purchased so a user can be a creator or a consumer and the way that we create the relationships or using these directives and if you've ever used something like amplify or many other different graphql abstractions you might have seen something like this where you have a directive and in this case we're kind of saying we want to have this created that field derived from the creator here which is an address so the address would be you know a wallet address and then basically this is going to give us the ability to kind of have a relationship between the token and the user and then the user and the token itself or i would say the array of tokens all right so with that being said we can go ahead and save that and we have our subgraph.yml so here we're going to make a few changes we already have the address which is set when we created this the next thing we want to do is set the start block the start block is basically going to tell the indexer where to start indexing this data because if you deploy it as is it will start from the genesis block of the blockchain so it'll kind of go to the very first transaction on ethereum and work its way up from there which is kind of time consuming so instead what we can basically do is set the start plot so for the start block we're gonna um you can go to the smart contract itself you know let's see here i think this is the contract itself um so like how would you find this um so you can go to transactions and you can go to the very last transaction and this is it right here so that's the that's kind of the first start block that we would say so that's kind of literally the block that we're using here now for the entities this is the next update we want to make these are going to match the graphql entities so we have a token and we have a user and the last thing we want to do is deal with our event handlers so the three events that we're going to be working with are going to be transfer this event is fired every time a token is created or a token is transferred so if i create a token this event gets fired if i transfer it to someone else this event gets fired this is a good way to keep track of all the tokens that are in existence and then the other two handlers are going to handle updates so if i change the metadata uri i change the token uri i can track that here so these are going to call functions that are in our mappings called handle token metadata uri updated handle token uri updated and handle transfer and that's it we can go ahead now back to our cli and what we might want to do is write our mappings and in order to write our mappings we actually have a library called graph ts which is a graph a typescript library that we support along with the cli and using this library you can talk directly to the blockchain itself so you can talk to ethereum but you can also talk to the node the graph node so if you've already stored some data there and you want to retrieve that data you can talk to it and we actually use the graph cli to generate a lot of this code for you that makes it pretty easy to work with and to generate that code all we need to do is run a graph cogen and this will do a combination of things it will look in our graphql schema as well as the abis for the smart contract and it will go ahead and generate a bunch of functions as well as types type safe types for us to use so the types have been generated successfully we should be able to go to our generated folder and just see some stuff that's been generated and um the two classes that we should have are token and user so that's good we're not going to need to update this or anything just showing you what that that does um the next thing we're going to do is open mappings and i'm going to just go ahead and maybe like delete all this stuff and we're going to go ahead and import the stuff that we want to use so if i go to the blog post here this code is formatted uh not too well but i will format it in just a second so the first things that we're importing are from the token folder which is under the generated folder the token uri updated and transfer events are just um events that allow us to have type safety and then the token contract reference here or token as token contract this is a a class that allows us to interact with the actual smart contract so we can make calls to the smart contract using this and then token and user these are classes i'm sorry yeah i think these are classes that allow you to talk to the graph node so this basically means if i store something in as an indexer and i want to retrieve that data i can use these classes here and we have three functions we need to deal with so handle taken metadata ura updated handle token uri updated handle transfer so we need to have basically three handler functions in our mappings so the biggest one is this handle transfer so this is a function that will handle the minting or the transfer of a token so with that being understood then we need to handle a couple of different cases here we need to handle if the token has never been created before and we also can handle if it has already been created right because if it's being minted that means it's not there yet if it's being transferred to someone else that means it is there so the first thing that we can do is we we can basically use the token here from our generated code to first look into the existing node so we're basically calling into that database and we're saying if this token exists return it if not we're going to go ahead and create it and then here we're basically just setting a bunch of metadata like the creator the token id and the created at timestamp we then are going to call to the smart contract itself because in the event we're only getting certain data but we can call back to the smart contract to get other data so the thing that we need from the smart contract is the content uri and the metadata uri so we're calling the smart contract here and we're we're kind of like adding additional fields to this object here so we have a token we're adding the creator the token id created at time stamp and then this other content information as well we then update the owner or we set the owner maybe because it could be a brand new token with no owner we then save that to the graph node we then also do the same thing with user if the user exists we load the user and if not we go ahead and create the user and the last two functions that we need are for handling the token uri updated and handling the token content uri updated so uh token uri updated just fetches the token and then updates the uri content ui and then saves it and then the other one we have is token metadata uri updated so we don't have that um defined yet so i'm going to go ahead and do that i'm just going to copy this and the event is actually going to be and github copilot doing some work for me there so we have this token metadata uri updated event and we want to set the metadata uri and i think we're good so now we have written our mappings we have three functions that we're dealing with handle transfer handle token url updated and handle metadata uri updated and then we have our sub graph here that's defining those events and i think we're ready to go ahead and deploy this thing so what i want to do is go to my cli and i'm going to run graph deploy and here we can actually define i believe the studio so we're going to say studio and then i want to go ahead and pass in the subgraph name which is right here and i'll give this a label of a version of 0.1 and oh i need to go ahead and auth first yeah so let me go ahead and graph off dash.studio and i can get my deploy key right here all right so this should be deployed so if this looks good then we should be ready to go back to our dashboard here and as you can see it's already been updated with the graphql playground and now we can go ahead and start running some queries and then we're going to transfer this into our next.js app so um we might pass in some arguments like uh order direction descending and then maybe order by created at timestamp and then we already start seeing some data that's coming back if we look at the content uri we see that we have um the actual constant uri coming back or the content coming back all right so um our subgraph has been deployed if we want to know how to query this from our front end we can actually go here to details and we have our query url so i can copy this i might go to something like graphql bin i think it is and you can see that we can also use this you know in graphql bin or any of these different graphql uis so our our api is working that's the url that we're going to use so now we can go ahead and jump into a front end application so what i want to do is create a new next.js app and we're going to call this like zora ui and i guess that should show up here and what we want to do is build out a ui on top of this this api so what i'm going to do is use tailwind because tailwind is pretty nice and i'm going to go ahead and install the stuff i need for tailwind then i'm going to initialize the tailwind project and then we're going to go into the global css and we're going to go ahead and do that and now we're ready to go so in the ui i'll probably go to x.js and this is where we'll do our work go ahead and delete all this code here and the things that i'll need are going to be use state and use effect react and i'll also probably need i think i have some code that i can reference here i don't want to kind of like reference this directly but i do want to kind of like get it use it to get started so we have git server subprops this is going to be where we call our fetch data function and fetch data is going to call our graphql api and then it's going to come in here as props and then we'll just console.log that and maybe we don't even need actually use state because if we're going to be using um next yes we can just pass it all in as props so this is kind of where we're going to get started so what i want to do is how do we actually call the graphql api well you know we have our endpoint here in our docs we also have some documentation around you know different graphql clients so you can use something like apollo or you can use something like urkel i think i'm going to go with oracle just because it's a little less code so i'm going to go ahead and install urkel and graphql so we have oracle and graphql installed now and what i want to do is basically let's just say copy all this code and then we're going to kind of break it up in our app so we have create client from oracle we have our api url the api url that we want to work with is going to be this api this url here i mean for the query we want to just use a query that we know is going to work so let me go back to my api and just write a query and then i'll copy that and paste it over and we will also say we want to get the first 10. so that's our query this is going to be our uh client where we kind of say create client we set the url and then we can call that for the data so let's go ahead and just do this and then just console that log data we'll just return like an empty array alright so we have our base functionality ready to go you can go ahead and run this so it looks like i have to stop another server i have running so local has three thousand and when this when this runs i think we should be seeing this logged out here so there we go there we have it we have our data there so we have data.data.tokens so i might say return data.data.tokens and then in our ui we see that we have our tokens that should show up all right there we go so we have our 10 tokens we have our content uri we have our metadata uri the metadata uri has stuff like this where we have kind of like the mime type the name the version the description stuff like that that you can use in your in your user interface so that's great um so we have kind of all the base functionality now we just need to build out some design on it so for the design stuff and actually one other thing we might have to consider is like mapping over the uh the data itself because the way it's coming back we might want to kind of like to change it up a little bit so for instance one thing that we don't know is directly from this data is are things like the mime type so they get the mime type which is going to allow us to display that we actually have to call a fetch call or an axios or some type of http request to get this json data and that way we can kind of know like if it's an image or if it's a video or if it's a gif like how are we going to display that and we also just want this data this metadata anyway so what we can basically do is kind of like have a function right here that maps over this data so what we're going to do is we're going to say something like data.data.tokens.map and then we're going to kind of like map over everything and then and then we're going to call fetch to kind of get that metadata now luckily i've already created a function that does this that way we don't have to like walk through all that so i'm going to go to my github i have this fetch data function i'm just going to replace that with this maybe delete some of the console.logging okay cool so this function is basically going to [Music] map over all of the tokens and we're going to call out to fetch the metadata and then we're going to kind of like update the type based on the metadata so if it's mp4 we want to show a video if it's an audio we want to show audio if it's image you want to show image and and then once we have that new updated metadata our refresh unless we broke something here we should see that metadata and i think i'm going to update the query to just return the first one for now and then i'm going to restart the server all right so here our tokens have our metadata we have our description we have our mom type we have our the name and we have the version um the the last thing we want to do is build out the actual uh styling using tailwind and i also have an example ui for that that we're gonna that we're gonna use so i'm gonna go ahead and copy this and i will tweet out and make all this stuff available and i'll probably put in the comments as well but the code for this but it's nothing too fancy it's just kind of some basic css using using tailwind but what we're going to do is is this we have our props we have our tokens so if we refresh we now see that we have our ui here and what i might do now is instead of just returning one let's go ahead and bump that back up to like 10. oh that's ugly oh i think i know what i'm missing missing this there we go so now our ui is uh showing you know all the different nfts and i must have not taken into consideration a some type of mime type so let's see what monotype that is or just may not be loading for whatever reason yeah it looks like there might okay looks like this one's loading so it looks like this is audio yeah um unsure about why the audio isn't working but i can kind of look into that but um that's kind of that's kind of the demo you know we just wanted to kind of show you how to to build that out and i think the interesting thing you might do at this point if you're a developer and you're willing to make money off of one of your apis i think this is like again the power of um having a self-governing application that's out there in the wild that people can basically compete against each other based on quality to kind of build out the most valuable different apis is you can actually publish this to the network and start earning query feeds on it so if you publish this then anyone that wants to use it can use it and based on the usage you're going to make money you don't even really have to do anything you just put it out there and then if people use it then you're going to basically make a portion of the money from from the usage and this is done by writing your your your information and your transaction of the publication to the blockchain so this is you know pretty interesting because you're basically publishing it one and once it's there it's always there and um you know that's that's to me pretty powerful and if you want to do that you would basically need to have some um some tokens so i have some tokens and i can basically publish either to rinkaby or the main network so i can go here to rinkaby and here i have some tests go ahead and publish this sync select recommend network and probably need to do something with my um let me go ahead and disconnect from all of these different accounts and then reconnect all right let me try this one more time it looks like i'm having some issues publishing i'll have to look into what's going on with that it looks like i have i was showing i have zero eth for some reason but that's not the case oh i think i now know what i needed to do let me go ahead and disconnect and then connect again so um i think i was authenticated with the wrong wallet so after this is published it'll show up on the network and um i can test it out because this is the rika b test network but if you publish system main that that's when you would have people starting to basically be able to like pay you to use it so i'm going to stop sharing my screen and basically start seeing if anyone has any questions or anything like that so someone says i'm confused as to why someone would build on um the ethereum blockchain i mean if you look at basically let me paste a couple of links to kind of just some of the different apps that are being being used i guess already and it's not just uh ethereum and it's not even just blockchain actually it's the idea is like any um any open decentralized or any open data source actually can become a subgraph any data that's that's out there um and i just pasted two links of a bunch of different apps that are out there i mean you're seeing a huge huge number of defy stuff right now you're also seeing a lot of e-commerce and a lot of our art stuff and um the the i would say the reason that you're seeing mainly stuff that has high transaction um or high value or because of the transaction costs that are typically associated with ethereum right now that's why um you're also seeing a lot of increase in the usage of things like these quote unquote layer twos and side chains that allow you to have a transaction for a fraction of a penny is kind of like typically where they they fall so if you want to write a transaction directly to ethereum the uh transaction costs are going to be a few dollars at least but what you've seen that has happened over the last few months is a lot of these these scaling solutions that have gotten past the development phase are now going into production and even uh what we're using is polygon so if you want to publish something in the past to ethereum it would it would cost you a few dollars per transaction now it costs a few cents so i think that we've already seen a massive increase of of dapps in the last couple of years unit swap uh you know decentraland foundation synthetics if you look at the linkstop provided there's a bunch of them there with billions of dollars in transactions per day um you know that was already happening when gas was expensive now that now that it's extremely inexpensive i think you're going to see the kind of the next wave of apps that are being built and then as you have um even less expensive data layers so things that are like what they call off chain data which you could think of as just like a typical database when you start seeing those things becoming a little more mature in the next six months or so you're gonna then see another wave so i think we've seen that first huge wave of apps being built on various uh blockchains like like i mentioned all these defy apps and all these e-commerce and and art applications um the next wave i think is going to come now that we have the layer twos and the side chains that are you know very inexpensive for transactions and then i think the next wave after that will be when the um floodgates open up for building out apps with high throughput so you can't build something like twitter or facebook or instagram right now directly on a blockchain it would just be too expensive you want a really inexpensive data source so i'll link to a bunch of apps that people are already building um you know you've seen a lot of huge institutional adoption over the last six months to a year so i think the growth that's happening now is going to be even more so in the next few months maybe a year or so so it is still fairly early on though because you can't really compare this with what's happening in uh the web 2 world it took you know 20 or 30 years to get there um but i think if you look at the numbers so for instance um the adoption for instance of crypto is two times that of the internet of people that started actually using the internet as is growing twice as fast with crypto so if crypto continues to grow two times as fast and you're going to see twice as much adoption and that's going to therefore affect things like you know the graph um so someone says this is basically exposing costs to different smart contracts why would anyone use this instead of querying directly with ethers from the front end yeah this is definitely calling smart contracts uh directly in the indexing phase like when you're actually deploying your subgraph you're calling these smart contracts and then you're kind of like hitting every single block that has a transaction saving that in your own api so the reason you wouldn't call directly from either ethers well you could call directly from ethers for a single uh operation but um and imagine the real world applications that we use today things like twitter instagram where you have complex queries so if i want to query just the the friends of my friends or i just want to query my own friends or i want to get the friends that have viewed my profile in the last week i don't know what types of you can do with twitter but whatever um you can't do that directly on ethereum like you can't expose all those different api calls in an efficient way um the only thing you can do is pretty basic queries you can query for a single item or maybe a small array but anything past that is just impossible so what people were doing in the past to get around that is they were building out their own indexing servers similar to kind of what the indexers are on the graph but they were doing that for every single different application that they would build and um they would also be having to build out a new api for any type of selection set that they needed from from the blockchain and therefore you had a bunch of people building out a bunch of these individual um centralized indexers that they were having to deal with and run themselves and there are two things that were drawbacks to that and that's the the reason that you do see a lot of these big companies like unit swap and foundation using the graph is that it breaks the idea of decentralization in the first place so you end up with a single point of failure and if you have any issues with your infrastructure then your app goes down um and it also breaks the whole fundamental idea behind decentralization as well but um and then the other thing is that it's resource intensive so it's it takes um once you understand how to build a subgraph it doesn't take that long to to deploy a subgraph um a few a few hours you know once you're kind of like familiar with it maybe a few days when you're first getting started but if you need to build out a subgraph or an indexing server every time you need to have some type of data it's very resource intensive so this is a lot easier for for app developers to kind of get up and running with and also it's they don't have to manage their infrastructure it's serverless you know serverless is one of the things that that i'm interested in and i'm super interested in serverless in a traditional sense i'm very interested in you know serverless on aws like that's that's here to stay but i'm also very interested in kind of like the idea of the fundamental value proposition of serverless and serverless doesn't mean that you have to be running like a serverless function it's the philosophy of not managing and dealing with your own infrastructure and that's exactly what uh what the graph is doing um i guess the interest would be to have some custom data like pre computed fields also how i earn money by publishing endpoint i don't run a node that you store on rewards yeah that's exactly right you publish your subgraph and um if anyone decides to use it then you earn a portion of the query fees and you know i've kind of talked a lot about these these the tokenomics the token uh the crypto economic uh protocols uh the ideas around crypto economics and um and the the philosophy around it like the ideas it sounds cool but how does it look in practice well this is kind of how it looks in practice i think um if you want to learn more about how all of our own technologics work you can go to the graph blog and read a bunch of interesting blog posts that have been created by different people within the graph foundation as well as some of the founders um someone asked can data be protected on the graph so no uh this is only for public data so this would not be for any type of authentic authenticated or authorized data so this is completely for these decentralized uh you know open apis for open data because all this data is already there right so like any data that's on the blockchain is publicly accessible and i think like when you start thinking about building apps in this way it's a fundamentally different idea than what we're used to we're used to association of our own personal information with personal data and i think that those applications are going to continue to exist but i think in the the grand scheme of things people are very now uh wary of of tying their own personal information to data that's stored and managed by other uh you know people so for instance you just had that massive you know linkedin data breach because you know they they opened up some way that people can basically query for ridiculous information about every user but it's like every day or every week you hear about a new data breach and i think the way that we think about identity is starting to change so i think that you're not gonna um in ten years you're not gonna authenticate with google and give them your first name and your phone number and your address instead you're gonna have uh more of a an anonymous identity or an identity that at least you control so for instance if you look at the project that i released recently i'll link to it here called uh decentralized identity this shows you a way to have self-sovereign identity using some of the stuff that i'm kind of talking about today so this is a way for you to use your blockchain your blockchain address you know your cryptocurrency address or whatever your wallet address depending on the wallet that you're using and you have full control over your uh your identity and you can tie your personal information to it if you want you don't have to and basically if you decide to change your information you do it in one place and then every application that's using it will then become available to all those apps and if you ever want to delete it your information you can if you don't you know it's all it's all up to you um so let's see any other questions that we have yeah someone mentioned yeah three id connect that's that's what that is using yes so three id connect is uh is awesome um decentralized identifiers are awesome ceramic is awesome and do you have any boot camp complete courses i am not much aware of graphql um so how to graph ql is a good place to get start with graphql there's also um trying to think other yeah hasura has a really great graphql course that's free and um i will share this link to all the code that i'm using on my github after the stream is over and it will be on github.com but for now i don't have it i don't have it uploaded anywhere cool so um is there any more questions if not we might go ahead and wrap it up in a little bit i'm checking out the comments here yeah i see a bunch of people in here um what's up will johnson i don't know if you're still around but if you are hey i know i missed that comment earlier um i see attila let's see sasha see who else is in here yeah i see a bunch of people so thanks for all you have for stopping by i think that's gonna be it so um the place that i would go if you're interested in building out this similar uh subgraph is the graph.com blog and i'm gonna actually go ahead and link to it here and it's called building apis or building with subgraph studio um so check that out check out my tweet that i'm going to send out in a few minutes where i'm going to kind of just take this project that i created during this live stream and make it open source and that way you can kind of get up and running building this as well and that's it so this this stream is over i appreciate everyone coming through and if you wanna someone mentioned uh if you wanna know the difference between an indexer and a subgraph developer um i can quickly give that overview but if you wanna learn more i would check out the graph docs so a subgraph developer is someone like me who's like writing typescript and graphql and that just creates the description of an api and like the data that needs to be served and i kind of just developed that subgraph and then i deploy it to a decentralized decentralized network of indexers an indexer is like again maybe it could be someone like me a software developer that decides to run their own node and make a profit off of the other people's subgraphs so i can if i'm familiar with aws or if i'm familiar with gcp or i even have a server sitting in my room i can basically go to the graph github download the node software uh create a node and then deploy it to the network and then my indexer can now be serving up in queries for anyone else's subgraph so if i launch a subgraph then it's going to be picked up by one of these indexers and then the query fees are going to be split between the indexer and the subgraph developer so you run an indexer you might have a thousand sub graphs deployed to your indexer or 100 or whatever and um you're going to make portions of the query fees on both of those so yeah you make money either way i think the more technical level thing is to be an indexer not that being a sub-graph developer isn't technical i would just say indexer is more like devops sub-graph developer is more like front end or something like that so yeah that's it that's that's my answer um i am going to go ahead and wrap this up i'm not going to get any more questions right now if you have questions hit me up on twitter twitter.com david3 three i'm gonna go head to the beach now and chill with my family i'll see everyone later

Channel: Nader Dabit

Views: 3,204

Rating: 5 out of 5

Keywords:

Id: JpOLhkmtOak

Length: 60min 8sec (3608 seconds)

Published: Fri Jul 09 2021