Code mistake in tutorial and alternative solution found by user
10 replies
Last updated: Dec 20, 2021
H
I’m just going through this tutorial https://www.sanity.io/blog/build-your-own-blog-with-sanity-and-next-js#c69ec037032f In chapter 4 I found a mistake in the code example.
Instead of
You need to remove
Cost me a bit of time, so hopefully I could save other beginners this headache if you correct this?
Instead of
export async function getStaticPaths() {
const paths = await client.fetch(
groq`*[_type == "post" && defined(slug.current)][].slug.current`
)groqat this place
export async function getStaticPaths() {
const paths = await client.fetch(
`*[_type == "post" && defined(slug.current)][].slug.current`
)Dec 19, 2021, 2:33 PM
Hi Henry. Were you getting an error when you tried the first code? Also, were you using backticks or single quotes (only the former will work)?
Dec 19, 2021, 5:55 PM
Thanks for reporting this, Henry! Updated to fix this.
Dec 19, 2021, 6:00 PM
H
Also I’m stucked at chapter 5. The First code example. The Output I am getting is
I tried a lot, but didn’t get it to work…
Missing title By Missing name
Dec 19, 2021, 8:06 PM
H
I found another tutorial on dev.to -> https://dev.to/sanity-io/tutorial-run-a-sanity-backed-blog-with-react-and-nextjs-1eek
The code here is much smaller and worked for me.
I’m not sure if the code in the Sanity Blog is wrong, but it did not work for me. Maybe someone can have a look on this?
The code here is much smaller and worked for me.
import client from '../client'
const BlogPost = ({ title = 'No title', name = 'No name' }) => (
<div>
<h1>{title}</h1>
<span>By {name}</span>
</div>
)
BlogPost.getInitialProps = async ({ query: { slug } }) => {
const document = await client.fetch('*[_type == "post" && slug.current == $slug][0]{title, "name": author->name}', { slug })
return document
}
export default BlogPostDec 19, 2021, 8:45 PM
H
I found another tutorial on dev.to -> https://dev.to/sanity-io/tutorial-run-a-sanity-backed-blog-with-react-and-nextjs-1eek
The code here is much smaller and worked for me.
I’m not sure if the code in the Sanity Blog is wrong, but it did not work for me. Maybe someone can have a look on this?
The code here is much smaller and worked for me.
import client from '../client'
const BlogPost = ({ title = 'No title', name = 'No name' }) => (
<div>
<h1>{title}</h1>
<span>By {name}</span>
</div>
)
BlogPost.getInitialProps = async ({ query: { slug } }) => {
const document = await client.fetch('*[_type == "post" && slug.current == $slug][0]{title, "name": author->name}', { slug })
return document
}
export default BlogPostDec 19, 2021, 8:45 PM
Hi Henry. I think line 6 of the code block should be:
It looks like that’s corrected in the next code block, where
const { title = 'Missing title', name = 'Missing name' } = <http://props.post|props.post>postis dereferenced and
titleand
nameare dereferenced from
post. I can test this later today and will edit the code block to make the change if that’s the case.
Dec 20, 2021, 5:08 PM
Hi Henry. I think line 6 of the code block should be:
It looks like that’s corrected in the next code block, where
const { title = 'Missing title', name = 'Missing name' } = <http://props.post|props.post>postis dereferenced and
titleand
nameare dereferenced from
post. I can test this later today and will edit the code block to make the change if that’s the case.
Dec 20, 2021, 5:08 PM
H
Hi
user A
it is working now! This small piece was missing. I think I really need to understand the concept better to fully understand it better and to be better in debugging, to solve this on my own! 😄Dec 20, 2021, 7:00 PM
H
Hi
user A
it simple worked! This small piece was missing. I think I really need to understand the concept better to fully understand it better and to be better in debugging, to solve this on my own! 😄Dec 20, 2021, 7:00 PM
That’s great to hear, Henry! I love your spirit and attitude toward debugging, though we’ll still get the guide fixed up. Thanks for reporting back.
Dec 20, 2021, 7:11 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.