Rendering rich text from blocks on Gatsby using @portabletext package and gatsby-source-sanity plugin

23 replies
Last updated: Sep 7, 2022
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
package here . That readme contains a lot of information about rendering your blocks.
Sep 2, 2022, 6:40 PM
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
yeah, i occasionally end up there from google searches and it reads like the plumbus bit from rick and morty
Sep 2, 2022, 6:48 PM
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
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
i’ll try that thanks. I was attempting to replicate this fella’s method, but no dice. video for context:
Sep 2, 2022, 10:42 PM
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
I get this object:
              "_key": "183fcbdcd3f5",
              "_type": "image",
              "asset": {
                "_ref": "image-4b6600a50705e57a7d2a56924cbe7500420ed936-1450x1411-png",
                "_type": "reference"
Sep 2, 2022, 10:44 PM
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
field 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
yup, so im getting the _raw through graphql
Sep 2, 2022, 10:46 PM
hmm, weird!
Sep 2, 2022, 10:46 PM
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
i know i need to format the image src into a way that gatsbyimage will accept it
Sep 2, 2022, 10:49 PM
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
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
instead I had to build that weird workaround
Sep 2, 2022, 11:28 PM
im looking in the issues for the gatsby source sanity package that you linked to earlier and I found this
Sep 2, 2022, 11:31 PM
i opened an issue for the gatsby-source-sanity plugin to track
Sep 3, 2022, 12:00 AM
user M
Knut helped me out with a much simpler solution. It’s built into the gatsby-source-sanity plugin so we’re all set
Sep 7, 2022, 11:05 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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?