Unlock seamless workflows and faster delivery with our latest releases – get the details

How to fetch the bio from author section to post in a blog?

4 replies
Last updated: Nov 8, 2021
Hey all! Curious if anyone was able to fetch ‘bio’ from the author section to post in blog. In my post.js I fetch title/publish date/ author image and name etc and can display via “`{postData.name}`” for example, but when I try to fetch bio with
"bio": author->bio
and then
{postData.bio}
I get “If you meant to render a collection of children, use an array instead.“:
useEffect(() => {

sanityClient

.fetch(
``*[slug.current == $slug]{`

title,

slug,

publishedAt,

mainImage{

asset->{

_id,

url

}

},

body,

"name": author->name,

"authorImage": author->image,

"bio": author->bio,

}
,`
{ slug }

)

.then((data) => setPostData(data[0]))

.catch(console.error);

}, [slug]);
Nov 3, 2021, 8:42 PM
Hi Jennifer. It sounds like
bio
is a rich text field (you might also see it called block content or portable text), meaning that instead of rendering out a string, it’s trying to render an array. Sanity offers a tool to render portable text for you. If the
bio
field is portable text (the schema will be an array with
_type: 'block'
), then instead of using
{postData.bio}
on your front end, you’ll want to render it with the package linked above:

import BlockContent from '@sanity/block-content-to-react'

// ...

// In your function:
return (
  // ...
  <BlockContent blocks={postData.bio} />
)
If this is unclear or you can’t get it working, please let me know.
Nov 3, 2021, 11:16 PM
Worked like a charm thank you
user A
!
Nov 8, 2021, 7:00 PM
user K
This article was very helpful for me understanding Portable Text -&gt; Block Content https://www.sanity.io/guides/introduction-to-portable-text
Nov 8, 2021, 7:01 PM
Great! Thanks for following up, Jennifer.
James, sorry I missed your question. Because BlockContent is a default export from
block-content-to-react
, you can name it whatever you want when you import it (
import JamesContent from '@sanity/block-content-to-react
) and that’s what the component will be named when you go to use it (
<JamesContent blocks={body} />
).
Nov 8, 2021, 9:35 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?