This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Getting Post Data by Slug" Lesson
[00:00:00]
>> Jason Lengstorf: To get that data in, we need to look at this context. So the context that we sent, so far it's not being used for anything. But what it does is it gives us the ability to get into, let me close some things that we're not using anymore.
[00:00:14] It lets us get into the into the component. We have page context. And so if I take this, let's just do another trustee logger.
>> Jason Lengstorf: And I'll set page context.
>> Jason Lengstorf: You can see that the slug comes through. And so now I can use that in my data.
[00:00:42] And anything that I want to configure in here, I can pass it through. So theoretically, I could just put the title and the body and the whole post into context and use it. And you are welcome to do that. The catch comes in where it gets a little unwieldy over time, especially as the data gets more complex, as you have links between different types of data, you want to load multiple things.
[00:01:07] So instead, what I recommend is what we're gonna do here, which is we're gonna export a GraphQL query. And this is going to be what loads our data. So now one thing that we haven't done yet is we haven't figured out how to do variables in GraphQL. So let's go back out and look here at what this might look like.
[00:01:31] If I wanted to get just one MDX file, how might I do that? Well, it turns out if I open this, I can get to the MDX type. And we've got all of these queries that we can make, so that's pretty exciting. So what if I were to do something like this?
[00:01:53] I can say I want the,
>> Jason Lengstorf: Slug, so frontmatter: { slug: { eq: "hello world". All right, and so what I just threw at you is a little wild looking. Basically, we have filtering set up where you can say using the data in this thing, so the MDX nodes have a frontmatter field.
[00:02:28] So I wanna use that frontmatter field for querying. Inside of frontmatter, we have a slug field, so I wanna use that for querying. And then here we can choose whether we want it to be equal, or other options include, ne, in, nin, regex, or globs. And so by setting this up, I am now able to say I want, let's just grab the frontmatter and the title.
[00:02:56] And okay, that cleans it up a little bit. So now I'm able to select a single thing. And that's what we want. Because if I change this out to another post, we're gonna get different data. So that's what we're after. We want the ability to kinda pull up the specific post that we're gonna use.
[00:03:16] So that means that I need to be able to get a variable in here because this post, if I just hard code hello world in here, that doesn't help. So instead, we need to get the value of this pageContext.slug. So anything that that Gatsby provides as context is not only available in the page context, but also as a GraphQL variable.
[00:03:41] So the way the GraphQL variables work is we can do something like this. And we can define the variable and say this variable is going to be called slug. It is a string. And this exclamation point means that it's required. So down here this is just a nice little feature.
[00:03:58] I can type out that it's a slug, and then I can just add whatever slug I want down here. And then I just use it in the place that I want to use it. Okay, we're getting what we want. Go "hello world".
>> Jason Lengstorf: Okay, and if I send it something that doesn't work, it just returns not so perfect.
[00:04:24] We're not gonna get errors. We'll just have an empty page because we sent it junk. But that's on us to not send junk. So with Gatsby we can just do this straight up because what'll happen is because we passed in slug as context, Gatsby is going to set a GraphQL variable called slug.
[00:04:42] So that's available for us to use. And we can then grab out whatever we need. And the thing that we want is going to be the title, the author. And then, because we're using MDX, we're going to get into the code and the body, and so the body is a little funky to look at.
[00:05:02] Well, let me make this an actual thing.
>> Jason Lengstorf: So this is what MDX does under the hood. You do not now nor will you ever need to care what this looks like or what this actually says. What it's effectively doing is taking the markdown and the JSX and kinda turning it into executable code that MDX knows how to show on screen.
[00:05:27] Again, this is us trying to get all that boilerplate out of the way so that you don't have to think about it, you just get to use it. So once we have that code, we can't just drop that on the page, it's not going to work. So instead, we need to use something called the MDX renderer.
[00:05:43] So I'm going to import the { MDXRenderer }from 'gatsby-mdx'. And then down here, we can start to actually use this data. Because anything that we query is going to become available as data. So let's add that code and body query in here. So I'm just stepping through this real quick.
[00:06:08] The slug is set in the context, so anything that we set there. And I'm realizing now that I did this a different way when I originally set this up. So I'm just gonna use the slug and search the slug that equals the slug. So now that we've set this, in here it's available as a variable.
[00:06:27] And then we're gonna search for the MDX files that have a frontmatter slug that equals whatever the value of this variable is. Inside of that we're gonna get the frontmatter. We want the title and author, and then we want the body of the post as returned by MDX.
[00:06:45] We've imported this MDX renderer which means that down here we've got our data. And so I can instead of using this, I can do MDXRender and I just pass in the,
>> Jason Lengstorf: Well, let's simplify this a little bit. We're gonna destructure a little further. We're gonna destructure to the MDX.
[00:07:06] And I'm going to pull out we're gonna rename mdx: post so that it's clear what we're using. So data is gonna be all of this. MDX is here and then I'm aliasing it to post. That's a trick of destructuring if you haven't seen that before. So up here now, I can do post.frontmatter.title.
[00:07:32] And down here I can say post.code.body. And let's just test that and make sure that works before we go too much further.
>> Jason Lengstorf: Okay, it's not liking it. And it's not liking it because I didn't stop and restart the server after we wrote a query.
>> Jason Lengstorf: I hope I also might have just coded this wrong.
[00:08:01] There we go. Okay, so this is good. We got back our post. We're getting our title. If I go back out here and I click into this one, great, we're getting our title and we're getting our content. So let's clean up the rest of this boilerplate. So we don't need that one anymore.
[00:08:19] And we want this to be the post.frontmatter.author.
>> Jason Lengstorf: Okay, it's starting to look like a blog.