how to implement localization on blocks?
I totally understand the challenge with localizing Portable Text blocks in Gatsby! The issue you're running into is pretty common, and there are a few approaches that work better than others.
The main problem with field-level localization for blocks (as shown in the docs you linked) is that when you have localized Portable Text fields, querying them through gatsby-source-sanity can get tricky because of how the _raw fields are generated.
Here's what works best:
For Portable Text specifically, you'll want to use the _raw fields that gatsby-source-sanity generates. If you have a field-level localization structure like:
{
name: 'localeBlockContent',
type: 'object',
fields: [
{
name: 'en',
type: 'array',
of: [{type: 'block'}]
},
{
name: 'es',
type: 'array',
of: [{type: 'block'}]
}
]
}Then in your Gatsby query, you'd access it like:
query {
allSanityYourType {
nodes {
_rawLocaleBlockContent
}
}
}And then access the specific language in your component:
const content = data._rawLocaleBlockContent[currentLanguage]Important caveat: Field-level localization for Portable Text isn't actually recommended by Sanity because it can quickly consume your attribute limits and create complex data structures.
Better approach - Document-level localization:
Consider using document-level localization instead, where each language version is a separate document. This works much better with gatsby-source-sanity and gives you cleaner queries:
query($language: String!) {
allSanityPost(filter: { language: { eq: $language } }) {
nodes {
_rawBody
}
}
}This avoids the nested query complexity and works more naturally with Gatsby's GraphQL layer. You'd add a language field to your document schema and create separate documents for each language version.
The _raw fields are special to gatsby-source-sanity and provide the raw Portable Text data with proper reference resolution. They're not available in Sanity's GraphQL playground, which can make debugging a bit tricky, but they're essential for querying block content in Gatsby.
Hope this helps! If you're still having specific query issues with your current setup, feel free to share the error messages and I can help troubleshoot further! ✨
Show original thread4 replies
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.