Using Portable Text with Gatsby and Sanity, including querying data and defining content fields.

7 repliesLast updated: Jan 11, 2023

Is there an example for using portable text with Gatsby? The docs seem to be missing some information

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.

What is the type of _rawContent? When content is defined something like:

export default {
  ...
  type: "document",
  fields: [
    ...
    {
      title: "Content",
      name: "content",
      type: "array",
      of: [
          { type: 'block' },
          { type: 'image' },
      ],
    },
  ],
}

I'm by no means a TS/Gatsby expert. I was hoping to find an example of how this works because I have a huge gap in my understanding of what's happening here and how to get it to do what I want.

I have a graphql interface for this like:

interface Page implements Node {
      id: ID!
      ...
      _rawContent: &lt;insert-something-here&gt;!
    }

_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

I have no idea if this is proper, but it appears to work. the missing type above can be

JSON

and then the corresponding type in typescript can be

ArbitraryTypedObject

. 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.

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.

Was this answer helpful?

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Related contributions

Auto-generate alt text for Media Library assets

FeaturedOfficial

Automatically generate accessible, multilingual alt text for images in your Sanity Media Library using Agent Actions and Sanity Functions

Bram Doppen

First Published Timestamp Function

FeaturedOfficial

Automatically track when content was first published with a timestamp that sets once and never overwrites, providing reliable publication history for analytics and editorial workflows.

Knut Melvær

Automatically tag blog posts

FeaturedOfficial

AI-powered automatic tagging for Sanity blog posts that analyzes content to generate 3 relevant tags, maintaining consistency by reusing existing tags from your content library.

Ken Jones Pizza and 1 other