Using Portable Text with Gatsby and Sanity, including querying data and defining content fields.
Last updated: Jan 11, 2023
Is there an example for using portable text with Gatsby? The docs seem to be missing some information
Jan 11, 2023, 6:21 PM
Gatsby will use the PortableText to React package . The link on that page will take you to the repo where you can learn about usage. If you’re having trouble querying your data, the Gatsby Source plugin’s documentation can be found here . You’ll specifically want to read this section in regards to Portable Text.
Jan 11, 2023, 6:28 PM
What is the type of _rawContent? When content is defined something like:
_rawContent would be the raw JSON representation of the content field in that example. This gives you access to all of the fields present in you blocks. If you don’t use the raw field, you’ll be missing things that distinguish your annotations and decorators. You’ll also be able to automatically resolve references to a given depth, which is useful when you’re using something like internal links and images. I’m not sure why it works this way, it seems to be some sort of GraphQL quirk but I don’t know enough GraphQL
Jan 11, 2023, 7:50 PM
I have no idea if this is proper, but it appears to work. the missing type above can be
and then the corresponding type in typescript can be
. I couldn't glean that from the docs, but reading the generated schema.gql and tooltips got me there. I'd still like to see a proper example. What I have still doesn't work for images.
Jan 11, 2023, 8:16 PM
The result is really underwhelming. It seems to not use any of the nice image features from Sanity nor Gatsby, but it works. For today, that's enough.