🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

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?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
How to turn PortableText into plain text in Javascript?Dec 7, 2020
Rendering nested block contentJan 18, 2021
Warning: Data for Page Exceeds the Threshold of 128 kBAug 17, 2022
List Arrays - Is it Possible to Fill a List Array Within a Schema Asynchronously?Mar 16, 2021
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
TypeError: Cannot Read Properties of Null (Reading 'jsonType')Sep 28, 2022
Error in custom validation rule for schema in Slack threadAug 18, 2023
How to populate a list of values in a Sanity schema using a separate fileSep 6, 2021
How to fetch an array of images using groq in Sanity.ioMay 21, 2023
Is there a way to write a groq query that checks if a boolean is true, and if so, returns an array of referenced documents?...Feb 1, 2021

Related contributions

Turbo Start Sanity
- Template

The battle-tested Sanity template that powers Roboto Studio's websites

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle