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
that has an object called
where you choose 3 related pages, this maps to a field called
on the front-end i am calling for this data with
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
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
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
component only if there are

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,

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
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
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:

(zero)• `''`/`""` (empty string)



But not:

(zero in a string)
(false in a string)
(empty array)
(empty object)
(empty function)
May 14, 2020, 2:43 PM
In your last example,
user M
, would you need to check that
exits before checking the length?
wont exist if
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?