Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Inconsistent output of Pages related object causes errors in front-end data call.

19 replies
Last updated: May 14, 2020
i have a document called 
Page
that has an object called 
related
where you choose 3 related pages, this maps to a field called 
relatedChoices
on the front-end i am calling for this data with 
pageData.related.relatedChoices
.
i'm finding inconsistency with the output of Pages if no related items are chosen. On some pages, it simply says 
relatedChoices length is 0
... but i have 2 pages that for some reason error out and say 
pageData.related is null
.
if i console the object 
pageData.related
it does show null... why? why are some ok to pass to the child field of relatedChoices, but some stop at the object related?
May 14, 2020, 2:03 PM
Hey
user N
! My guess is that if the length is 0 (empty array/obj) then you at one point had chosen a related page in Sanity. And if its null, then you have never chosen a related page.
Maybe test that out. But I think Ive ran into that. I normally check on the front-end by checking that it exists and has a length
May 14, 2020, 2:11 PM
yes, that was my thought too
May 14, 2020, 2:13 PM
i "think" i just solved it... i think i was running my ternary incorrectly
i was checking if it was undefined before checking for 
!== null

i'm rebuilding now to make sure
May 14, 2020, 2:14 PM
yeah, its something with the way i'm trying to write my check
i'm trying to conditionally load the 
related
component only if there are 
relatedChoices

if i only check for 
!== null
it works as i would expect, but as soon as I add a check for undefined or length = 0, it bombs back to the 
pageData.related is null
May 14, 2020, 2:16 PM
interesting. Does your ternary look something like
pageData && pageData.related && pageData.related.length && (<Component />)
May 14, 2020, 2:19 PM
i was going with 
||
rather than 
&&
May 14, 2020, 2:20 PM
{pageData.related !== null || !pageData.related === 'undefined' || !pageData.related.relatedChoices.length === 0 ? <Related _related_={pageData.related} /> : null}
May 14, 2020, 2:21 PM
yeah, switching to 
&&
makes it work ... i seem to always get these 2 mixed up, 
AND vs OR

I don't know why...
🤦‍♂️
May 14, 2020, 2:23 PM
well, lol, except now it doesn't load on pages where it SHOULD load the component
May 14, 2020, 2:24 PM
That’s probably because you should change 
===
to 
>
in this case? 🙂
May 14, 2020, 2:26 PM
for length?
May 14, 2020, 2:26 PM
{pageData.related !== null && pageData.related !== undefined && pageData.related.relatedChoices.length > 0 ? <Related related={pageData.related} /> : null}
May 14, 2020, 2:27 PM
ok that finally worked... i think i had the check for undefined incorrect as well
May 14, 2020, 2:28 PM
is there a better way of writing this?
May 14, 2020, 2:28 PM
You could try this:
{pageData.related && pageData.related.relatedChoices.length > 0 ? <Related related={pageData.related} /> : null}
May 14, 2020, 2:29 PM
that first check looks at both 
null
and 
undefined
?
May 14, 2020, 2:29 PM
as i've seen both returned
May 14, 2020, 2:30 PM
They’re both so-called falsy values, so just using the 
&&
operator should cover both of them, and a bunch more:• 
false
• 
0
(zero)• `''`/`""` (empty string)
• 
null
• 
undefined
• 
NaN
But not:
• 
'0'
(zero in a string)• 
'false'
(false in a string)• 
[]
(empty array)• 
{}
(empty object)• 
function(){}
(empty function)
May 14, 2020, 2:43 PM
In your last example,
user M
, would you need to check that 
pageData.related.relatedChoices
exits before checking the length? 
length()
wont exist if 
relatedChoices
doesn’t exist right? I could be wrong, just feel like I’ve run into that
May 14, 2020, 3:08 PM

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.

Get started for freeExplore the demo

Was this answer helpful?