Use PageContext to Display Tags in Gatsby
Gatsby uses PageContext to pass additional information into a React component. In this lesson we will update our Tag page templates to display data.
Instructor: [00:00] Now that we know that our /tags page is being created, we're going to go ahead and create an individual /tags/other that /this URL and make this work, literally make this work. Now, we will do a tags.four each. Each one of these will be from the tag name.
[00:20] Then we need to grab our list of nodes or posts. We'll do posts equals post by tag and tag name. Then, we'll have a similar call to createPage, so we'll createPage and we will pass it the path of...We're going to use a string template, so /tags/ and we will interpolate the tag name.
[00:41] Our component will be single tag index template. Our context will be the posts and the tag name. Similarly to what we did before, we're going to need to edit our single tag index page. We'll come in here and we'll interpolate the pageContext.
[01:00] Now, we will console.log the pageContext, save this. Once again, I'll restart gatsby develop, reload the page. We can see that we have our tag name this matches the URL here. These are the posts that have that tag.
[01:19] Since we know that the tags are making it over from the pageContext, we can go ahead and update our template. The first thing we can do is destructure posts and the tag name from our pageContext. We'll delete our placeholder and we will write hosts about, and we'll interpolate our tag name.
[01:36] Let's add another div here. Let's do a UL. Inside of the UL, we will map over our posts and return an LI. We'll do posts.map. We'll have a post and an index. We will return an LI. We'll add a key that will be our index. We will link. The to prop will be post.frontmatter.path, and it will be post.frontmatter.title.
[02:07] Close out the link. Save this. We have a bulleted list of our posts. Let's give our all tags template a similar treatment. We'll console.log pageContext. We can see that we just have an array of tags, so we will destructure tags from the pageContext.
[02:24] We can delete our placeholder. We will do a UL, and inside, we'll do tags.map. This will have a tag and an index. From here, we will return an LI, where the key is our index. Each item will be a link to tags/ and this will be the tag name. I'll call that tag name to make this a little bit more clear.
[02:51] Then, this will just be the tag name will be the link. Close out the link here. Save the template and we have...Oops! See, got a mistake here. We've got tags/tags, and that's because we're already on the tag page.
[03:04] I don't need the extra tag right there. Let's go back, refresh this. There we go. Posts about that, posts about this, and posts about the other. Let's do that magic styling thing. Much better. Now, back on our home page, let's go ahead and add a link to browse all tags.
[03:24] After we map everything, we'll add another div. Then inside of the div, we'll do a link to /tags, and we'll say, browse by tag. Close the link out, save it. We got to browse by tag link, click it, and we get to /tags.
[03:43] Our links are broken again, because we're missing tags this time. We'll go back to our all tags index, and add a leading slash. Now we're back.
Missing comma in the transcript after singleTagIndexTemplate
createPage({
path: '/tags/${tagName}',
component: singleTagIndexTemplate,
context: {
posts,
tagName
}
})
})
To be able to display the title of a post by
{post.frontmatter.title}, insingleTagIndex.jsshould be added ingatsby-node.jsin graphql query in frontmatter a title.