Slugs & Multi level URLs

Hi Rowan,

Welcome to the community!

I believe it's still the case that if you're using Gatsby you won't be able to do 2 level links within the Rich Text fields. I'm not sure about the link within 'group fields' though.

Can you send me your project so that we can test if this is possible?

Thanks.

Is there any way to turn off the internal page link feature so we can simply paste a URL? You refer to this being a limitation of using Gatsby? What frameworks would this work on?
NEXT.js?

I'm not sure why you would want to turn off the internal page link, you should be able to add full URLs even when you can choose internal links.

It should be possible in Next.js I imagine, Can you show me your query for your links in the group field?

Hey Rowan,

The following is a link only to an external URL and it allows the author to select the "Open in a new tab" option:

"weblink": {
  "type": "Link",
  "config": {
    "label": "Link to the Web",
    "placeholder": "Add a link to the web",
    "select": "web",
    "allowTargetBlank" : true
  }
}

You can set this in the JSON editor for your link field, you can read more about this here:

Hey everyone, chiming in here to address one of the questions that came up.

When using Prismic with Gatsby, you can query for data infinitely deep as long as your query contains the fields. For example, if you had a Page document that references another Page document, which also references another Page document, you can query the relation fields the whole way down as needed.

In Rich Text fields, however, you are unable to query like you can in GraphQL. Instead, you must tell the Prismic API the extra relation field data to include.

This is done by providing a fetchLinks value to gatsby-source-prismic's plugin options in your project's gatsby-config.js file.

You can read more about Prismic's fetchLinks option here: https://prismic.io/docs/technologies/fetch-linked-document-fields-javascript

For example, if you have a Page custom type with a parent field that is a content relation field to another Page document, you can tell the API to return data for that relation. You can then use the link resolver to build the nested URL. The link resolver may look something like this:

const linkResolver =
  (doc) => '/' + [doc.parent?.uid, doc.uid].filter(Boolean).join('/')

And the fetchLinks plugin option would look like this:

{
  resolve: 'gatsby-source-prismic',
  options: {
    // ...along with your other options...
    fetchLinks: ['page.parent']
  }
}

The actual link resolver logic would be specific to your project. But you can see there that you have access to the doc.parent field.

Check out this issue on GitHub for more details: Custom URLs and Link Resolver · Issue #330 · angeloashmore/gatsby-source-prismic · GitHub

3 Likes