Issue with accessing reference types in serializer components

Is there some kind of rule with references inside serializer components? I’m trying to implement a page builder inside portable text and defining the structure of each section inside the serializer, it works great until I try to map over an object and display data that’s a reference type. It returns it as undefined.
JSON:

"gridItems": [

{

"_key": "e9a8137c2bd0",

"_type": "bestExchangesGridByCountry",

"country": "Australia",

"flag": {

"_type": "image",

"asset": {

"_type": "reference"

}

},

"gridItems": [

{

"_key": "a27f884f71c7",

"_type": "cardBestExchanges",

"category": "Overall",

"exchangeRef": {

"_type": "reference"

},

"ourPick": true

},

{

"_key": "0f8fe217cefe",

"_type": "cardBestExchanges",

"category": "Security",

"exchangeRef": {

"_type": "reference"

}

},

{

"_key": "86b7c678da10",

"_type": "cardBestExchanges",

"category": "Mobile App",

"exchangeRef": {

"_type": "reference"

}

},

{

"_key": "71b4f35bc1f6",

"_type": "cardBestExchanges",

"category": "Beginners",

"exchangeRef": {

"_type": "reference"

},

"sponsored": true

}

]

My code:

gridBestExchanges: (_props_) => {

return (

<>

<div _key_={_node_._key}>

))}

</div>

))}</div>

</>

)

},

I’ve tried passing it to my card comp as an entire object and by passing each individual field with no luck. It works with the page builder we’ve implemented as an array in the schema itself (outside the portable text editor) but for some reason isn’t working within the editor.

Have you specified a serializer for these custom cards?

Yep the above is basically just a crude version of it to get the data pulled in properly

Yep the above is basically just a crude version of it to get the data pulled in properly

Basically the problem is I’m not able to access the reference types from the serializer under ‘types’

They all come back us ‘undefined’ while everything else (that’s not a reference) works fine

Yep the above is basically just a crude version of it to get the data pulled in properly

It seems the reference object itself is there, but only the _ref value accessible it seems

Ah, ok then! The issue is that your references need to be resolved in order to get their values, otherwise you just get the _ref property. More info on how to do that here: https://www.sanity.io/docs/how-queries-work#8ca3cefc3a31

Ahhh that makes sense. Is there a resource for GraphQL?

…. Oh my god.

Rachael disregard me. I just. spent 5 (paid, on the clock) hours trying to figure out how to do this and all I had to do was add (_resolveReferences_: {maxDepth: 10}) to the _rawBody field in my query.

Thank you so much for helping me solve this

Hahaha, we’ve all been there, my friend! Glad you got it sorted out!