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

Troubleshooting Next.js and Sanity integration with query error

15 replies
Last updated: May 18, 2022
Good morning! I'm trying to connect my sanity app with Next.js using createClient from "next-sanity", but I keep getting this error: "*ClientError: expected '}' following object body*"
This is my code:

import { createClient } from "next-sanity"

export const sanityClient = createClient({

dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",

projectId: "ekdlavlv",

apiVersion: "2022-03-25",

useCdn: process.env.NODE_ENV === "production",

})
May 18, 2022, 2:22 PM
This error typically indicates that your query is malformed. Can you share it please?
May 18, 2022, 2:27 PM
Sure! You mean this?`const query =
*[ _type == "property" && slug.current == $pageSlug][0]{

title,

location,

propertyType,

mainImage,

images,

price,

expensas,

ambientes,

bathrooms,

descripcion,

modalidad

owner->{

_id,

name,

slug,

image

},
`}``
May 18, 2022, 2:30 PM
It’s actually looking okay. Do you have another query maybe?
May 18, 2022, 2:41 PM
I have this in my index.js, but this works fine:
export const getServerSideProps = async () => {
`const query = `*[_type == "property"]``

const properties = await sanityClient.fetch(query)

...
May 18, 2022, 2:43 PM
I also had this error: "ClientError: Must be an attribute or a string key", but I read that I have to write the apiVersion, and when I do that, the "*ClientError: expected '}' following object body*" appears. I'm not sure what to do
May 18, 2022, 2:45 PM
This error is also indicator of a malformed query.
May 18, 2022, 2:45 PM
This happens when you do something like:
{ slug.current }
Instead of:

{ "slug": slug.current }
May 18, 2022, 2:46 PM
Maybe it's because of this?
May 18, 2022, 2:47 PM
No, this is definitely a query error. It’s thrown by Sanity. It’s not related to what you return to your component. 🙂
May 18, 2022, 2:47 PM
Need
,
after
modalidad
in your query.
May 18, 2022, 2:57 PM
Oh thank you so much! i didn't notice
May 18, 2022, 3:01 PM
But now i'm getting this: Uncaught Error: Error serializing
.owner
returned from
getServerSideProps
in "/propiedad/[slug]". Reason:
undefined
cannot be serialized as JSON. Please use
null
or omit this value.
May 18, 2022, 3:02 PM
At least it’s not a Sanity problem anymore 🙂
I think the document you’re looking at doesn’t have an owner set so you’re assigning undefined to the
owner
prop, which doesn’t work.
If the props map 1:1 with the query response you can do this instead, which should avoid the error:

return {
  props: { ...property }
}
or

owner: property.owner || null,
May 18, 2022, 3:16 PM
Nice catch Cory, I totally overlooked that missing comma. Shame on me. 🤦‍♀️
May 18, 2022, 3:18 PM
As Cory said, to pass down props from the server to the client, Next uses JSON and undefined cannot be serialized in JSON which is why you need to use null or false or whatever value that can be serialized.
May 18, 2022, 3:19 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?