Using @sanity/block-content-to-react to display formatted text in Gatsby
7 replies
Last updated: Sep 13, 2021
N
Hi,I defined one of my fields as block (to have formatted text) like this:
when I go to the sanity studio - it looks good, and I can have some text decoration and lists, etc..
but my problem is how to display it nicely on my webpage?
I am using gatsby and querying the data, and the data I get looks like this:
I tried to use @sanity/block-content-to-react but not sure if the data coming back from the grapshQL query fits to what the component expects or if I should "massage" the data before passing it to the component.
any hint / help / guide is appreciated
🙂
{
name: 'verbalDescription',
title: "Feature's verbal description",
type: 'array',
of: [{type: 'block'}],
description:
'describe the Feature in a verbal way (to gain more content on the page)',
},but my problem is how to display it nicely on my webpage?
I am using gatsby and querying the data, and the data I get looks like this:
{
"data": {
"allSanityFeature": {
"nodes": [
{
"description": "Set your favorite speed and toggle it on and off easily",
"verbalDescription": [
{
"_rawChildren": [
{
"_key": "6cde849cb096",
"_type": "span",
"marks": [],
"text": "Using OVC you can set your 'favorite speed' (x3 is the default), this is done in the 'Settings page' of the extension.\n\nOnce you configured your favorite speed, you can easily toggle it on and off by either clicking on the favorite speed button on the controller or by using the keyboard shortcut (default is the letter 'L', you can customize it in the shortcuts page of the extension).\n\nWhen you toggle the favorite speed off - the video will go back to the speed it was before toggling favorite speed on."
}
],
"_key": "6726fd3e2ba4",
"_type": "block",
"list": null,
"style": "normal",
"children": [
{
"_key": "6cde849cb096",
"_type": "span",
"marks": [],
"text": "Using OVC you can set your 'favorite speed' (x3 is the default), this is done in the 'Settings page' of the extension.\n\nOnce you configured your favorite speed, you can easily toggle it on and off by either clicking on the favorite speed button on the controller or by using the keyboard shortcut (default is the letter 'L', you can customize it in the shortcuts page of the extension).\n\nWhen you toggle the favorite speed off - the video will go back to the speed it was before toggling favorite speed on."any hint / help / guide is appreciated
🙂
Sep 12, 2021, 6:03 PM
Hey Nimrod! You should be able to pass the result from your query to a
BlockContentcomponent without having to massage the data. There's an example of this in the Gatsby Portfolio Starter . You can check out the implementation here .
Sep 13, 2021, 3:46 PM
N
Thank you vary much,I will have a look
🙂 hope to get it to work now.
🙂 hope to get it to work now.
Sep 13, 2021, 6:45 PM
You can always come back and share your frontend code if you're still having trouble!
Sep 13, 2021, 6:47 PM
You can always come back and share your frontend code if you're still having trouble!
Sep 13, 2021, 6:47 PM
N
ok, my mistake was trying to use the field name in the query instead of the _raw field - for example, I queried verbalDescription (a field in my schema) which gives results, but what I actually needed was _rawVerbalDescription.passing the _rawVerbalDescription to the blockContent component - works out of the box indeed.
thanks again for the great on the spot links and help.
thanks again for the great on the spot links and help.
Sep 13, 2021, 9:05 PM
Awesome! Glad you got it working!
Sep 13, 2021, 9:06 PM
N
ok, my mistake was trying to use the field name in the query instead of the _raw field - for example, I queried verbalDescription (a field in my schema) which gives results, but what I actually needed was _rawVerbalDescription.passing the _rawVerbalDescription to the blockContent component - works out of the box indeed.
thanks again for the great on the spot links and help.
thanks again for the great on the spot links and help.
Sep 13, 2021, 9:05 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.