Skip to content

chore(docs): Add clarification for Pro Tip on Part 4 of tutorial #36918

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 3, 2022
Merged

chore(docs): Add clarification for Pro Tip on Part 4 of tutorial #36918

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ad3d96
Added Note for siteMetadata title in Head export
BreGoNunez Oct 30, 2022
7387ec4
Update index.mdx
LekoArts Nov 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions docs/docs/tutorial/part-4/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -973,16 +973,14 @@ 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 }) => (
<>
<title>{data.site.siteMetadata.title}</title>
</>
)
export const Head = ({ data }) => <title>{data.site.siteMetadata.title}</title>
```

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 `<Seo />` component.

</Announcement>

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:
Expand Down