GraphQL Tutorial #32 - query variables

Key Takeaways

alright then so in the last video we saw that we could bind our mutation here to our components by using this composed method right here so we've got a query and a mutation now bound to this component but when we call this mutation up here by saying this drops to add book mutation it's running the mutation right here but we're not passing any kind of dynamic values into these properties so it's creating that book but they all have empty properties these named genre and author ID fields so we need a way to take the values which are being updated in the state of this component the name genre and author ID and we need to inject those into this mutation right here now fortunately there's an easy way to do this and that is using what is known as query variables so after this mutation keyword we can pass in some query variables into this query down here right so we can add on parentheses right here after the mutation and the way we do this is by doing a dollar sign first of all to say that this is going to be a query variable that we pass in and then the name of that query variable so we're going to pass in a query variable which is name and that is going to be of type string and we put an exclamation mark at the end to say look this has to be a string and not null right it's required so the next one is going to be genre so dollar sign genre to say we're passing in a variable called genre again this is string and we put an exclamation mark at the end to say this is a non null graph QL type cannot be empty and then finally we're gonna pass through another variable into this mutation which is going to be the author ID and that is going to be of type ID and then it required as well so okay when we call the mutation we're going to pass these variables into the mutation right and then when we actually call that mutation here at book we can access those variables so instead of name being an empty string right now we can name is gonna be name which we passed in up here right genre is gonna be genre like so and then author ID is gonna be author ID right so we're saying okay this mutation is going to take in some variables of these types and then inside the mutation we can access those variables so when we go to add a book we can say the name is equal to the name variable that was passed on the genre is equal to the genre variable that was passed on and so forth so we we're accepting variables into this mutation now now we just need to pass variables into the mutation right so let's save that for now and go back to our add book component and we need to figure out a way to pass those query variables into the mutation so at the minute we're making this mutation right here and this is where we can pass those query variables in so if we enter an object into this function right here as a parameter we can pass in a property called variables and this is equal to an object and the different variables are going to be key value pairs so the name variable is going to be equal to this dot state dot name so whatever the name is equal to at this moment in time the same can be said for the genre so it's going to be equal to this dot state genre and finally the author ID that is going to be a variable that we pass into the mutation equal to this dot state dot author ID so what are we doing now well we're entering information into these form fields which in turn is updating the state to match whatever we enter so now these properties on the state are going to be up to date with whatever we enter or select in the form then when we click that we're calling this dot props to add book mutation which is going to pass these variables to the mutation the name variable the genre variable and the author ID variable and we're saying those values equal to whatever the state of those values is equal to at that time right so if we save this now we can head back to queries and we can see that we're now getting the name genre and author ID as a variables which we're passing into this mutation and by the way you can name this mutation if you want up here like ad book you can do if you like that's going to make no difference I'm not going to name it for now I'm just gonna leave it like this and save it now I'm gonna make sure that we have no errors in the consoles no we don't alright and go to the front-end and refresh so now if I try to add a new book we'll call this one hogfather genre fantasy and select the author that is terry pratchett if i press + now then nothing seems to happen on the front end yet but if we open up m lab we should be able to see that that book has now been added scroll right to the bottom and we can see hogfather fantasy and this is the author ID so when we've made that query now we've successfully grabbed those variables when we've called the mutation and we've inserted those into the add book mutation so now this is our work in the form is hooked up right it's working because we're now successfully adding that data to the database but it doesn't appear here yet only if we refresh is it gonna appear here so we can see hogfather now is there because we're receiving that from the database however when we first added it here it didn't automatically appear here and what we'd like to do is for that kind of sync to occur so that when we add some things in the database this updates as well all right so we're going to have to take a look at how we do that in the very next tutorial