🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Code mistake in tutorial and alternative solution found by user

10 replies
Last updated: Dec 20, 2021
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

export async function getStaticPaths() {
  const paths = await client.fetch(
    groq`*[_type == "post" && defined(slug.current)][].slug.current`
  )
You need to remove
groq
at this place
export async function getStaticPaths() {
  const paths = await client.fetch(
    `*[_type == "post" && defined(slug.current)][].slug.current`
  )
Cost me a bit of time, so hopefully I could save other beginners this headache if you correct this?
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
Also I’m stucked at chapter 5. The First code example. The Output I am getting is
Missing title
By Missing name 
I tried a lot, but didn’t get it to work…
Dec 19, 2021, 8:06 PM
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.


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 BlogPost
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?
Dec 19, 2021, 8:45 PM
I found another tutorial on dev.to -&gt; 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.


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 BlogPost
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?
Dec 19, 2021, 8:45 PM
Hi Henry. I think line 6 of the code block should be:

const { title = 'Missing title', name = 'Missing name' } = <http://props.post|props.post>
It looks like that’s corrected in the next code block, where
post
is dereferenced and
title
and
name
are 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:

const { title = 'Missing title', name = 'Missing name' } = <http://props.post|props.post>
It looks like that’s corrected in the next code block, where
post
is dereferenced and
title
and
name
are 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
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
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.

Was this answer helpful?