Get a peek at our latest innovations at Sanity Product Day on Dec 8th →

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 -> 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.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Free to get started, and pay-as-you-go on all plans. Find out more.