Skip to content
Get help on Slack

Issue with required prop 'blocks' in SanityBlockContent2 component.

43 replies
Last updated: Jul 15, 2022
Failed prop type: The prop 
blocks
is marked as required in 
SanityBlockContent2
, but its value is 
undefined
.
Jul 14, 2022, 8:55 PM
<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
No, he has a body
Jul 14, 2022, 9:01 PM
Can you please post your query?
Jul 14, 2022, 9:03 PM
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 
body
from.
Jul 14, 2022, 9:09 PM
Could you try adding 
"name": author->name
to your bigger projection and then removing the first one?
Jul 14, 2022, 9:10 PM
Eu tento remover ambos, mas o mesmo erro acontece.
Jul 14, 2022, 9:11 PM
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 
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
useEffect(() =&gt; { client
.fetch(

*[_type == "post" && slug.current == $slug][0]{title} {
        title,
        body,
        mainImage {
          asset -> {
            _id,
            url
          },
          alt
        }
      }
)
.then((
data) =&gt; {setSinglePost(_data_[0]), console.log(singlePost)}) setIsLoading(false)
}, [slug])
Jul 14, 2022, 9:17 PM
&lt;section&gt; &lt;h1&gt; {singlePost.title} &lt;/h1&gt;
{singlePost.mainImage &amp;&amp; singlePost.mainImage.asset &amp;&amp; (
&lt;img

src={singlePost.mainImage.asset.url}
alt={singlePost.title}
title={singlePost.title} /&gt;
)}

&lt;div
className="block__content"&gt; &lt;_BlockContent_

blocks={singlePost.body}
projectId="1y5aj0uu"
dataset="production" /&gt;
&lt;/div&gt;
&lt;/section&gt;
Jul 14, 2022, 9:17 PM
Can you try 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])
If that doesn’t work, please try the same thing but change 
setSinglePost(data[0])
to 
setSinglePost(data)
.
Jul 14, 2022, 9:19 PM
I try the both ways, and ... nop
Jul 14, 2022, 9:37 PM
Same error!
Jul 14, 2022, 9:37 PM
Only in slug it's happen.
Jul 14, 2022, 9:37 PM
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
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
Like it?
`*[_type == "post" && slug.current == ${slug}][0]
Jul 14, 2022, 10:45 PM
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
Can't do that. Because this array is because useEffect
Jul 14, 2022, 10:55 PM
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:


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
Same
Jul 14, 2022, 10:58 PM
And you’re passing in a slug?
Jul 14, 2022, 11:01 PM
Yes
Jul 14, 2022, 11:01 PM
Like you say
Jul 14, 2022, 11:01 PM
mainImage {          asset -&gt; {
            _id,
            url
          },
          alt
        }
      }, {slug}`
Jul 14, 2022, 11:01 PM
But your front end is handling a slug?
Jul 14, 2022, 11:01 PM
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 
$slug
in your query with a literal 
slug.current
value, does your query work?
Jul 14, 2022, 11:05 PM
No. But if I delete the query and pass the value from props, he's work.
Jul 14, 2022, 11:08 PM
You have a example from query correct to get a slug data?
Jul 14, 2022, 11:10 PM
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
Create React App
Jul 14, 2022, 11:26 PM
I can stop show the error about SanityBlockContent2
Jul 14, 2022, 11:27 PM
{singlePost.slug &amp;&amp; singlePost.slug.current &amp;&amp; ( &lt;div
className="block__content"&gt; &lt;_BlockContent_

blocks={singlePost.body}
projectId="1y5aj0uu"
dataset="production" /&gt;
&lt;/div&gt;
)}
Jul 14, 2022, 11:27 PM
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.

Get started for freeExplore the demo

Was this answer helpful?