docs: update tutorial to useStaticQuery #13449
Conversation
|
Sorry, I didn't run prettier on this. Will do now. |
sidharthachatterjee
added
the
status: awaiting reviewer response
|
Upon @DSchau's suggestion I've removed reference to |
|
@marcysutton what do you think about this? Generally - I think we've given |
docs/tutorial/part-four/index.md
Outdated
| ) | ||
|
|
||
| return( | ||
| {/* highlight-end */} |
There was a problem hiding this comment.
Maybe move this up a line and then use the comment syntax? e.g.
// highlight-end
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
docs/tutorial/part-four/index.md
Outdated
| </Link> | ||
| {children} | ||
| </div> | ||
| {/* highlight-start */} |
There was a problem hiding this comment.
What's the benefit of this? I think this should be removed (and the closing highlight-end tag too)
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
|
I agree that it's simpler, and this is a good change. I migrated a Create React App to Gatsby the other day and found hooks much easier to use than my earlier Gatsby projects! Thumbs up from me 👍 |
I think it confused matters by explaining quite a techy detail in this tutorial
|
I've made some changes to the syntax highlighting and removed the paragraph explaining the use of This is building correctly and passing tests locally, but I'm still unsure whether I've used the correct highlighting syntax. In this version, I've continued to highlight the opening and closing of |
|
For visual context, this is what the highlight looks after this change: Don't mean to nit pick but I would remove the highlights on the |
sidharthachatterjee
changed the title
|
@sidharthachatterjee sorry for slow response but thanks for helping :) |
Description
A colleague of mine came across this page when learning Gatsby and mentioned that the code looked very messy and a bit hacky.
I introduced him to the useStaticQuery hook which clicked a lot more for him. When I first started learning Gatsby I also found the current code sample using the component inelegant and I wonder how many people drop out of the tutorial at this point because of the perceived code-smell.
I don't know if it's the core team's intention for people to be using useStaticQuery over the original component but if they are, might I suggest we update the tutorial as this pull request suggests? I think it'd be more accessible and also introduces the idea of using hooks in a hopefully easy to understand way into the tutorial which I think is a useful addition.