PrismicLink output if not enough attributes are passed in

[alexanderbluhm]

Is your feature request related to a problem? Please describe.

I created a Link-Field in Prismic CMS and wanted to use PrismicLink in order to display it.
In my case it could be a document, external or media link.
I used this code to render the PrismicLink:

<PrismicLink
  field={item.link}
  linkResolver={linkResolver}
>
  {item.text}
</PrismicLink>

I expect this to work but there was no error and no link was rendered. (It just returned null I think)
After that, I added more fields to my GraphQL query and then it worked. So, the component needed some more attributes in order to work correctly.

Describe the solution you'd like

I would like the PrismicLink component to output a message like "uid, id, lang, ..." are needed on the link field in order to work.
Or at least some feedback from the component and not just nothing.

Additional context

The link fields I selected when it didn't work: link_type.
The link fields I selected when it finally worked:

link_type, url, uid, id, lang, type, target

[angeloashmore]

Hi @alexanderbluhm, thanks for reporting this bug.

v2.4.1 includes a development-only check for missing Link field properties. It will throw an error letting you know the field is missing properties and links to a document with an explanation. See the document here: https://github.com/prismicio/prismic-react/blob/1eb04d88a72f436ac7586625716ff6c9fe337949/messages/missing-link-properties.md

You can see more details on the changes in the PR here: #153.

Update to the latest version of @prismicio/react to benefit from the development check:

npm i @prismicio/react@latest

If you have any questions, feel free to post them here and I will help. Thanks! 🙂

[kb1995]

@angeloashmore How can I opt out from the error message? If the content person has included an empty link on the website (either on purpose or by accident), I can't work in development as this error is popping up.

Currently, the only way to go around it if to wrap the PrismicLink into my own custom component in order to check if the field is present. If it's not present, render an empty link. But that seem to just add one more unnecessary component.

It would make total sense if this was a development-only warning in the console instead of blocking the entire development process.

[angeloashmore]

@kb1995 Thanks for reporting that. That was unintended; unfilled Link fields are valid and should not trigger an error.

I implemented a fix in #157, but it requires a fix in @prismicio/helpers as well (prismicio/prismic-helpers#51). Before merging and publishing both PRs, I'd like to get a review from @lihbr first. I'll post here once the fix is published.

Thanks again! 🙂

[lihbr]

prismicio/prismic-helpers#51 was merged and released 🎉
This one should land soon too!

[angeloashmore]

Perfect! #157 has been merged and published in @prismicio/[email protected].

To update, install the latest version:

npm install @prismicio/react@latest

@kb1995 When you have a chance, could you update and let me know if it fixes the issue? You should be able to use <PrismicLink> without an additional empty-field check.

[kb1995]

@angeloashmore Thanks, I just tested it and now the error is gone.

I'm still not 100% sure if the default behaviour shouldn't be to output an empty link but still showing the children. This is the logic I've used up to now, but this might not be correct.

Imho, it does make sense to be the case above. Then if I don't want it to be the case (don't display it if there is an empty link) I can update InternalLinkComponent and ExternalLinkComponent.