V2 PrismicRichText and links

Developing with Prismic
1

Hi,

Trying to get my head around PrismicRichText component. I have a richText field that includes paragraphs and a link to another page/document.

When I print it out on the front end the link is stripped? How do I prevent this? Or is there some other way of sorting this?

<PrismicRichText field={pageData.text.richText} />

Here is my graphql response

"data": {
    "prismicAboutPage": {
      "data": {
        "text": {
          "richText": [
            {
              "type": "paragraph",
              "text": "\"I have always been fond of taking pictures. I have also always been rather fond of actors. So I spend quite a lot of time taking pictures of them. Now, there is always a healthy debate about what kind of headshot an actor ought to have. Should it look like you on your best day? Should it be a shot that lays bare your tortured soul or should it simply say, \" don't I look nice, I'd be great to work with\"! Well, my goal is to take very relaxed shots of you looking... just like you. That is the most important thing.\"  - Ben",
              "spans": [
                {
                  "start": 387,
                  "end": 393,
                  "type": "strong"
                },
                {
                  "start": 521,
                  "end": 526,
                  "type": "strong"
                }
              ]
            },
            {
              "type": "paragraph",
              "text": "If you are interested in my photographic ramblings you might like to check out my Blog.",
              "spans": [
                {
                  "start": 82,
                  "end": 86,
                  "type": "hyperlink",
                  "data": {
                    "id": "Yec2VxEAACIAonM-",
                    "type": "contact_page",
                    "tags": [],
                    "slug": "contact-page",
                    "lang": "en-gb",
                    "first_publication_date": "2022-01-18T21:51:24+0000",
                    "last_publication_date": "2022-01-18T21:51:24+0000",
                    "link_type": "Document",
                    "isBroken": false
                  }
                }
              ]
            }
          ]
        }
      }
    }
  },

Many Thanks

2

Hello @webdev2, welcome to the Community!

Can you show us an example of the stripped link on the site?
Have you configured a global PrismicProvider wrapper for your app? this component helps you resolve internal links in React + Gatsby.

4

Thanks Pau.

Does a PrismicProvider need to be added if you install the gatsby packages?

My gatsby page imports as follows:-

import { PrismicRichText } from "@prismicio/react";

...

 <div
          sx={{
            mt: 4,
            fontSize: 4,
            p: { color: "muted" },
            h1: { color: "headings" },
          }}
        >
          <PrismicRichText field={pageData.text.richText} />
        </div>

In graphiql it shows the link:-

CleanShot 2022-01-21 at 20.44.12@2x
CleanShot 2022-01-21 at 20.44.12@2x1920×1961 247 KB

But one front end it is stripped:-

CleanShot 2022-01-21 at 20.45.23@2x
CleanShot 2022-01-21 at 20.45.23@2x1920×1134 181 KB

5

PrismicProvider is a React component that you import from @prismicio/react. It allows you to handle the links o your app globally. After that, your Rich Text fields should be able to detect the correct path of a URL. Take a look at this section of the docs:

Also, the multi-language sample uses it, check it out if you'd like to see a working example:

6

Thanks Pau,

I'll take a look.

So if I wrap in this Prismic Provider with the rich text automatically sort links within say a paragraph?

7

I have added the provider as suggested and still the link isn't showing up

8

I've managed to pull something together studying those repositries.

I don't understand why its not just clearly laid out in the docs. Having to guess totally puts developers trying new out off.

I had a similar problem when I first looked at Prismic as your docs were full of errors for Gatsby V4.

Here's what I added to gatsby-browser and it worked

import * as React from "react";
import { Link } from "gatsby";
import { PrismicProvider } from "@prismicio/react";
import { linkResolver } from "./src/utils/linkResolver";



export const wrapRootElement = ({ element }) => (
  <PrismicProvider
    linkResolver={linkResolver}
    internalLinkComponent={({ href, ...props }) => (
      <Link to={href} {...props} />
    )}
  >
    {element}
  </PrismicProvider>
);
9

Glad to see you found the correct setup for your project. And thanks for the feedback, I'll be sure to share it with the relevant team.