✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Issue with accessing reference types in serializer components

14 replies
Last updated: Aug 14, 2021
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": {

"_ref": "image-feb24aaa0dfa7ce041c72f80f051588f650e6133-1280x640-svg",

"_type": "reference"

}

},

"gridItems": [

{

"_key": "a27f884f71c7",

"_type": "cardBestExchanges",

"category": "Overall",

"exchangeRef": {

"_ref": "115562b1-ebff-465a-9f40-720119eb472a",

"_type": "reference"

},

"ourPick": true

},

{

"_key": "0f8fe217cefe",

"_type": "cardBestExchanges",

"category": "Security",

"exchangeRef": {

"_ref": "26b859eb-4365-4954-9d73-b5a65e39ca57",

"_type": "reference"

}

},

{

"_key": "86b7c678da10",

"_type": "cardBestExchanges",

"category": "Mobile App",

"exchangeRef": {

"_ref": "3de1e3e2-336b-4eee-a662-81a4de537318",

"_type": "reference"

}

},

{

"_key": "71b4f35bc1f6",

"_type": "cardBestExchanges",

"category": "Beginners",

"exchangeRef": {

"_ref": "7e32329c-be19-4ef3-ba75-0f18ad6b566c",

"_type": "reference"

},

"sponsored": true

}

]

My code:

gridBestExchanges: (_props_) => {

return (

<>

<div>Section body: {_props_.node.body}</div>

<div>Disclaimer: {_props_.node.disclaimer && <BlockContent _data_={_props_.node.disclaimer} />}</div>

<div>Exchange Cards: {_props_.node.gridItems.map((_node_) => (

<div _key_={_node_._key}>

{_node_.gridItems.map((_exchangeRef_) => (

<div _key_={_exchangeRef_._key}>{_exchangeRef_.name}</div>

))}

</div>

))}</div>

</>

)

},
Aug 13, 2021, 10:25 PM
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.
Aug 13, 2021, 10:41 PM
Have you specified a serializer for these custom cards?
Aug 13, 2021, 10:43 PM
Yep the above is basically just a crude version of it to get the data pulled in properly
Aug 14, 2021, 1:17 AM
Yep the above is basically just a crude version of it to get the data pulled in properly
Aug 14, 2021, 1:17 AM
Basically the problem is I’m not able to access the reference types from the serializer under ‘types’
Aug 14, 2021, 1:18 AM
They all come back us ‘undefined’ while everything else (that’s not a reference) works fine
Aug 14, 2021, 1:18 AM
Yep the above is basically just a crude version of it to get the data pulled in properly
Aug 14, 2021, 1:17 AM
It seems the reference object itself is there, but only the _ref value accessible it seems
Aug 14, 2021, 1:19 AM
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
Aug 14, 2021, 1:52 AM
Ahhh that makes sense. Is there a resource for GraphQL?
Aug 14, 2021, 1:53 AM
…. Oh my god.
Aug 14, 2021, 1:57 AM
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.
Aug 14, 2021, 1:58 AM
Thank you so much for helping me solve this
Aug 14, 2021, 1:59 AM
Hahaha, we’ve all been there, my friend! Glad you got it sorted out!
Aug 14, 2021, 2:49 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?