Troubleshooting Next.js and Sanity integration with query error
15 replies
Last updated: May 18, 2022
M
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:
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
K
This error typically indicates that your query is malformed. Can you share it please?
May 18, 2022, 2:27 PM
M
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
K
It’s actually looking okay. Do you have another query maybe?
May 18, 2022, 2:41 PM
M
I have this in my index.js, but this works fine:
`const query = `*[_type == "property"]``
export const getServerSideProps = async () => {const properties = await sanityClient.fetch(query)
...
May 18, 2022, 2:43 PM
M
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
K
This error is also indicator of a malformed query.
May 18, 2022, 2:45 PM
K
This happens when you do something like:
Instead of:
{ slug.current }{ "slug": slug.current }May 18, 2022, 2:46 PM
M
Maybe it's because of this?
May 18, 2022, 2:47 PM
K
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
modalidadin your query.
May 18, 2022, 2:57 PM
M
Oh thank you so much! i didn't notice
May 18, 2022, 3:01 PM
M
But now i'm getting this: Uncaught Error: Error serializing
.ownerreturned from
getServerSidePropsin "/propiedad/[slug]". Reason:
undefinedcannot be serialized as JSON. Please use
nullor 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
If the props map 1:1 with the query response you can do this instead, which should avoid the error:
or
I think the document you’re looking at doesn’t have an owner set so you’re assigning undefined to the
ownerprop, 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 }
}owner: property.owner || null,
May 18, 2022, 3:16 PM
K
Nice catch Cory, I totally overlooked that missing comma. Shame on me. 🤦♀️
May 18, 2022, 3:18 PM
K
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.