# linkResolver and nested paths

**URL:** <https://community.prismic.io/t/linkresolver-and-nested-paths/96>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [March 31, 2020, 8:14pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96 "2020-03-31T20:14:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![yoann](https://avatars.discourse-cdn.com/v4/letter/y/5fc32e/32.png) [@yoann](https://community.prismic.io/u/yoann)\
**Post date:** [March 31, 2020, 8:14pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/1 "2020-03-31T20:14:54Z")

</div>

Hey,

I'm building a complete guide for a website, with next JS and dynamic page.

I will have an architecture like this : [mydomain.com/hub/chapter/article](http://mydomain.com/hub/chapter/article)

In an article, I have a content relationship to a chapter, and a chapter has its own content relation ship to hub.

In an article, I have a RichText element where we can have links to other Prismic document, for example a chapter or an article. Assume we want to go [mydomain.com/hub/chapter/article2](http://mydomain.com/hub/chapter/article2), for this need I add a relationship content in RichText editor.

Now if I need to make a correct link, I need to use linkResolver on RichText component.

But how to rebuild the full path to article page for exemple ? LinkResolver have only few attributes and it seems impossible to make a async call to get all datas I need to rebuild my specific path, and it seems weird to make a thing like this.

Thanks

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 1, 2020, 10:58am UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/2 "2020-04-01T10:58:39Z")

</div>

Hi Yoaan,

Unfortunately it’s not possible to do more than one level deep of nested threads at the moment.

That is to say you could have [mydomain.com/category/dynamic-uid](http://mydomain.com/category/dynamic-uid) in the link resolver, by using fetchlinks:  
[https://prismic.io/docs/reactjs/query-the-api/fetch-linked-document-fields](https://prismic.io/docs/reactjs/query-the-api/fetch-linked-document-fields)  
**NOTE:** You must be using V2 of the api for this to work.

but not the more complex [mydomain.com/parent-category/category/dynamic-uid](http://mydomain.com/parent-category/category/dynamic-uid) .

Although we are working on a new more intelligent link resolver, for the Static SSR technologies like Nuxt, Next & Gatsby, that would allow you to easily create complex nested URLs like this. I will be sure to keep you updated with the progress of this.

For now one solution that could work, though not perfect, is to use the document tags to create the third level, so in Prismic your tag on the document would be ‘hub’ then in the link resolver you could use that to create the third level.

```auto
if (
  doc.tags.includes('hub')
) {
  return `/hub/${doc.data.relationlink.data.name}/${doc.uid}`
} 

```

Then you would repeat this in the linkresolver for every parent category. I know it’s not great but until we release the new resolver it’s a good solution.

Let me know if you have any further questions about this.

Thanks.

---

<div class="post-metadata">

**Author:** ![yoann](https://avatars.discourse-cdn.com/v4/letter/y/5fc32e/32.png) [@yoann](https://community.prismic.io/u/yoann)\
**Post date:** [April 1, 2020, 12:32pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/3 "2020-04-01T12:32:33Z")

</div>

Hey Phil,

Thanks for your answer. Infortunately, my hub and chapter are slug too and dynamic too 🙂

And I already use fetchLinks, but I’m not sure that I got my chapter\_link from my article in LinkResolver, I will check for this point.

Tag can be usefull, I can just add my tag which is same as my hub slug to simulate one level, not perfect ☹

---

<div class="post-metadata">

**Author:** ![yoann](https://avatars.discourse-cdn.com/v4/letter/y/5fc32e/32.png) [@yoann](https://community.prismic.io/u/yoann)\
**Post date:** [April 1, 2020, 12:43pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/4 "2020-04-01T12:43:18Z")

</div>

Just check, I got my chapter\_link in my article when I fetch one article.

But I don’t get it in my LinkResolver which analyze my content from my RichText element. Or am I missing something ?

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 1, 2020, 1:28pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/5 "2020-04-01T13:28:25Z")

</div>

Ah sorry I wasn’t clear. Your content relationship field needs to be a unique field in the top level of your document, you can’t get the content through a link in a Rich Text field.  
[https://prismic.io/docs/reactjs/query-the-api/query-by-content-relationship](https://prismic.io/docs/reactjs/query-the-api/query-by-content-relationship)

---

<div class="post-metadata">

**Author:** ![yoann](https://avatars.discourse-cdn.com/v4/letter/y/5fc32e/32.png) [@yoann](https://community.prismic.io/u/yoann)\
**Post date:** [April 1, 2020, 1:40pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/6 "2020-04-01T13:40:30Z")

</div>

Yes that’s my main problem, not accessing through a link in a Rich Text field ☹

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 1, 2020, 1:54pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/7 "2020-04-01T13:54:27Z")

</div>

Unfortunately that won’t be possible then.

---

<div class="post-metadata">

**Author:** ![john1](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@john1](https://community.prismic.io/u/john1)\
**Post date:** [August 10, 2020, 4:54pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/8 "2020-08-10T16:54:08Z")

</div>

@Phil - did you all ever make an improved resolver? This would be very useful.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [August 10, 2020, 4:58pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/9 "2020-08-10T16:58:06Z")

</div>

Hi John,

Unfortunately not, we’ve have only managed to implement this for our Nuxt users so far. Although this is something that we are working on for Next.js users and hope to release it in Beta in the near future.

Once we have any update about this we’ll update you here.

Thanks.

---

<div class="post-metadata">

**Author:** ![john1](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@john1](https://community.prismic.io/u/john1)\
**Post date:** [August 11, 2020, 6:58pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/10 "2020-08-11T18:58:15Z")

</div>

@Phil - thanks. I’ve come up with creative solutions for this issue on the project I’m working with.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [August 12, 2020, 9:30am UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/11 "2020-08-12T09:30:56Z")

</div>

We’d be happy to see your solutions if you feel comfortable sharing?

---

<div class="post-metadata">

**Author:** ![markadsdeild](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/markadsdeild/32/667_2.png) [@markadsdeild](https://community.prismic.io/u/markadsdeild)\
**Post date:** [August 12, 2020, 11:08am UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/12 "2020-08-12T11:08:52Z")

</div>

Is there any technical detail on how this was implemented in Nuxt.js and not next.js. Is this something we could take a look at porting over to Next.js ourselves?

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [August 12, 2020, 2:31pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/13 "2020-08-12T14:31:23Z")

</div>

Hi Markaðsdeild,

Unfortunately this is not something that you can port yourselves as it’s something that is implemented specifically on Slice Machine repositories and can only work for Nuxt projects for now, the technical docs for that are below.

Although the team is going to hopefully make this possible for Next soon.

> **[Slice Machine](https://www.slicemachine.dev/documentation/nuxt/link-resolver/#linkresolver-js-examples)**
>
> Devs make the parts, users make the websites.

So for now for other users the only way to do nested paths is how I described above with a content relationship field and to get that data in the linkresolver:

```auto
if (
  doc.tags.includes('hub')
) {
  return `/hub/${doc.data.relationlink.data.name}/${doc.uid}`
} 

```

---

<div class="post-metadata">

**Author:** ![john1](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@john1](https://community.prismic.io/u/john1)\
**Post date:** [August 19, 2020, 5:47pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/14 "2020-08-19T17:47:44Z")

</div>

I’ve got ideas I’m working through but very disappointed with your documentation. This platform is highly unique and poorly documented.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [August 31, 2020, 11:40am UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/15 "2020-08-31T11:40:13Z")

</div>

Hey John,

I’m sorry to see you feel that way. We are working on improving our documentation so that we can make it more intuitive to find information. Is there anything else other than nested paths that you need help with?

---

<div class="post-metadata">

**Author:** ![jaiew](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jaiew/32/784_2.png) [@jaiew](https://community.prismic.io/u/jaiew)\
**Post date:** [September 7, 2020, 3:40pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/16 "2020-09-07T15:40:16Z")

</div>

There is a work around that you can do until it’s better supported but you can process the RichText data before you return it from your prismic service.

For example if you have a RichText that has a Link to an article and that article is using a two level link where the first part of the link is based on some data within the article the below code can update the hyperlink span in the Richtext data with a “resolvedUrl”.

```
/**
 * Parses the RichText value from Prismic and finds each hyperlink item and resolves the link
 */
static async resolveDynamicLinksInRichText(richText) {

  return Promise.all(richText.map(async (richTextElement) => {
    if (richTextElement.spans) {
      const spans = await Promise.all(richTextElement.spans.map(async (span) => {
        if (span.type === 'hyperlink') {
          const data = await this.resolveDynamicLink(span.data);
          return { ...span, data };
        } else {
          return span;
        }
      }));
      return { ...richTextElement, spans };
    } else {
      return richTextElement;
    }
  }));
}

/**
 * Resolves links that have multiple levels that is not currently possible in Prismic.
 */
static async resolveDynamicLink(doc) {
  if (doc.link_type && doc.link_type === 'Web') {
    return doc;
  }

  switch (doc.type) {
    case 'blog_post':
      const post = await this.getBlogPostByUid(doc.uid);
      return { ...doc, resolvedUrl: linkResolver(post) };
    default:
      return doc;
  }

}

```

An example of using it would be something like:

```
const resolvedRichtext = await resolveDynamicLinksInRichText(doc.rich_text_field)

```

Then in your linkResolver method you can check the existence of the `resolvedUrl` and return that or fallback on your normal link resolving.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [September 15, 2020, 4:45pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/17 "2020-09-15T16:45:25Z")

</div>



---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [November 25, 2020, 12:07pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/18 "2020-11-25T12:07:24Z")

</div>



---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [November 25, 2020, 12:08pm UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/19 "2020-11-25T12:08:24Z")

</div>

Hey everyone,

Just so you know the Route Resolver is available for Next.js projects on Slicemachine repositories.

> **[Slice Machine](https://www.slicemachine.dev/documentation/nuxt/route-resolver/)**
>
> Devs make the parts, users make the websites.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [December 3, 2020, 11:48am UTC](https://community.prismic.io/t/linkresolver-and-nested-paths/96/21 "2020-12-03T11:48:22Z")

</div>



[Next page](https://community.prismic.io/t/linkresolver-and-nested-paths/96.md?page=2)