Why isn't getStaticPaths working with groq and sanity

Question

i am trying to make this work and it just won't -- Dev hell...

I am trying to use next js and sanity io together and i am having no luck.

If anyone can point me in the right direction i will be so happy.

I have tried many different ways in subject to the errors i am getting


import {groq} from 'next-sanity'
import {getClient} from '../lib/sanity.server'




export const getStaticPaths = async () => {

  const query =  groq`
  *[_type == "page"]{
    _id,
    title,
    slug
    
  }
  
  
  
  `;

  const pages = await getClient().fetch(query)

  const paths = pages.map(page => {

    return{
      params: { slug: page.slug.current}
    }
  })

  return{
    paths,
    fallback: false
  }



}

export const getStaticProps = async (context) => {

  const slug = context.params.slug
const queryTwo =  groq`
  *[_type == "page" && slug.current == ${slug}}]{
    _id,
    title,
    slug
    
  }
  
  `;

  const data = await getClient().fetch(queryTwo)




  return{
    props: {page: data }
  }



}

export default function pageTemplate({page}) {


return(
    <h1>{page.title}</h1>
   


)


}

as you can see by my code i am not an expert but i have never had an issue like this before.

The errors i am getting are

ClientError: expected ']' following expression

This error happened while generating the page. Any console logs will be displayed in the terminal window

The fix for this is below, i finally figured it out


import {groq} from 'next-sanity'
import {getClient} from '../lib/sanity.server'




export const getStaticPaths = async () => {

  const query =  groq`*[_type == "page"]`;

  const pages = await getClient().fetch(query)

  // const paths = pages.map(page => {

  //   return{
  //     params: { slug: page.slug.current}
  //   }
  // })

  const paths = Object.keys(pages).map((key) => {
    const page = pages[key]

    return{
      params: {slug: page.slug.current}
    }
  })

  return{
    paths,
    fallback: false
  }



}

export const getStaticProps = async (context) => {

  const {slug = ''} = context.params
const queryTwo =  groq`
  *[_type == "page" && slug.current == ${slug}}{
    _id,
    title,
    slug
    
  }
  
  `;

  const data = await getClient().fetch(`
  *[_type == "page" && slug.current == $slug][0]
`, { slug })




  return{
    props: {page: data }
  }



}

export default function pageTemplate({page}) {


return(
    <h1>{page.title}</h1>
   


)


}

Hi Tom. You mentioned you're getting errors; would you be able to post them? — Geoff Ball, Mar 31 '22 at 19:17
There's a case where `slug` doesn't exist, so it errors when reading `slug.current`. You could try [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) in your return from `getStaticPaths()`. — Geoff Ball, Mar 31 '22 at 20:00
Hey thanks Geoff, i've just updated my code because i wasn't using the get client properly please see the updated code and error — Tjs90, Mar 31 '22 at 20:03
Looks like your queryTwo has a second } rather than a ] to close the filter. — Geoff Ball, Mar 31 '22 at 20:31
I've fixed it now geoff, please see the code to see the fix, the issue was with the groq query. Thanks for all your help buddy. — Tjs90, Mar 31 '22 at 20:40
@Tjs90 Please add the solution that worked for you as a direct answer to your own question. — juliomalves, Apr 02 '22 at 13:24

score 2 · Answer 1 · answered Apr 20 '22 at 18:06

Hi guy's just want to post my answer for you!

After hours of bashing my head against the wall i finally figured it out.

The code is below, copying and pasting will work :)

import {groq} from 'next-sanity'
import {getClient} from '../lib/sanity.server'




export const getStaticPaths = async () => {

  const query =  groq`*[_type == "page"]`;

  const pages = await getClient().fetch(query)

  // const paths = pages.map(page => {

  //   return{
  //     params: { slug: page.slug.current}
  //   }
  // })

  const paths = Object.keys(pages).map((key) => {
    const page = pages[key]

    return{
      params: {slug: page.slug.current}
    }
  })

  return{
    paths,
    fallback: false
  }



}

export const getStaticProps = async (context) => {

  const {slug = ''} = context.params
const queryTwo =  groq`
  *[_type == "page" && slug.current == ${slug}}{
    _id,
    title,
    slug
    
  }
  
  `;

  const data = await getClient().fetch(`
  *[_type == "page" && slug.current == $slug][0]
`, { slug })




  return{
    props: {page: data }
  }



}

export default function pageTemplate({page}) {


return(
    <h1>{page.title}</h1>
   


)


}

Why isn't getStaticPaths working with groq and sanity

1 Answers1