Skip to content
Get help on SlackWatch Sanity demo

Issue with fetching data in Next.js using getServerSideProps

18 replies
Last updated: Jan 7, 2022
I have a question about fetching data for next.js, Im using getServerSideProps
export const getServerSideProps = async function (context) {

  const data = await client.fetch(
    `
    *[_type == "page" && _id == "frontpage"] {
      _id,
      pageDescription,
      pageTitle,
      pageBuilder,
      mainImage
    }
    `
  )

  return {
    props: { data },
  }
}
and then passing it into my page

export default function Home({ data }) {
  console.log(data)

  return(
    <h1>{data.pageTitle}</h1>
  )
}
when I console log the data I’m seeing the data I expect but when I use it in my page nothing shows up. If I console log just the 
data.pageTitle
it returns undefined . Any idea why my 
data.pageTitle
is undefined?
console.log(data)
[
  {
    _id: 'frontpage',
    mainImage: { _type: 'image', asset: [Object] },
    pageBuilder: [ [Object], [Object], [Object], [Object] ],
    pageDescription: [ [Object] ],
    pageTitle: 'Frontpage'
  }
]
Jan 7, 2022, 1:30 PM
You’re currently fetching an array, of 1 item. If you only expect to be fetching 1 page at a time, I would definitely recommend refactoring the query into the following:

*[_type == "page" && _id == "frontpage"][0] {...}
The 
[0]
indicates, that you want to retrieve the first item within the array.
You can read more about this, in the following section:

https://www.sanity.io/docs/query-cheat-sheet#170b92d4caa2
Jan 7, 2022, 1:33 PM
for this instance I do only want to fetch data from the page with the _id of frontpage, is there a better way to do this?
Jan 7, 2022, 1:35 PM
Then you’re doing it the right way, if you just add the 
[0]
to the query
Jan 7, 2022, 1:36 PM
Great thanks for the help
Jan 7, 2022, 1:37 PM
hmm seems like now its not recognizing pageTitle at all
Jan 7, 2022, 1:39 PM
ReferenceError: pageTitle is not defined
  16 |       <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
  17 |         <h1 className="text-6xl font-bold">
> 18 |           {pageTitle}
     |           ^
  19 |         </h1>
  20 | 
  21 |         <p className="mt-3 text-2xl">
Jan 7, 2022, 1:39 PM
Can you try logging the data, that you parse to your props?
Jan 7, 2022, 1:39 PM
{
  _id: 'frontpage',
  mainImage: {
    _type: 'image',
    asset: {
      _ref: 'image-b85cee75c4f5940699368a39e3ba3d4eb9d236b4-2678x3349-jpg',
      _type: 'reference'
    }
  },
  pageBuilder: [
    {
      _key: '5f3774a9f249',
      _type: 'hero',
      heading: "Brian and Kates' Bakery",
      image: [Object],
      tagline: 'Fresh baked goods everyday'
    },
    {
      _key: 'ad2c5ddfc4fa',
      _type: 'callToAction',
      linkText: 'Order Now',
      url: '<https://google.com/>'
    },
    { _key: '1e1a091c36fa', _type: 'gallery', images: [Array] },
    {
      _key: '9095e53a3bc7',
      _type: 'paragraph',
      copy: 'This is paragraph text'
    }
  ],
  pageDescription: [
    {
      _key: '4521deeccf43',
      _type: 'block',
      children: [Array],
      markDefs: [],
      style: 'normal'
    }
  ],
  pageTitle: 'Frontpage'
}
Jan 7, 2022, 1:43 PM
the logged data
Jan 7, 2022, 1:43 PM
Are you destructuring the data object that you parse the props, to get 
pageTitle
- else you would have to use the 
data.pageTitle
Jan 7, 2022, 1:44 PM
I’ve done it both ways and both are returning pageTitle as undefined
Jan 7, 2022, 1:46 PM
even though the log shows it properly
Jan 7, 2022, 1:46 PM
Can you send over your getServerSideProps function again?
Jan 7, 2022, 1:47 PM
export const getServerSideProps = async function (context) {

  const data = await client.fetch(`
*[_type == "page" &amp;&amp; _id == "frontpage"][0] {
    _id,
    pageDescription,
    pageTitle,
    pageBuilder,
    mainImage
}
`)

  return {
    props: { data },
  }
}
Jan 7, 2022, 1:50 PM
And how does your Home component look?
Jan 7, 2022, 1:51 PM
I dont know what I did other than restart the terminal but now it works
Jan 7, 2022, 1:52 PM
lol thanks for all the help
Jan 7, 2022, 1:52 PM
Sometimes all it takes, is just a restart apparently haha - no worries
Jan 7, 2022, 1:53 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in