Gatsby shows empty Sanity children but playground shows data

This is indeed a known issue with Gatsby and gatsby-source-sanity when working with Portable Text! The problem occurs because of a field name conflict between Gatsby's internal GraphQL schema and Sanity's Portable Text structure.

The Root Cause

Portable Text blocks in Sanity have a children field that contains the actual text content (spans, marks, etc.). However, Gatsby reserves the children field name for its own internal node relationships in GraphQL. When gatsby-source-sanity tries to map Sanity's Portable Text structure to Gatsby's GraphQL layer, this conflict causes the children field to appear empty in Gatsby's GraphQL (GraphiQL), even though the data exists perfectly fine in Sanity's Vision/Playground.

The Solution: Use _rawFields

The gatsby-source-sanity plugin generates special _raw prefixed fields specifically to handle this and other similar issues. These fields provide the raw JSON data from Sanity without Gatsby's GraphQL transformations interfering.

Instead of querying your Portable Text like this:

query {
  sanityPost {
    body {
      children {
        text
      }
    }
  }
}

Query it using the _raw version:

query {
  sanityPost {
    _rawBody
  }
}

The _rawBody field (or _rawYourFieldName for whatever your Portable Text field is called) will contain the complete, unmodified Portable Text structure with all the children arrays intact.

Rendering the Raw Portable Text

Once you have the raw data, you'll need to use a Portable Text renderer like @portabletext/react to display it:

import {PortableText} from '@portabletext/react'

function MyComponent({data}) {
  return <PortableText value={data.sanityPost._rawBody} />
}

You can also configure reference resolution depth in your GraphQL query if your Portable Text contains references:

query {
  sanityPost {
    _rawBody(resolveReferences: {maxDepth: 5})
  }
}

This is a documented feature of gatsby-source-sanity - the _raw fields are specifically designed to bypass Gatsby's GraphQL transformations and give you direct access to Sanity's data structure, which is essential for Portable Text and other complex nested content.