Learn Blockchain, Solidity, and Full Stack Web3 Development with JavaScript – 32-Hour Course - Ep266

where we can practical ml courserunsome queries to see different events andthe different responses from our graphqlwhich right now it's totally blankbecause we haven't done anything yet soonce again let's pull up our hard hatnft Marketplace code or open it up in anew terminal whatever you want to do andlet's go ahead and let's run our mintand list script but for rink B so we doyarn hard hat runscripts mint and list item-- Networkrink so we're going to Mint an nft rightthis is going to be two transactions sowe're going to have to wait a little bitand then we're going to approve the nftand then we're going to list it on ourMarketplace and once it's listed it'sgoing to emit an item listed event andwe should see now we have an active itemand an item listed data in our graphqlnow you can learn more about now whatyou see here on the left hand side is iswhat's known as a graphql query nowwe're not going to go over how to dothese but I'm going to leave some linksin the GitHub repository if you want tolearn how to do more of these queriesthese are going to be similar to what wesaw with Morales but instead of thembeing kind of regular table lookupsthey're in graphql syntax and theresults of our query end up being overhere we can see more information aboutour schema all the way to the right overhere but if we look at our code nowwe've Meed the NT approved it we'velisted it on on our Marketplace so nowif we go back to the graphand we run this query and we do a littleRefresh on our nft Marketplace we mighthave to wait a few minutes for the graphto index these new blocks but in ourplayground we should see this show up asa query if you don't automatically getthese you can pause the video to writethese into your your graphql playgroundall right so after a few minutes if Irefresh on ether scan I can see thatlist item transaction has gone throughthis means we've emitted a new event soif I come back to my playground and Ihit play here oh my goodness we can seewe have active items and we see we haveitems listed this is fantastic thatmeans in a decentralized context we havea offchain service that is indexing ourevents for our contract so that we canupdate our front end and we can updatepeople in a decentralized way this is soexciting awesome so now that we havethis all set up we can finally go backto our nextjs project our nextjs nftMarketplace the graph FCC reason we didall this is because right now in ourcodebase for our nextjs nft Marketplaceapplication we're reading from a Moralesdatabase which we're not going to doanymore instead of reading from aMorales database we're going to readfrom the graph let's go ahead and learnhow to update our code our index.js toread from the graph instead so to tohighlight this to show this we'reactually going to create a new page anew file and we're just going to call itgraphexample.js and we're just going to makethis a really minimalistic page to showyou how to do a graph query so similarto index.js we're going to do exportdefault graph example it's going to be afunction or default function graphexample and we're going to use this toolcalled Apollo client copy paste it overand we're going to add it with yarn add-ddev at a/client excuse me not Dev because we doneed this on the front end so yarn adApolloclient oh sorry we also need to do yarnadd graphql we need to add both of thoseand it's this Apollo client which is howwe're going to make queries to our newlycreated graphql so we're going to sayimport the used query Hook from thispackage we just installed from at a o lSL client and we'll also import gql soto create a new query we'll say constget active item equals gql and we'll addthis back tick here and we'll add all ofour graphql stuff in here this is goingto be equivalent to this this is graphqlsyntax and we're going to be puttingthis graphql syntax into our code basehere but we only want to get the activeitems so how are we going to get theactive items well we can actually buildit over here on our playground first andthen add it to our code base so we'llsay we want to grab the active itemswe'll grab the first five and then we'llsay where the buyer is going to be0x 1 2 3 4 5 6 7 8 we're saying wherethe buyer is empty so we're grabbing theactive items where there is no buyer andthen we're going to do and then we'regoing to get theID thebuyer theseller the nftaddress the token ID and the price fromthat and if we hit run we get our activeitem here so we see here the buyer isthis exact 0x 1 2 3 4 5 6 7 8 because itgets defaulted to zero when there is nobuyer and this is why for item canceledwe updated the buyer to be that deadaddress so if it's bought it won't beactive anymore and if it's canceled italso won't be active anymore now we cancopy this query and paste it into ourcode and now we have a graphql querythat we can use for our graph examplenow in our graph example we'll use thisquery with this use Query hook so inexport default function graph example wecan say const and it comes with a wholebunch of stuff like loading error andthen the data returned equals use Queryand then we'll just pass it this getactive item or get active items let'sput an S on it get active items and thenwe can just return we return a littlediv and we'll say hi in the div and thenwe'll just doconsole.log data and then now we'll goback to our app.js where we're wrappingeverything in a Morales provider we alsoneed to wrap everything in a Apolloprovider and we need to initialize itkind of similar to how we initializeconnecting to our Morales server butwe're going

(Editor: javascript)