GraphQL Tutorial #28 - Add Book Component

Key Takeaways

alright then gang so now we're out put in all of this data the list of books to the screen inside this book list component but what we want is the ability for a user to add a new book to the list right and then store it in the database using this whole idea of graph QL now if we remember - what the project looks like at the end we have this form at the bottom and we have the book named genre which are both text fields that we have this author drop-down as well and this is populated with the different authors so we can select from one of these different authors right because that's much easier than the use of putting in the book name is genre and the author ID we don't expect the user to know the author ID so we're giving them an option here so we need a way to populate these authors inside this field right here this the Select box and to do that we're going to need to make another query to get the authors and attach it to this component right here so how about we start by just making that component so then I'm going to cross off the app yes and the book list and in fact I'll keep that open because we'll copy some of this in a minute but I'm going to create another component first of all and that is gonna be called add book j/s alright so now we have this other component the first thing I'd like to do is go over here and import I'll rather not import copy this door from the book list component and paste it in here so we still need all of these three inputs at the top now this time we don't want to create a get books query we want to create a get authors query so that we can retrieve those authors and then place them in the Select box right here like this so let's change this to get authors query instead and then inside this query it's gonna be called authors like so because we want all the authors and from each one we still want the name of the author and the ID of the author as well all right so we have the query constructed there all right so the next thing we need to do is make the component itself so again I'm just going to copy this stuff right here and paste it in because it's much easier to do it that way then rewrite it so first of all we need to change this to add bulk and then we'll get rid of this display books stuff up here because we don't need to display books anymore we're gonna display authors instead but we'll add that on in a second then down here we don't want this UL with a book list inside instead what we'd like to do is output some kind of form and in fact we'll get rid of the div text because we can just put the form tag in here straight away now I've already prepared this form HTML because I'm sure you don't want me to sit here and write a whole form from scratch while you watch this is basic HTML book just to quickly walk you through it we have a form tag with this ID of AD book we have a div and a div and a div so three different deals right here each one has a class name of field remember in react we can't say class in cross field because class is a reserved keyword we have to say class name equals field so in each field we have a label for the book name genre and author then in the first two fields we have a text field for the book name and a text field for the genre then for the author we have this select box right here and currently the only option is this top one select author right so we want to dynamically output data here shortly but for now we also have this button with a plus sign on it as well to add the book to the database all right so let us take this book form it and paste it inside the return statement here and yep it still looks okay so now we have that hate email the next thing we want to do is bind this query to this component so much like we did with the book list component down here where we said graph QL then the query then the component we're going to do the same thing down here so at the very bottom let us say exports default and then we need to say graph QL and then in brackets the name of the query which is get all this query then in brackets again the name of the component which is add buck alright so what finding this query now to this component so before we start dynamically output in any kind of data to this form why don't we just nest this component inside the app Jas file this is the root component so much like we nested the book list let's nest now the add book component so let's copy this onto a new line and instead of book list we want add book and the same goes for the URL here so now that you are out the string so add buck and down here we can output the add book components underneath so we can say add book like so alright let's save this cross our fingers and hope for the best so over here now we can see this form alright so cool is looking all right we can add a book named as genre but right here we don't have the options of the author now we've made that request we've done that and we should at some point have access to the author data it should be returned to us right so let us do a similar thing that we did here we'll check for when the data is returned to us if it hasn't returned then we'll just say something like loading authors if it has returned will populate this with the different authors right okay cool so then back in the code well let's go to add book yes and what we'll do is create a function right here called display authors because at the end of the day that's what we're doing with displaying authors in the component right so again var data is equal to this props data remember this data object is attached to this dot props when we bind a query to the component right and then eventually this data will have the data that we've queried right hits of the authors so it'd be like this dot Propst updated our authors will have that eventually but first of all we need to make sure that the data has finished loading so again we'll do a check if data loading so if this is true it means that the loading states still true and we've not received the data back yet so until we have received the data back we just want to returned like an option saying loading authors or something like that so we'll say return and then in parentheses we'll do an option tag because this is going to be embedded inside the Select right here so we need options hugs here so this option tag inside will have something like loading authors all right so let's close that option tag like so let's just put disabled on here to disable that option anyway now we've returned that if the data is still loading if we've not received it yet else if we do have access to the data then we can start to output that data in the select box right so again we're going to map through that data so we'll say return data dot authors because now we have access to the authors they've been returned to us dot map then each iteration round we have access to the individual item in that array so I'll call each one and author which will pass through two and the es6 function right here and inside that function each time around we're going to return a bit of hicks tml it's going to be an option with that particular author inside so we'll say option and then inside the option we're gonna say author dot name and then close off that option at the end so forward slash option now a couple of things we still need to do here and I want to give each option a key value much like we had to give each Li a key value in the last tutorial you see here react requires us to do that we need to do the same thing over here in the option so we'll say ki is equal to author dot and it's not in quotations it's in the curly braces so author dots ID so that's a unique key for each option tag right here we also want to set a value property of each option so that when a user selects a particular option on the form then we know the value of that option right and that value is going to be the author ID as well and we're going to use this author ID when they go to add a book to create that data in the back end right to a so in that particular book with this author I hope that makes sense so this is gonna be author ID as well like so alright then so let us now call this display authors function otherwise nothing is going to be output at all and we need to do it underneath this option so display authors but we need to place it inside the curly braces and say this dot display authors because it's attached to this component right so let's save that and head over now to the browser in the front end all right let's sir let's hope for the best here if I go to select author now we can see all of these different authors now we have some random ones here John and David which I created a little while ago I didn't mean to leave those in so I will delete those shortly but we can also see terry pratchett brandon sanderson and patrick rothfuss so we have all of that data now associated with this component awesome so how about we leave it there for now and in the next tutorial we'll see how we can take this data that the user inputs into the form and then update our graph to our server and update the database add that data to the list all right so we'll take a look at that over the next few tutorials