Rendering rich text from blocks on Gatsby using @portabletext package and gatsby-source-sanity plugin
23 replies
Last updated: Sep 7, 2022
E
Does anyone have a good step-by-step guide on how to render rich text from blocks on gatsby?
Sep 2, 2022, 6:35 PM
There isn't a specific guide for this, unfortunately. However, you will be using the
@portabletextpackage here . That readme contains a lot of information about rendering your blocks.
Sep 2, 2022, 6:40 PM
E
yeah…I’m new to react so it reads like a bunch of gibberish to me. I got that package installed with no idea how to use it.
Sep 2, 2022, 6:43 PM
If you're new to React, I'd suggest reading through the main concepts documentation to get a feel for how it works.
Sep 2, 2022, 6:45 PM
E
yeah, i occasionally end up there from google searches and it reads like the plumbus bit from rick and morty https://www.youtube.com/watch?v=eMJk4y9NGvE&ab_channel=AdultSwim
Sep 2, 2022, 6:48 PM
E
it will just take some digging on my part, but I actually write down step by step guides for myself so I’ll be sure to share
Sep 2, 2022, 7:12 PM
Yeah, I can see it, haha! If you do happen to create a guide we'd love to see it on the exchange . I also remembered there's this really brief section on portable text to React in the documentation (though it probably doesn't make it much clearer than the other stuff I shared 😅 )
Sep 2, 2022, 7:27 PM
E
thanks, i got the text to render with the defaults but now im contending with the images. i know this is the latest and greatest but i sure miss chucking some yml in a settings doc and calling it a day
Sep 2, 2022, 10:26 PM
Since you're using Gatsby, one thing you may be missing when it comes to images is this bit . Images in documents are references to assets, so by adding this you can get the actual image.
Sep 2, 2022, 10:39 PM
E
i’ll try that thanks. I was attempting to replicate this fella’s method, but no dice. video for context: https://youtu.be/6OCji3Eyib4?t=1490
Sep 2, 2022, 10:42 PM
E
ah so i actually have that plugin already, but the issue is getting the images to work when theyre within the blocks
Sep 2, 2022, 10:43 PM
E
I get this object:
{
"_key": "183fcbdcd3f5",
"_type": "image",
"asset": {
"_ref": "image-4b6600a50705e57a7d2a56924cbe7500420ed936-1450x1411-png",
"_type": "reference"
}
}Sep 2, 2022, 10:44 PM
E
so I imagine I can do something with that _ref but still no clue on how to parse it
Sep 2, 2022, 10:45 PM
Are you using the
_rawfield for your portable text? Here's an example from that repo you shared. It lets you expand the asset reference.
Sep 2, 2022, 10:45 PM
E
yup, so im getting the _raw through graphql
Sep 2, 2022, 10:46 PM
hmm, weird!
Sep 2, 2022, 10:46 PM
E
i’ve accepted all javascript is inherently weird, i just need to find each of the methods that work
Sep 2, 2022, 10:48 PM
E
i know i need to format the image src into a way that gatsbyimage will accept it
Sep 2, 2022, 10:49 PM
E
the method he used apparently works but it seems they put their configs in a separate sheet then apply the to the getImage call, but it’s not gatsby’s getImage. it’s from sanity/asset-utils
Sep 2, 2022, 10:50 PM
E
so…..i went and did their set up and it works, but the expected behavior would be I can source the gatsbyImageData from the asset in the block just like i did for an image content type
Sep 2, 2022, 11:27 PM
E
instead I had to build that weird workaround
Sep 2, 2022, 11:28 PM
E
im looking in the issues for the gatsby source sanity package that you linked to earlier and I found this https://github.com/sanity-io/gatsby-source-sanity/issues/143#issuecomment-1007819828
Sep 2, 2022, 11:31 PM
E
i opened an issue for the gatsby-source-sanity plugin to track https://github.com/sanity-io/gatsby-source-sanity/issues/174
Sep 3, 2022, 12:00 AM
E
user M
Knut helped me out with a much simpler solution. It’s built into the gatsby-source-sanity plugin so we’re all setSep 7, 2022, 11: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.