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, 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.
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.
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.
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.
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?
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.
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:
if (
doc.tags.includes('hub')
) {
return `/hub/${doc.data.relationlink.data.name}/${doc.uid}`
}
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?
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;
}
}
