Gatsby Tutorial #10 - Static Queries (useStaticQuery)

Key Takeaways

all right then gang so we've seen how to make a query inside a page this is a page query we export this query at the bottom then we can use that data in our component but how do we then also make a query inside a component that is not a page we can't do it the same way if we tried this kind of thing inside one of these components it would not work instead what we have to do is use something called a static query and that's a bit different from a page query first i'm going to show you how to do it so what i'd like to do is make a query inside the nav bar over here now what i'm going to do is import a hawk in order to make this query and that comes from gatsby so let me import a couple of things first of all i'm going to import graphql because we also need to import that we're going to still make a query using graphql but also a hook called use static query like so and this is the hook we use to make a query inside the component this time we don't do it outside the component we do it inside the component so the way we do this is by saying const and then data is equal to use static query and then inside here we say graphql like so and then we do our template string again the backticks and then we just pass in our query as normal so what i'm going to do is grab this query over here because it's going to be almost identical i'm going to cut that and i'm going to paste it over here so i'm going to still call it site info and this time i don't want the description i just want the title so let me get rid of the description right there so what i'm going to do now is use this data inside this component because this returns the data right here before i do that i want to destructure the title from the data so i'm going to say const and then title and that is equal to data which is this thing right here then we need to go on to the site property which is this so dot site then the site metadata so dot site meta data like so so we're grabbing the title from that and then we can use the title inside this component and i'm going to do that right here instead of web warrior so it's not hard coded anymore and the title is now dictated by gatsby config over here it is the same in this case but we can change it to something different if we wanted to so i'm going to now save this file over here and i'm also going to go back to the index file and i'm going to get rid of this page query because i'm not going to use that anymore and i can get rid of this where i output it um we don't need this at the top because we're no longer getting that data and we can get rid of it right here we just now have it inside the nav bar over here so if we go over here i do see an error so i'm just going to refresh to see if the error goes away yes it does and now we can see inside the navbar we have web warrior okay so it still outputs it it's just now being driven by that dynamic data and a query that we make right here now i said before that we technically don't need to have this bit inside the query i just want to show you that if i delete this it doesn't matter that it's not here anymore so if i save it and come over here i can refresh it's still going to work exactly the same way now there is a difference between these static queries right here and the page queries at the bottom of page components and that is in page components we can use query variables now we've not seen those yet but you'll see them later and in these queries you can't use query variables so just be aware of that one other thing i also want to mention is that this hook right here sometimes it can be a bit temperamental and throw an error one thing i've noticed is that if i use components that are not capitalized right here this sometimes throws an error and it doesn't really like it so i always make sure these are capitalized so i don't get that error now i'm not done much digging around with this it's just my recent experience using it and finally one more thing you can only use this hook once inside a component so you can't use this hook again down here that won't work so now we know how to make page queries and we also know how to make static queries inside components that are not pages next up we're going to start to look at adding other data sources using our file system