Skip to content
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

docs: update tutorial to useStaticQuery #13449

Merged
merged 11 commits into from
Apr 25, 2019
+39 −41
Merged

docs: update tutorial to useStaticQuery #13449

Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
729886d
Update index.md
andrewfairlie Apr 18, 2019
d727971
Updated tone to use second-person
andrewfairlie Apr 18, 2019
a10e349
Update with clearer explanation of hooks
andrewfairlie Apr 18, 2019
83a5b88
Update index.md
andrewfairlie Apr 18, 2019
3e1f936
Update wording to be less confusing
andrewfairlie Apr 18, 2019
4c8a6a2
Fix prettier formatting issues
andrewfairlie Apr 18, 2019
6e99093
Remove StaticQuery component reference to simplify
andrewfairlie Apr 18, 2019
47bf269
Remove text introducing return()
andrewfairlie Apr 19, 2019
da8e27a
Fix highlight syntax errors
andrewfairlie Apr 19, 2019
c48d234
Apply suggestions from code review
sidharthachatterjee Apr 25, 2019
6cb7cda
chore: format
pieh Apr 25, 2019
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
90 changes: 50 additions & 40 deletions docs/tutorial/part-four/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,64 +293,74 @@ Page queries live outside of the component definition -- by convention at the en

[StaticQuery](/docs/static-query/) is a new API introduced in Gatsby v2 that allows non-page components (like our `layout.js` component), to retrieve data via GraphQL queries.

sidharthachatterjee marked this conversation as resolved.
Show resolved Hide resolved
Go ahead and add a `<StaticQuery />` to your `src/components/layout.js` file and a `{data.site.siteMetadata.title}` reference that uses this data. When you are done your file looks like this:
There are two ways to use StaticQuery:-
andrewfairlie marked this conversation as resolved.
Show resolved Hide resolved

1. The [StaticQuery component](/docs/static-query/)
2. The newer [useStaticQuery hook](/docs/use-static-query/)

In this tutorial you'll be using the newer hook method which is cleaner and more succinct, but you may wish to learn about the component version too.

You need to include hooks within the body of your function component. To facilitate this you change the `export` line to include `{` rather than `(`. Also, within the function you'll use `return()`. When you use `(` on your export line you're effectively using a shortcut to writing `return(` each time. But because you now need to run the hook before you return the component you will need to define it.

Go ahead and make some changes to your `src/components/layout.js` file to run a `useStaticQuery` hook and a `{data.site.siteMetadata.title}` reference that uses this data. When you are done your file looks like this:

```jsx:title=src/components/layout.js
import React from "react"
import { css } from "@emotion/core"
// highlight-next-line
import { StaticQuery, Link, graphql } from "gatsby"
import { useStaticQuery, Link, graphql } from "gatsby"

import { rhythm } from "../utils/typography"

export default ({ children }) => (
{/* highlight-start */}
<StaticQuery
query={graphql`
{/* highlight-start */}
andrewfairlie marked this conversation as resolved.
Show resolved Hide resolved
export default ({ children }) => {
const data = useStaticQuery(
sidharthachatterjee marked this conversation as resolved.
Show resolved Hide resolved
graphql`
query {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
{/* highlight-end */}
<div
css={css`
margin: 0 auto;
max-width: 700px;
padding: ${rhythm(2)};
padding-top: ${rhythm(1.5)};
`}
>
<Link to={`/`}>
<h3
css={css`
margin-bottom: ${rhythm(2)};
display: inline-block;
font-style: normal;
`}
>
{data.site.siteMetadata.title}{/* highlight-line */}
</h3>
</Link>
<Link
to={`/about/`}
`
)
sidharthachatterjee marked this conversation as resolved.
Show resolved Hide resolved

return(
{/* highlight-end */}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe move this up a line and then use the comment syntax? e.g.

// highlight-end

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By having it on this line I was trying to highlight the introduction of return( which would be a new addition to a user following the tutorial

Copy link
Contributor Author

@andrewfairlie andrewfairlie Apr 19, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the latest version I kept the return statement in for the reasons in my previous comment, but I have adjusted it to t he comment syntax and seems to work. Could you clarify if that's correct though?

Builds and passes tests correctly locally so assuming it's a-ok.

<div
css={css`
margin: 0 auto;
max-width: 700px;
padding: ${rhythm(2)};
padding-top: ${rhythm(1.5)};
`}
>
<Link to={`/`}>
<h3
css={css`
float: right;
margin-bottom: ${rhythm(2)};
display: inline-block;
font-style: normal;
`}
>
About
</Link>
{children}
</div>
{/* highlight-start */}
)}
/>
{/* highlight-end */}
)
{data.site.siteMetadata.title}{/* highlight-line */}
</h3>
</Link>
<Link
to={`/about/`}
css={css`
float: right;
`}
>
About
</Link>
{children}
</div>
{/* highlight-start */}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the benefit of this? I think this should be removed (and the closing highlight-end tag too)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it shows the closing parenthesis from the return statement, which makes sense to me. I don't think the closing curly bracket needs to be in there, though.

Copy link
Contributor Author

@andrewfairlie andrewfairlie Apr 19, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because both are a change to what the user had so far in the tutorial I thought highlighting both would be valuable.

I worry that some readers might focus just on the highlighted changes and if we don’t highlight this change it’ll be a cause for confusion.

Thoughts?

)
}
{/* highlight-end */}
```

Another success! 🎉
Expand Down