Adding & Querying Site Metadata

[00:00:00]
>> Right now, when we look at our code we can see that we're not getting a whole lot of useful information. We close some of these out so that we can actually see the whole, we're just getting like local host 8000, right? It's not a useful title, it's not interesting, people don't know what page they're looking at or what it's for.

[00:00:21]
And when we go to the about page, same thing, it just says the URL, nothing useful is here. So let's fix that, let's add site metadata. Gatsby has a concept of what it calls a Gatsbyconfig.js So for some global things and some general configuration. We'll get more into how we use this later, Gatsby has a node file called Gatsby config and it just exports an object.

[00:00:52]
So in its most simplistic state, this is a valid Gatsby config, it does nothing, but it won't fail, what we wanna do is add some metadata. So we're gonna create an object called Site Metadata and inside of it, we're gonna add a few things about our site. So we don't have this deployed yet, so we'll just put a placeholder in here.

[00:01:16]
And say, we are gonna put it at yourdomain.tilde and then, we also wanna give it a title. So site title and we'll call this frontendmastersintrotogatsby. Wanna give it a description and our description will be Frontend Masters Intro to Gatsby course project. And finally, we're gonna give it an image and the image that I'm gonna use is from cloudinary.

[00:01:50]
I just created one and stored it because we need it to be web accessible for it to work for like social media sharing. So I will show this to you in case anybody wants to screenshot this and do it. So this is the image that we're using, you can use any image you want, this is just a standard social sharing image.

[00:02:11]
But what this is doing is it's taking advantage of cloudinary, which is a cool way to host images, I'm using their free tier. And that way I don't have to keep images on my local machine or figure out how to get them published or anything like that.
>> How does Gatsby handle trailing slashes with like links Is there a config option.

[00:02:31]
>> There is a config for Gatsby trailing links or trailing slashes and I believe the way that it works. It depends on your server is kinda the end of it ut there are plugins to go either way. So you can either force trailing slashes or you can remove trailing slashes.

[00:02:55]
When you deploy this though, you'll wanna be mindful of how your host treats trailing slashes as well. Because, a lot of hosts, will have their own opinions, so for example, Netlify, will do trailing slashes in a certain way. So if you have a Gatsby config that does one thing, and then the Netlify config does another thing.

[00:03:14]
You can end up with unnecessary redirects and that can slow down your site, so whatever you do. You can just just make sure that it matches all the way through with whatever service you're using for deployment. By default though, what I recommend is just setting a rel canonical because then it doesn't matter.

[00:03:34]
If you set a rel canonical, then your site will always just have the right URL. And if there's a duplicate, SEO doesn't care because the canonical set one of them as the official URL and we'll look at how to do that. So now, what we're gonna do we so we've set this this site metadata, right?

[00:03:57]
So here's our site metadata and we are able to now use this or at least we should be able to use this. So let's see how Gatsby makes that work, so what I'm gonna do is go into My terminal. Now, we just changed the config of the site, we added a Gatsby config.

[00:04:23]
This is one of the times when it makes sense to stop and start the development server again. Because sometimes it'll pick it up but a lot of times I found it picks up some of it and then, starts throwing weird errors. So it's easier to just restart it, when in doubt restart and so our site here is running the same, nothing has changed.

[00:04:44]
But if we look at GraphQL, so this is actually where we'll start digging into GraphQL a little bit. We have the ability to query that site metadata. So what I just did is, I went to visit local host 8000 slash underscore, underscore, underscore GraphQL. So it's triple underscore GraphQL, this is a it's linked from your terminal.

[00:05:06]
So you'll see this here, this is a link to the use the GraphQL Explorer. And what this is, this is a window into all the data in the Gatsby site during development. And this is where GraphQL gets kinda weird in Gatsby, Gatsby treats GraphQL as a temporary data store for building the site.

[00:05:32]
You cannot access the GraphQL API from Gatsby in the production site, so you can't make a request. From the client side to the GraphQL because it won't be there, it's only available during the build. And that's where GraphQL on Gatsby feels very different from the way that other sites work.

[00:05:52]
So during development, we've got access to this GraphQL explorer In production, there is no GraphQL anymore. It's all been compiled away and replaced with these JSON data files, that I showed you. So, let's start by getting our metadata, so I'm gonna open up the site and this explorer over here is going to be your best friend.

[00:06:12]
I love this Explorer, it's very, very powerful. So over here, we've got site and then, this is kinda hard to see so let me zoom in a little bit. There are purple things and there are blue things, the contrast here is not great. The purple things are filters, we don't care about those for this, the blue things are our data.

[00:06:31]
So I'm going to click site metadata here and then, we've got our title, description, the image and our site URL. And if I hit this play button, we can see all that data that we put into the Gatsby config, is now available for us, we can use it.

[00:06:48]
This is where Gatsby opinion start to show up everything in Gatsby ends up in the GraphQL layer. For example, if we go in here and we look at files, I can get a list of all the files in our site. Which apparently is not finding any that doesn't sound, right?

[00:07:14]
I haven't yeah, we haven't configured that yet, so the site page is what I was thinking of. So let's look at our site pages and I can go to path and it's got a list of all the pages. So we can see it like it generated a Dev 404 page for us, that if we go over here and look at, this is a listing of all the pages on the site.

[00:07:33]
This is only available during development, so if we try to go to a URL that doesn't exist, it'll show us. Hey, you you haven't created this page yet, here's how you can create it. And here are the pages in the site in case you wanna navigate to those.

[00:07:47]
This is a really good way if we had created a bunch of pages from data. And we don't wanna go build the directory listing of them yet, you can just 404. And you'll get a list of all the pages you've created here, so that can make navigation easy.

[00:08:05]
So now, that we've got the ability to get this site data, right? We're able to load our site metadata, we can then start using it, so let's get this data and actually set the title of our site. So I'm going to go back into the code here and I'm gonna go into our index page.

[00:08:30]
And we're going to use GraphQL in Gatsby now, so I'm gonna use something called a static query. Now, when you are thinking about data in Gatsby, I would say default to the simplest possible solution. The use static query hook in Gatsby, is most likely the simplest solution. Any other way that you're gonna do, it is gonna require a little bit of understanding how data flows through Gatsby.

[00:08:57]
So if you don't need variables, if what you're querying for use, static query is going to allow you to write a GraphQL query. And use the result right in place, with no understanding of how data flows through Gatsby. And that's why I'm a fan of this approach. So what we can do then, is now that we've got access to this, I'm going to get some data.

[00:09:17]
And that'll be the result of use static query and that uses a tagged template. So a template literal is anything between these little back ticks and a tag is kinda function but not exactly a function. And I'm not gonna go into exactly how they work but it's a common way of dealing with GraphQL queries.

[00:09:40]
You'll see this a lot, where you'll use a tag template literal like this. And then once we've got this set up inside, I'm just literally gonna copy paste this and I want it to have a unique name. So instead of calling it my query, I'm gonna call it get site title.

[00:10:00]
And I don't need the description image and site URL for what we're about to do, so I'm gonna only use the title. This is another benefit of GraphQL is that if you don't need something, just don't query for it and you'll get less data. So no wasted data and this is a big deal in Gatsby because remember what Gatsby is doing is it's attaching this data to your site.

[00:10:24]
So if you query for a bunch of data you're not using, you're going to ship that to your users in the form of that JSON file. So only query for what you're actually going to use, that's a little little perf tip. So now, that we've got this, it's gonna be in our data and I want to get the title out, so I'm gonna get the title.

[00:10:45]
And that will be actual let's call it meta cuz we're getting the site metadata. And that site metadata is going to be the data which should always be set but just in case we don't want error. So, I'm gonna use the optional chaining operator, which if data is not set, just returns empty.

[00:11:02]
So instead of getting a big exploding unset can't get field whatever of undefined. We'll just get an empty string, which for this particular thing, I'm okay with that I don't mind. Inside the data we just move in this like it's an object, so we can get the site optional chain that and then, we get the site metadata.

[00:11:22]
Optional chain that or no, we want optional chain that but we will do some knowledge coalescing. If it is empty, we're just gonna give back an empty object. And that's because what we're gonna do down here, is we're gonna set a header that uses the title. So let me just repeat this because I feel like this is one of those things that when you're new to GraphQL, it's really confusing.

[00:11:44]
And then, when it clicks, it feels very natural. So the way that GraphQL queries work, is when you make a query, the result of the query ends up in data. Inside of data, you have an object that just represents the shape of this query. So data.site.sitemetadata.title will give you the value of the title.

[00:12:09]
The only differences is if this is an array, if we were looking at posts, posts would be an array. And so it wouldn't be able to do like post dot title. You'd have to do posts, array index zero or get the first post and then post dot title, which we'll get into a little.

[00:12:26]
So now that we've got that site metadata, this we can use as metadata title, so I wanna add a header. So I'm gonna use a GraphQL fragment or a react fragment because I don't want to deal with junk. I don't wanna add junk mark up to my site, so I'm gonna create a header.

[00:12:45]
And in my header I'm going to link to our homepage and then, I'm gonna use metadata title as the text of that link, right? So now, we have a header that will show our site and let's go look and see if this worked or if I need to restart the site.

[00:13:08]
There it is, Front End masters intro to Gatsby and if I come in here and make an edit. It shows up right away, no needing to restart the server or anything like that. Once the config is in, we can edit it as needed and everybody's happy, so this is where we start to see some real power with this.

[00:13:36]
Is we're able to really get these meta tags in and editable and usable through GraphQL.