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

The Sanity Composable Content Cloud is the 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?