From 8ad3d9628fd17250e6e34b58c7d7910cf115cf8f Mon Sep 17 00:00:00 2001 From: BreGoNunez <51843681+BreGoNunez@users.noreply.github.com> Date: Sat, 29 Oct 2022 22:06:45 -0600 Subject: [PATCH 1/2] Added Note for siteMetadata title in Head export It may have been just me, but when I was following this part of the tutorial (https://www.gatsbyjs.com/docs/tutorial/part-4/#:~:text=export%20default%20BlogPage-,Pro%20Tip%3A,-The%20Gatsby%20Head). I copied and pasted the code and replaced what I already had in the Head of my blog page, since I was following it sequentially. I faced various errors since the GraphQL query didn't have the data for the metadata; only to realize this was already handled by the Seo components some steps ago. So I wanted to make a note to make it clear that this wasn't necessary since we had the Seo component already. Also, the video tutorial doesn't mention or show this tip so it took me longer to realize my mistake. --- docs/docs/tutorial/part-4/index.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/docs/tutorial/part-4/index.mdx b/docs/docs/tutorial/part-4/index.mdx index d383329e5cadb..2ae781d65af94 100644 --- a/docs/docs/tutorial/part-4/index.mdx +++ b/docs/docs/tutorial/part-4/index.mdx @@ -983,6 +983,8 @@ export const Head = ({ data }) => ( ) ``` +**Note:** In this example, there's no need to retrieve the title again using the `data` prop, as you already have the Seo component handling it for you. So you don't need to copy the code above if you've been following the tutorial. + 4. Now, when you look at your blog page in a web browser, you should see a list with the filenames for each of your posts: From 7387ec458f6b8de4471ff1b8492ff8448b164f92 Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 3 Nov 2022 14:39:40 +0100 Subject: [PATCH 2/2] Update index.mdx --- docs/docs/tutorial/part-4/index.mdx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/docs/docs/tutorial/part-4/index.mdx b/docs/docs/tutorial/part-4/index.mdx index 2ae781d65af94..5f7564c2fd66d 100644 --- a/docs/docs/tutorial/part-4/index.mdx +++ b/docs/docs/tutorial/part-4/index.mdx @@ -973,17 +973,13 @@ export default BlogPage **Pro Tip:** The Gatsby Head API and its `Head` export also receives the `data` prop. This isn't directly obvious when using the component unless your IDE gives autocompletion or hints. If you're unsure how to use an API, head over to the [reference guides](/docs/reference) for instructions. There you'll find guides like [Gatsby Head API](/docs/reference/built-in-components/gatsby-head/). -When accessing `data` in `Head` it is the same data as in your page component: +As an example, let's say you queried the `title` from `siteMetadata` in your page query. You'll then be able to access that through the `data` prop in `Head` (as with page component): ```js -export const Head = ({ data }) => ( - <> - {data.site.siteMetadata.title} - -) +export const Head = ({ data }) => {data.site.siteMetadata.title} ``` -**Note:** In this example, there's no need to retrieve the title again using the `data` prop, as you already have the Seo component handling it for you. So you don't need to copy the code above if you've been following the tutorial. +In [Part 6](/docs/tutorial/part-6/#render-post-contents-in-the-blog-post-page-template) you'll learn how to use this pattern, for now keep using the `` component.