Issue with accessing reference types in serializer components
The issue you're experiencing is a common one when working with references in Sanity queries. When you fetch data using Portable Text serializers, references are not automatically expanded - they come through as reference objects with just _ref and _type fields.
The Problem
In your serializer, you're trying to access exchangeRef.name, but exchangeRef only contains:
{
"_ref": "115562b1-ebff-465a-9f40-720119eb472a",
"_type": "reference"
}This means exchangeRef.name is undefined because the reference hasn't been dereferenced.
The Solution
You need to dereference the references in your GROQ query before the data reaches your serializer. Use the -> operator in your query:
*[_type == 'yourDocumentType'] {
...,
content[] {
...,
_type == 'gridBestExchanges' => {
...,
gridItems[] {
...,
_type == 'bestExchangesGridByCountry' => {
...,
gridItems[] {
...,
exchangeRef-> {
_id,
name,
// other fields you need
}
}
}
}
}
}
}The key part is exchangeRef-> which tells GROQ to follow the reference and expand it with the actual document data.
Alternative: Dereferencing Arrays of References
If you're working with an array of references (which appears to be your case with the nested gridItems), you need to use the array dereferencing syntax:
gridItems[] {
...,
exchangeRef-> {
_id,
name,
// other fields
}
}Important Note
As mentioned in the Sanity documentation on expanding references, when working with arrays of references, you must use the square brackets with the dereference operator: array[]-> not just array->. The brackets are mandatory to traverse the array and dereference each item.
The documentation specifically warns: "It would be easy to forget the square brackets when expanding an array of references (i.e., querying producers-> instead of producers[]->, with the former returning a single null value)."
After updating your query to properly dereference the references, your serializer code should work as expected because exchangeRef will contain the full document data including the name field you're trying to access.
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.