Querying for optional Content Relationship

Developing with Prismic
1

Hey Prismic,

A thing I don't really get tbh is how to optionally query for content relationships from Prismic.

E.g. I have an "Are you interested in another article" kind of section where the editor inside the CMS can

  1. define the visibly of said section and
  2. choose / link to another article (via the standard content relationship field).

So far, so good. The way I am looking for that article inside my getStaticProps:
const relatedArticle = await client.getByUID('journal_post', contact.data?.related_article?.uid)
(Recently added the ? for testing purposes, but that does not help).

My issue now is, when the client chooses the section to be hidden inside Prismic, they don't add those articles, but my site breaks, when there is not related Article (of course, because it's still looking for the related article inside my getStaticProps query, as I can't do some optional queries in there)?

CMSes like Sanity or Craft do return empty objects (or let me get deeper when it exists) that don't break my code, but how to best do that with Prismic?

Thank you

—

Site note 1 — My quick and dirty solution for now is adding a note for the editor to still select an article, if the section is set to hidden.

Side note 2 — You should really add a "real" help text option or "annotation component" for fields. I think this is one of the features I am personally missing the most. Putting important notes into the small grey text is something clients are often missing. Just think of a complex designed component where the client can choose between two complex layout solutions. Putting an explanation into the small grey text makes it quite unreadable.

5

Hey @christian,

Thanks for posting this question and for your sidenotes! I don't see anything like what you're describing in our features category, so — if you want — you could create a new topic there suggesting this, and that way others can add likes and comments.

For the issue you're describing, do you think a conditional would take care of it? I'm imagining something along the lines of this:

const relatedArticle =  contact.data?.related_article
  ? await client.getByUID('journal_post', contact.data?.related_article?.uid)
  : null

If that doesn't work, let me know, and I can keep thinking of other ways to work with this.

Sam

1 Like
6

Hey @samlittlefair,

Thanks for your response, and apologies for the delayed response. Busy days...

I've actually tried your suggestion, but Next is still looking for the props to be returned (at least I think so), so I guess that's why it fails. Again, I've added a small help text for the CMS admins so they are aware that they still need to add some data and I simply define the visibly not by empty relationship fields but by a dropdown (show/hide).

Cheers

7

Hi Christian,

I might be able to help with your issue with the props, but I'll need to see your project to understand better. If you'd like me to take a look, you can send it to me in a .zip file or GitHub repo. You can send them in a DM if you don't wan to share them publicly.

Sam

10

This issue has been closed due to inactivity. Flag to reopen.