Issue with required prop 'blocks' in SanityBlockContent2 component.
43 replies
Last updated: Jul 15, 2022
A
Failed prop type: The prop
blocksis marked as required in
SanityBlockContent2, but its value is
undefined.
Jul 14, 2022, 8:55 PM
A
<div className="block__content">
<BlockContent blocks={singlePost.body} projectId="1y5aj0uu" dataset="production"/>
</div>Jul 14, 2022, 8:59 PM
Hi Anderson. Is there any chance you have a document without any
body?
Jul 14, 2022, 9:00 PM
A
No, he has a body
Jul 14, 2022, 9:01 PM
Can you please post your query?
Jul 14, 2022, 9:03 PM
A
The query is wrong?
Jul 14, 2022, 9:05 PM
It looks to be, yes. There’s a projection (
{title, "name": author->name}) and then another projection after that, and the second can pull only from what’s in the first; this means there’s nothing to get bodyfrom.
Jul 14, 2022, 9:09 PM
Could you try adding
"name": author->nameto your bigger projection and then removing the first one?
Jul 14, 2022, 9:10 PM
A
Eu tento remover ambos, mas o mesmo erro acontece.
Jul 14, 2022, 9:11 PM
A
I try to remove both, but the same error happens.
Jul 14, 2022, 9:12 PM
Can you post a snippet of your code instead of a screenshot? I can post back with what I mean.
I believe you might also need to change
I believe you might also need to change
data[0]to
data, since you’ve already “sliced” for one document in your query so you’re no longer getting back an array.
Jul 14, 2022, 9:15 PM
A
useEffect(() => { client
.fetch(
)
.then((
data) => {setSinglePost(_data_[0]), console.log(singlePost)}) setIsLoading(false)
}, [slug])
.fetch(
*[_type == "post" && slug.current == $slug][0]{title} {
title,
body,
mainImage {
asset -> {
_id,
url
},
alt
}
}.then((
data) => {setSinglePost(_data_[0]), console.log(singlePost)}) setIsLoading(false)
}, [slug])
Jul 14, 2022, 9:17 PM
A
<section> <h1> {singlePost.title} </h1>
{singlePost.mainImage && singlePost.mainImage.asset && (
<img
src={singlePost.mainImage.asset.url}
alt={singlePost.title}
title={singlePost.title} />
)}
<div
className="block__content"> <_BlockContent_
blocks={singlePost.body}
projectId="1y5aj0uu"
dataset="production" />
</div>
</section>
{singlePost.mainImage && singlePost.mainImage.asset && (
<img
src={singlePost.mainImage.asset.url}
alt={singlePost.title}
title={singlePost.title} />
)}
<div
className="block__content"> <_BlockContent_
blocks={singlePost.body}
projectId="1y5aj0uu"
dataset="production" />
</div>
</section>
Jul 14, 2022, 9:17 PM
Can you try this:
If that doesn’t work, please try the same thing but change
useEffect(() => {
client
.fetch(
`*[_type == "post" && slug.current == $slug][0] {
title,
body[],
mainImage {
asset -> {
_id,
url
},
alt
}
}`
)
.then((data) => {setSinglePost(data[0]), console.log(singlePost)})
setIsLoading(false)
}, [slug])setSinglePost(data[0])to
setSinglePost(data).
Jul 14, 2022, 9:19 PM
A
I try the both ways, and ... nop
Jul 14, 2022, 9:37 PM
A
Same error!
Jul 14, 2022, 9:37 PM
A
Only in slug it's happen.
Jul 14, 2022, 9:37 PM
A
If another way to show the slug with title, image and body, you can show me, no need to kill yourself so much.
Jul 14, 2022, 10:16 PM
A
If another way to show the slug with title, image and body, you can show me, no need to try so hard.
Jul 14, 2022, 10:17 PM
Ahh. At the end of your query please try
{slug} rather than [slug].
Jul 14, 2022, 10:42 PM
A
Like it?
`*[_type == "post" && slug.current == ${slug}][0]Jul 14, 2022, 10:45 PM
A
I don't found anything about SanityBlockContent2
Jul 14, 2022, 10:48 PM
Like this:
useEffect(() => {
client
.fetch(
`*[_type == "post" && slug.current == $slug][0] {
title,
body[],
mainImage {
asset -> {
_id,
url
},
alt
}
}`
)
.then((data) => {setSinglePost(data[0]), console.log(singlePost)})
setIsLoading(false)
}, {slug})Jul 14, 2022, 10:54 PM
A
Can't do that. Because this array is because useEffect
Jul 14, 2022, 10:55 PM
A
useEffect received a final argument that is not an array (instead, received
object). When specified, the final argument must be an array.
Jul 14, 2022, 10:55 PM
No, you’re right. That’s just me mis-reading it all. You’re not passing the slug yet, and that’s where the error’s coming from.
Please try:
Please try:
useEffect(() => {
client
.fetch(
`*[_type == "post" && slug.current == $slug][0] {
title,
body[],
mainImage {
asset -> {
_id,
url
},
alt
}
}`, {slug}
)
.then((data) => {setSinglePost(data[0]), console.log(singlePost)})
setIsLoading(false)
}, [slug])Jul 14, 2022, 10:56 PM
A
Same
Jul 14, 2022, 10:58 PM
And you’re passing in a slug?
Jul 14, 2022, 11:01 PM
A
Yes
Jul 14, 2022, 11:01 PM
A
Like you say
Jul 14, 2022, 11:01 PM
A
mainImage { asset -> {
_id,
url
},
alt
}
}, {slug}`
_id,
url
},
alt
}
}, {slug}`
Jul 14, 2022, 11:01 PM
But your front end is handling a slug?
Jul 14, 2022, 11:01 PM
A
No because this error. But if I show only the slug, he shows the path.
Jul 14, 2022, 11:02 PM
The error is because you’re not passing a slug, not in spite of it. For example, if you replace
$slugin your query with a literal
slug.currentvalue, does your query work?
Jul 14, 2022, 11:05 PM
A
No. But if I delete the query and pass the value from props, he's work.
Jul 14, 2022, 11:08 PM
A
You have a example from query correct to get a slug data?
Jul 14, 2022, 11:10 PM
A
Or using this API
https://1y5aj0uu.api.sanity.io/v2021-06-07/data/export/production/
https://1y5aj0uu.api.sanity.io/v2021-06-07/data/export/production/
Jul 14, 2022, 11:17 PM
I wouldn’t recommend using that for this purpose. That’s an endpoint to export your dataset. I would stick with the client and use
client.fetch.
Jul 14, 2022, 11:20 PM
What are you using for your front end? Perhaps Create React App or a framework like Next.js?
Jul 14, 2022, 11:23 PM
A
Create React App
Jul 14, 2022, 11:26 PM
A
I can stop show the error about SanityBlockContent2
Jul 14, 2022, 11:27 PM
A
{singlePost.slug && singlePost.slug.current && ( <div
className="block__content"> <_BlockContent_
blocks={singlePost.body}
projectId="1y5aj0uu"
dataset="production" />
</div>
)}
className="block__content"> <_BlockContent_
blocks={singlePost.body}
projectId="1y5aj0uu"
dataset="production" />
</div>
)}
Jul 14, 2022, 11:27 PM
A
I fix using:
useEffect(() => {
sanityClient
.fetch(
`*[slug.current == $slug]{
title,
slug,
mainImage{
asset->{
_id,
url
}
},
body,
"name": author->name,
"authorImage": author->image
}`,
{ slug }
)
.then((data) => setSinglePost(data[0]))
.catch(console.error);
setIsLoading(false)
}, [slug]);Jul 15, 2022, 12:55 AM
Great! Glad to hear it, Anderson. 🙂
Jul 15, 2022, 4:05 AM
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.