Gatsby Tutorial #9 - Site Metadata & Page Queries

Key Takeaways

all right then so an easy way to test out this graphql layer that gatsby create for us in a more useful way that gives us more useful data is to add some metadata to our website and then gatsby is automatically going to take that metadata and add it to the graphql layer no plugins or anything needed so how do we add this metadata well we do it inside this gatsbitconfig file now we've not seen this yet but all it does is export an object where we can add plug-in information later on and we'll see that later but we can also add some science metadata and the way we do that is by adding another property to this object and that is called site meta data like so now it must be camel case this must be capital and this is going to be equal to an object and we can have different properties and values inside this object so i could do a title and i would call that web warrior and then after that i could do a description and that would be something like web dev portfolio like so and then after that i could do a copyright message and that would be this website is copyright 2021 web warrior now you might not have these exact fields in your metadata i just want to do some different properties so we can work with an example but now let's save this file and what we need to do every time we change the gatsby config file is restart the server so i need to open up the console and i need to cancel let me come to the bottom over here cancel out of this process first of all and then i want to run gatsby develop again we need to do this so that gatsby can re-run through this config file and in our case it's going to add this site metadata to the graphql layer so let's wait for this to finish first of all and then now it's done i'm going to come over to graphical and i'm just going to refresh for now so now we've added that metadata you can look in sites and you can come down to the bottom and we see this new property site metadata that wasn't there before and we can see these three properties as well so i could grab all of those and this is what our query would look like for the site metadata and by the way you'll notice this at the top where it says query and then my query this is a name of the query you can call it whatever you want it doesn't really matter and if you don't include this part in your queries it doesn't really matter but there is an advantage to including this part in your queries and that is to do with query variables and we're going to talk about those later on in the course but generally whenever i make queries from my code over here i'm going to take the whole thing like this so anyway let's test this out i'm going to play this and over here we can see this is the data that we get back so it grabs the data site site metadata and all of these properties with the values so this is how we make a query for that data but then how do we actually make that query from our components well there's a couple of different ways that we can make the queries from our components in this lesson i'm going to show you how to make page queries from our page components and then later on i'll show you how to make queries from other components that are not pages as well the first thing i'll do is copy this query right here so all of this and then i'm going to come over to our home page and we're going to make this query from the home page now the way we do this is by exporting the query at the bottom so we say export const and then we'll call this query and we set it equal to graphql and we need to import this so click on this second one down here and it imports graphql from gatsby so we import that so we can use graphql and this is what we use to make a query now we make our query inside a template string so we place template string directly after graphql and a template string is the backticks found underneath the escape key on most keyboards so inside here we can paste in our query now so it's just query my query which we can call something else i'm going to call it site info since that's what we're going to get site info and then we want the site data the site metadata the copyright description and title now i don't want the copyright i just want the description and title for this example so now how do we actually use this data inside our component well gatsby is going to find this query first of all and then it's going to give us access to a data property inside our component on the props so we automatically take in props right here this props object right but what we could do is just destructure from that object a data property and that is any data that we get back from this thing right here this query so what i'm going to do is just log this to the console so we can see it in the browser so console.log data like so now if i save this and come over here i'm going to open up the dev tools and then i'm going to open up the console i'm going to refresh and hopefully we can see this data object right here now so inside that we can see the site property then we can see the site metadata property then we can see the description and the title so we get access to this object and the object mirrors our query this thing right here all of those properties are on this data object so what i'm going to do is destructure the title and the description from the site metadata object so remember we have to say data then dot site then dot metadata and i'm going to destructure the description and the title from that so what i'll say over here is const and then we want the title destructured and also the description like so and then we can set that equal to data dot site dot site meta data so that's this object then dot site then dot site metadata okay let me just zoom in this so we can see it a bit better all right then so now if i go back over here we have access to these two different things the title and description and we can just output them anywhere in our template all i'm going to do for now is a paragraph tag and we'll output the title inside that and then we'll also output the description like so now ultimately we're not going to do this this is not going to be the final design i'm just showing you here how we can actually make a page query so let me save this and come back over here and it says cannot read property title of undefined and that error is because i've misspelled metadata right here so let me save that now hopefully this should work let me just refresh over here yep that's worked now and we can see right here web warrior web dev portfolio so this is the title and this is the description so that has all worked so that's how we make queries from our pages we export the query at the bottom we use graphql which can be imported from gatsby right here we place our query inside template strings directly after graphql then gatsbit is going to make this query for us to the api and whatever data it gets back we can destructure from the props right here and we can use it inside our components but then how do we actually make queries from other components that are not pages like the layout or the navbar we don't do it this way and i'm going to show you how to do that next