GraphQL Tutorial #33 - Re-fetching Queries

alright then so we've hooked up now this farm so that when we add a new book then it's gonna add it to the database in M lab but when we add a new book it's not automatically updating here so for example if I add a new book called thawed genre fantasy and select author Terry Pratchett all these books of fantasy by the way except for one I think which is sci-fi anyway if we add it now then yeah it's gonna send that mutation to the server and that's going to add a new record to the database but it's not updating here right so we want that to occur so let's have a look in ml of first of all and refresh over here to see if that record has indeed been added yes it has third fantasy and the author ID is right there but it's not appearing here until we refresh the page now that in my eyes is not great so we need to figure out a way to refetch this query so rerun the query to update the list when we've added this book when we've made that mutation so let's have a look at the code because there is an easy way we can do this so if we open up the clients folder and then go into components and then it's book list this is the component that's rendering those books and the query that we're using is the get books query that is what is retrieving all of those books the list of books right so what we really want to do when we add a book is rerun that query we want to go out and get those books again so that the component will rerender with the added book makes sense right now there is an easy way we can do this if we go to add bulk when we add a book here by using this mutation what we can do is tell graphically well now or Apollo to go and refetch a particular query so we can do this by adding on a comma after variables right here and then same refetch queries right and this is going to be an array of different queries that we want to research so each item is going to be an object and it's going to have a query property now we need to say which query we want to research after this ad book mutation has fired now the query we want to refract refetch is going to be this get books query so let's copy that and paste it right in here but this is not going to work just yet because we've not imported this into this file so if we try to run this file now it's not going to know what this thing is so let's import it up at the top it's from the same place as the other queries right here so we'll paste it right in there so now hopefully when we make a mutation it's going to research this query right here and then therefore have more data in the props of this component and therefore re-render the component with that new data but let's give this a whirl in the browser just to make sure all right I'm going to refresh first of all then for the book name I'm gonna say the long universe I think that's a sequel to this but I'm not sure the genre is going to be sci-fi makes a change and the author is gonna be Terry Pratchett again alright so if I press add now then fingers crossed hopefully we'll see something appear here so yep we do awesome now it's appearing here because what we're doing is after we run this mutation is we're saying okay now refetch the query that is responsible for this component refetch that data it reflexes the data figured out it's got more data available to it on the props and it rear Enders that component so we now see the new book here at the bottom awesome so we've taken another step forward here in the next video we're going to take this one step further and we're going to create a book details component which appears when you click on one of these different books it's going to show you details over that particular book