Skip to content
Get help on Slack

Fetching data from multiple documents in NextJS and resolving errors

7 replies
Last updated: Jan 10, 2022
Hi All, I’m trying to fetch data with more than 1 query I found this answer and am referencing that answer. my query looks like this
export const frontPageSettings = `
*[_id in ["frontpage", "siteSettings"]]{
    _id == "frontpage" => {
        _id,
        pageDescription,
        pageTitle,
        pageBuilder,
        mainImage
    },
    _id == "siteSettings" => {
        title,
        description,
        primaryColor,
        secondaryColor,
        keywords
    }
}
`
When I start up the Next app, I’m getting this error 
error - ClientError: expected '}' following object body
Is there a better way to fetch data from more than 1 document with NextJS?
Jan 10, 2022, 9:39 PM
Yep, that did it, thank you!
Jan 10, 2022, 9:51 PM
follow up question to this, when I fetch data like this, it returns a lot of my fields as arrays that just read 
[[object], [object]]
and it seems like it can’t actually read those objects, how would I go about this?
Jan 10, 2022, 9:59 PM
That usually means that you're using a promise-based value that hasn't resolved yet. Did you maybe forget an 
await
somewhere?
Jan 10, 2022, 10:01 PM
I don’t think so, my getServerSideProps has the 
await
in it. For reference this also happened when I was fetching a _type without specifying index 0 or 
[0]
after my type call
Jan 10, 2022, 10:03 PM
export const getServerSideProps = async function (context) {

  const data = await client.fetch(frontPageSettings)

  return {
    props: { data },
  }
}
Jan 10, 2022, 10:05 PM
Here’s my getServerSideProps
export const getServerSideProps = async function (context) {

  const data = await client.fetch(frontPageSettings)

  return {
    props: { data },
  }
}
Here’s my page component

export default function Home({ data }) {
  console.log(data)
  return (
    <></>
  )
}
And this is what my console is logging

[
  {
    _id: 'frontpage',
    mainImage: { _type: 'image', asset: [Object] },
    pageBuilder: [ [Object], [Object], [Object], [Object] ],
    pageDescription: [ [Object] ],
    pageTitle: 'Frontpage'
  },
]
Jan 10, 2022, 10:06 PM
Your server/terminal console is not going to drill down into objects, but you can “expand” those objects using something like this:

console.log(JSON.stringify(data, null, 2))
As for using that data on your page, you’ll need to specify keys on objects (e.g., if 
person
is an object, you can’t use that on the page—you’d need to specify 
person.name
, as an example) and map through arrays (e.g., if 
people
is an array, you’ll need to map through it and handle each 
person
). Both of those are seen here, where 
categories
is an array and each 
category
is an object with at least 
_id
and 
title
keys on it:

<ul>
  {categories.map(category => (
    <li key={category._id}>{category.title}</li>
  ))}
</ul>
You’ll probably want to render 
categories
conditionally (check if it’s empty and if it is, don’t try to map over it).
Jan 10, 2022, 11:59 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.

Get started for freeExplore the demo

Was this answer helpful?