GraphQL Tutorial #35 - Making a Single Query

Key Takeaways

all right there so we have at this query right here called get book query and the idea of this is to go and get a single book based on this query variable the ID right here now we've bound this query to the book details component down here but at the minute it's not really doing anything because we've not passed that query variable to it so it can't go out and query that book for us so what we need to do is find out a way that when we click on one of these items we take the ID of that book pass it in to the book details component then attach that ID as a query variable to the query so we can go and get the details of that book and display it right here sounds complex but it's not but there's a couple of different steps to doing this first of all in this book list component we need to listen out for when a user clicks on one of these items then we need to find out the ID of that and pass the ID as a prop down into this component right here when we have it is a prop in this component we can easily use that prop as a query variable when in the query associated with this component to go out and guessing a book so let's start this process the first thing we need to do is go into the book list component and attach an event listener to each Ally that is output to the screen so let us do an on click event and set it equal to something now what do we want to do inside this function well it's first of all it's going to take the event as a parameter then we want to update the state to keep track of what book has been selected using the ID of the book now to do that first of all we'll do our constructor up here so we'll say constructor and it takes in the props and then inside we'll do super props and then under that we'll say this dot state is equal to an object and we'll use a property called selected and set it to null originally so this selected property right here is going to keep track of the ID of whichever book we've clicked on right to begin with it's not because we don't click on a book to begin with when it first loads so when we click on an individual item what we would like to do is say this dot set states then we want to set the selected property on the state equal to the book ID remember we have access to that single book right here okay because we're mapping through them so well updating the state right here to match whichever book we've clicked on right then what we can do is pass this selected property down as a prop into the book details so we could make up a prop name here I'm going to call it book ID and set it equal to this dots state dot selected all right so whenever we click on a new book now it's going to update the selected property so that it becomes the ID of that book then when that changes it passes the new value down as a prop into the book details component so the prop on the book details component now is going to be updating as we click on different books so we can see that if I in the render function just console dot log this dot props we're going to see update as we click on different books so let's just scoot over here and click on a book and we can see now that this book ID right here this prop is on the props object and we can see it's 5a all this random string if I click on a different one it's gonna change now it's 5a be something the long universe etc okay so they're all changing now we're keeping track of that book ID and passing it down as a prop in to this component now so now we have that prop this book ID in this component we can use it to attach it as a query variable to this thing right here so how do we do that exactly well it's pretty simple all we need to do is pass through a second parameter right here and do an options property and this options property is going to be a function which takes in the props as a parameter so whenever we update the props or a new prop comes in here we're going to refire this function so this function is going to set the variables or rather it's going to return an object and it's going to set the variable for this query and the ID variable is going to be drops dots book ID so whenever that Prop updates this is going to rerun and reset the variable for this query alright so if we now console.log this dot props then we should hopefully see the data that comes back from that query so let's go over here refresh and if I click on a book then I'm going to see this thing over here so we have the book ID we also now have this data property which is for the query itself and if I open up that data property we can see the book that's been returned so we have genre the ID the name color of magic we also have author information including all the different books that that author has written as well awesome so now what we're doing is successfully taking the idea of each book when we click on it passing it as a prop then using that ID on the props as a query variable so it's attaching itself to the query we're going out grabbing that book returning it to ourselves and locking it to the console at the minute so that's cool now we have access to the book inside this thing racking inside this component so what we can do is check for when that book exists right one doesn't exist to begin with when we first load the page but when we click on something a book will exist so we can check to see when that book exists if it does we output the details of the book if it doesn't then we output something else like no book selected so how are we going to do that well I'd like to create a function to control this kind of output of HTML so I'll call that function display book details alright so inside this function first of all I'm going to say Const and we're doing a bit of D structure in here and I'm going to grab the book variable from this dot props data all right so this is just ear six destructor it is the same as saying cons booked equals this dots props dated up book I'm just using es6 destructor in to grab that book property from this dot props top data right so now we need to check if that book actually exists right so we can say if book now if this returns true if this passes the evaluation then we do have a book if it doesn't then we don't so if we do have a book then we want to say return and we're going to return some HTML here first of all a div and we'll close that off then inside we're going to output information about this book that we've just grabbed okay so the first thing we want to output is the book name so we'll do the book name in h2 then close that off the second thing you want to output is going to be the book genre so let's do that as well book genre and close that P off then we'll output the author name maybe so again book dot author then we need to say dot name because this author property is nested on the book and we have a name property on the author so close that off and then I'll also output the other books by the author so I'll say all books oops not in capitals all books by this author like so and then underneath I'd like to output all of these books inside a you app so the way you out and then this is gonna have a class name equal to other books this is just for stylistic purposes later on when we use a bit of CSS on the app so inside the URL we need to output all the different books that this other author has done so how are we going to do that because we have booked authored books and that is an array of different books so what we could do is map through those books and output some Li tags for each one of them or one Li tag for each one of them rather so let's open up our curly braces to do some code then we're gonna say book dots author dot books dots map and inside we're going to take each item as we map through the array and fire a function and inside the function we're just going to return an li tag and it's going to have a key equal to item dot I D so that's the book ID of the item then we're going to output the item dots name right here and we'll close the Li tag off cool so let's just scoot this back up here now alright so now we're outputting the data of that book if it exists if it doesn't exist we want to output something out so let's do else and then say return and in brackets we'll just return something like a div and then no book selected all right so div again then we need to call this function so let's copy that and paste it down here right so and we need to say this dot display book details all right so now when we call this function what we're doing is we're first of all grabbing the book property from this props data from the data that comes back from the query if that book exists right if we have a book available to us then we're returning this content right here where we're at put in the name the genre the author name and the other books and we're outputting the other books by mapping through just like we did with previous things in previous tutorials if we don't have a book then we're just outputting this div with no book selected inside it so let's save this cross our fingers and hope it works no it doesn't we get an error and that's because stupidly we've placed this display book details inside the render function how daft can you get so let's take all of that and scoot it out of here do we need that as well I think we do so let's grab that so let's take it out of the render function and put it above the render function and this should now work so let's have a look in a browser okay cool so if we click on a book now we can see currently it says no book selected if we click on a book then we get details about that book and the other books by the author that's awesome all right and every time we click on a different book it updates cool so there we've got my friends now we can successfully add new books we can make those mutations we can list the box and update them as we add them and we can display the details of a book when we click on one so in the next video I'd like to take a few moments just to make this app look a little bit better because it looks pretty cruddy at the minute so we'll get our CSS wizardry on in the very next tutorial