CODEWITHSUNDEEP
reactjsnext.jssanity
Tjs90
Tjs90

Reputation: 61

Why isn't getStaticPaths working with groq and sanity

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>
   


)


}

Upvotes: 0

Views: 1085

Answers (1)

Tjs90
Tjs90

Reputation: 61

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>
   


)


}

Upvotes: 2

Related Questions