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

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]);

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:

If this is unclear or you can’t get it working, please let me know.

Worked like a charm thank you !

This article was very helpful for me understanding Portable Text -> Block Content https://www.sanity.io/guides/introduction-to-portable-text

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} />

).