GraphQL Tutorial #29 - External Query File

Key Takeaways

alright then so in the last video we created this form component right here and we output the authors in the select box you'll notice now I've doing those other random ones that were appearing from M lab so it's just Patrick Rothfuss Brandon Sanderson and terry pratchett now so we have this component kind of visually sorted but obviously at the minute if we type in stuff here and go to add it's not gonna do anything it's just kind of reloading the page right so we need to hook up that kind of functionality eventually to add the data but before we do that I just want to talk about one little thing kind of take a sidestep if you will and that is how we can just externalize our queries so yeah at the minute we're defining our queries right here inside the component files and we do it in add book and also book list but sometimes we might have multiple queries in different components and it might get a bit messy inside these components so what I like to do is sometimes externalize my queries into a separate file so I'm going to show you how we can do that in this tutorial so let's go into source and create a new folder first of all and I'll call this folder queries and inside that folder let's create a new file and call this queries ojs ok so now we have queries GS and remember when we're making kind of queries we need to use that gql from apollo boost so i'm gonna paste this up here this is what we've been using here remember to make these queries right so we're gonna need that in this file because we're going to be constructing those queries here and all we're gonna do is copy from here in fact we'll cut because we don't want it in this file anymore and we'll paste it in query so that was book list and also we'll go to this file where we made this query cut it from there and we'll paste this here as well all right so we still have those queries here we're making them in this separate file and now we need to export them so we'll say export and about exporting multiple things so let's do it in an object we'll say we're export get author query and also get books query and author is plural its authors because we're getting all of them so what exporting both of those things from this file now so since we're exporting them we can access them in the other files so over here in book list we want to get books query so we can now import that by saying import get box query from and it's going to be from out of the components directory so we need to jump out of that by saying double dot forward slash then we need to go into the queries folder and then we say forward slash queries again okay because that's the name of the file query structures so we're importing this get books query from that file so we should still be able to use it just the same as we did before down here should have no kind of difference to doing it this way we can't now get rid of this because we don't need gql in this file we've already imported it right here where we do use it okay so let's save that I'm going to copy this and I'm going to go to add book over here again we can get rid of this gql and below this will import this time get authors query from the same place double dot forward slash to jump out of the components directory then into the queries folder then the queries file alright so again we are importing this so therefore we can use it just the same way down here all right so let's save this now and make sure everything still works on the front end we can see all of those but let's refresh just in case no errors over here we can see all of the books there and we can see all of the authors right here and again let's make sure we have no errors in the consoles as well no we don't awesome so that was just a quick sidestep to show you how we can kind of meeting up our component files so we don't have to keep writing our queries in the components themselves you can do if you want I just like to externalize them keep them in a queries file and then we can require or import them when we need them