Get help on Discord

Remove `groq` from `client.fetch()` in Next.js tutorial Chapter 4

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?
AI Update

Thank you for reporting this! You're absolutely right, and I appreciate you taking the time to help improve the tutorial for other developers.

The issue you've identified is actually about how the groq package is being used. Looking at the tutorial, there's an inconsistency in Chapter 4's code example.

What's happening:

In the code example you mentioned, groq is being used as a template literal tag (like groq`query here`), but the groq package isn't imported at the top of that particular code snippet. This causes an error because groq is undefined.

The fix (as you discovered):

You have two options:

  1. Remove the groq tag and just use a plain template literal string (which is what you did):

    const paths = await client.fetch(
  `*[_type == "post" && defined(slug.current)][].slug.current`
)

  2. Or import groq at the top of the file (which the tutorial does later in the same chapter):

    import groq from 'groq'

The tutorial actually introduces the groq import later when dealing with categories, which is why the earlier example doesn't work as written. The groq package from npm is useful for syntax highlighting in supported editors, but it's not strictly necessary for the query to work—it's essentially a pass-through function that returns the string unchanged.

This is definitely worth correcting in the tutorial. You can report issues like this directly on the Sanity documentation GitHub repository or reach out through the Sanity Community Slack where the documentation team is active and responsive to feedback.

Thanks again for helping make the learning experience smoother for beginners! These kinds of reports are invaluable for keeping the documentation accurate and beginner-friendly.

Show original thread
10 replies
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)?
Thanks for reporting this, Henry! Updated to fix this.
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…
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?
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?
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.
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.
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! 😄
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! 😄
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.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?