GraphQL Tutorial #14 - GraphQL Lists

alright then so before we begin I just want to point out that I've added three more books into this book array right here so we have the hero of Ages call of magic and the light fantastic IDs of four five six and author IDs of two three three so this one's Brandon Sanderson down here and these two are Terry Pratchett all right so we have at the minute a kind of one-way relationship going on when we request a book we can say we also want the author of that book and then in this resolve function we're going out and finding that author so we're associating an author with a book but at the minute if we try to make a request it looks a bit like this we're saying that we want an author for the route query and then we want the books of that author we can't currently do it and graph across throwing a wobbler right here say any kind of query field books on type author so that's because we've not yet set this to foot so what we really want to do is allow for that because every author is going to have a list of books presumably so when we query an author we want to return these books and to do that we're going to have to register this books field right here so much like we did down here we'll say books and then specify the type of this now what type is this going to be well you might be thinking it's just book type but not really because remember each author has potentially a whole list of books not just one book and this right here implies that least just a single book what we really want to do is tell graph QL that it's going to be a list of book types so how are we going to do that well we need to grab something else from this graph QL package up here so let's do a comment and we want to grab the graph QL list like so so let's now copy that dude because we're going to use it down here so inside author type where we see the books it's gonna be not type book type bought a new graph QL list and inside book type because it's going to be a graphical list of book types all right so that's the type sorted next up we have the resolve function again we're taking the parent and the arcs so remember the reason of function is there for us to go out and grab the data we need so at this point in time when we've made this request we're initially making the query for the author right so we have that data on this parent object remember so we can use that parent to say okay well I know now the ID of this author is one so I'm going to look through the books array and find every book with an earth ID of one and I'm going to return that to you so down here the way we do that is by saying first of all return and then we're going to use underscore again dot and this time use a method called filter and what filter is going to do is filter through a particular array in our case the books array because that's what we're searching for and it's going to look for objects inside that books array which match up to this criteria right here now the criteria is going to be that the author ID property is equal to the parent ID remember the parent is the initial author we've just requested so for example this could be for ID too so we're taking that ID right here and we're looking in the books array for any book which has an author ID equal to two so it'll look up here say okay well this one's got an author ID of two and this one sum of those two can remain inside the array everything else I'm going to filter out of the array okay so eventually we're just returning the array with these two objects inside which is what we want a list of the books by that particular author so now we've done that let's save it and give this a whirl I'm going to go to the front end and open that up oops and if we try to make this request now in fact first of all I'm just going to refresh the page and we can see that squiggly line has gone because now graph QL recognizes that we can nest this book square it inside the author so I'm gonna press play and we can see we get back Brandon Sanderson and we also get the books associated with that author and likewise we don't need to request the name and the genre could just be the name press play and now we get an array of books with just domain property awesome right so let's try this with a different date number one and we just get to one book because there's only one book by Patrick Rothfuss in that array let's change this to three and now we get three books awesome so now we have this kind of two-way relationship going on we've said that each author can have a list of books and each book has a particular author right now there's one more thing I want to show you before we end this tutorial and that is this thing right here because previously I said that we have to wrap the Fields property inside a function so what is the reason behind them well first of all let's just delete that function so that the fields property is just an object like so and we'll do it down here as well and then we'll run this let's see what happens so if I try to now open up this thing and request then it's going to spin for a little bit eventually it will give us an error type error failed to fetch and if I try to refresh the whole screen over here then it's gonna error out as well so obviously something is going wrong and it says right here that book type is not defined so if we go to the code and have a look obviously the code runs from top to bottom right so it comes to author type right here and it sees this book type and it's saying okay well I don't really know what this is because it's not been defined yet we're defining it down here so that's why we're getting an error so you might be thinking well okay why don't we just define book type at both above author so if we take that stuff and paste it right up here then save it and see what happens now if we try to refresh still not gonna work and if we look in the console this time we get a different error or the type is not defined so right here we're running through the code top to bottom it comes across this off the type and it's same well now I don't know what author type is because author type is not defined until down here so it's kind of like catch-22 changing the order of these things is not going to solve the problem which is why we wrap these things inside a function like so because if we wrap the fields inside a function then what we're doing is still running the code from top to bottom but we're not actually executing this function until some point after the whole of the file has run okay so by the time we do execute the code inside the function it knows what author type is because this has already been run previously all right and vice-versa so I hope that makes a little bit more sense as to why we wrap these fields inside a function