✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Querying data in NextJS using GraphQL in Sanity - fetch request format not clear

15 replies
Last updated: Jun 4, 2022
Hello there - I wonder if someone is able to point me in the right direction. I am attempting to query my data in NextJS using GraphQL in Sanity. Doing things the way I know how yields an error from NextJS.
Sanity seems to have some pretty clear docs on how to execute a query using GROQ [
https://www.sanity.io/docs/connect-your-content-to-next-js ], but I haven’t been able to find any docs, or even a code snippet that suggests how the fetch request should be made. It’s very likely that I’m just looking in the wrong places. Can anyone help me out?
Jun 4, 2022, 12:18 PM
what error?
Jun 4, 2022, 1:25 PM
What Austin asked: what error do you have?
Jun 4, 2022, 2:00 PM
You typically want to use the Sanity JS client in
getStaticProps
and
getStaticPaths
to query your data.
Jun 4, 2022, 2:00 PM
object
("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.`
Jun 4, 2022, 2:53 PM
You need to await that promise so it gets resolved.
Jun 4, 2022, 2:54 PM
I’m mostly looking for the right way to format the fetch request to the graphQL api in NextJS which the docs don’t appear to detail… It was an async function.
Jun 4, 2022, 2:55 PM
This is how my request looks

export async function getStaticProps() {
  const graphQlQuery = `
    query {
      allPost (sort: {publishDate: DESC}) {
        _id
        title
        publishDate
        readTime
        slug {current}
        contentRaw 
      }
    }
  `;

  const allPostsData = await fetch(
    '<https://xxxxxxxx.api.sanity.io/v1/graphql/production/default>',
    {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify({
        query: graphQlQuery,
        variables: {},
      }),
    }
  )
    .then((res) => res.json())
    .then((data) => console.log(data));
  return {
    props: {
      allPostsData,
    },
  };
}
Jun 4, 2022, 4:31 PM
That results in the above error.
Jun 4, 2022, 4:33 PM
Thanks for the help. I took a look at the thread and made an adjustment. The serialization error went away, but I’m not able to get a log of any response data irrespective of where I try to get that out of the promise.
Jun 4, 2022, 4:53 PM
That’s because your log.
Jun 4, 2022, 4:55 PM
That’s because of your log. You’re mixing promises and async/await. Right now, your promise chain eventually returns
undefined
, because it returns a console log.
Jun 4, 2022, 4:55 PM
Right your promise chain eventually return
undefined
, because it returns a console log.
Jun 4, 2022, 4:55 PM
I’d recommend rewriting it like this.
const response = await fetch(…)
const data = await response.json()

console.log(data)
Jun 4, 2022, 4:56 PM
Thanks
Jun 4, 2022, 5:01 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.

Was this answer helpful?