How/Where to use LinkResolver vs RouteResolver

Good day all. I'm currently using Prismic and NextJS with slicemachine. Love it. I am reading the documentation and seeing that linkResolver is something that can handle more complex paths than the route resolver method.

As the prismic setup documentation has us using routeresolver by default, I'm not seeing how nor where I would implement the linkResolver in place of the routeresolver.

As seen in the code below, the routes array is passed to the createClient method.
The docs say that if the project uses a linkResolver and a RouteResolver the linkResolver will be used. Where do I put it? How/Where/When is it called?

Thank you!

... // prismicio.js
const routes = [
  {
    type: 'homepage',
    path: '/',
  },
  {
    type: 'post',
    path: '/blog/:uid',
  },
  {
    type: 'page',
    path: '/:uid',
  },
]
export const linkResolver = (doc) => {
  switch (doc) {
    case doc.type === 'homepage':
      return `/`
    case doc.type === 'post':
      return `/blog/${doc.uid}`
    case doc.type === 'page':
      return `${doc.uid}`
    default:
      return `/`
  }
}
/**
 * Creates a Prismic client for the project's repository. The client is used to
 * query content from the Prismic API.
 *
 * @param config {prismicNext.CreateClientConfig} - Configuration for the Prismic client.
 */
export const createClient = (config = {}) => {
  const client = prismic.createClient(sm.apiEndpoint, {
    routes,
    ...config,
  })

  prismicNext.enableAutoPreviews({
    client,
    previewData: config.previewData,
    req: config.req,
  })

  return client
}

Hello @nf_mastroianni, thanks for reaching out.

While there may be some cases where the Route Resolver doesn't cover everything, it's actually our top recommendation because it can handle the most common use cases and is also user-friendly.

We have a specific case about internationalization. Here, the Link Resolver is a great option. To use it you can add it in the prismicio.js configuration file or a separate linkResolver.js file and reference it whenever you need it.

Overall, for most situations, the Route Resolver should have you covered!

@Pau, Thank you for the prompt response.
My goal is to be able to provide editors the ability to add multiple "subdirectories" so as to be able to match the URLs that they desire.

You wrote this guide on hierarchical content which gave me the hope that I could make this work.

In particular, your statement that:

To allow a child document to have multiple parents or categories, modify the child custom type:
Add a Group field
Add a Content Relationship field inside the group
This will allow you to add as many parents or categories.

I now believe it must be possible. When I look at the route resolver docs though, I don't see how I could have more than 1 subdirectory (or parent folder) for a page.

...
// prismicio.js with route resolver configured for 1 optional content relationship in the slug
{
    type: 'page',
    path: '/:subdirectory?/:uid',
    resolvers: {
      subdirectory: 'subdirectory',
    },
  },

Also, I believe (and perhaps you can confirm) that this won't work within the file below

/pages/[uid].js

Instead, it must be in a catch all

/pages/[...uid].js

I look forward to your wisdom/experience on this!

-Neil

Thanks for sharing more details about your use case!
The max depth of the Route Resolver is three levels: Grandparent > parent > document. Here's an example:

{
  type: 'page',
  resolvers: {
    team: 'team',
    coach: 'team.coach',
  },
  path: '/about-us/:team/:coach/:uid',
}

You can find more details about this in the Route Resolver API option technical reference:

I haven't personally tried the catch-all option but I'm guessing it would work just fine, from what I can see in Next's official docs:

I suppose at this moment, I must ask: Do you have an example in GitHub somewhere? I'd love to see how this is achieved without using a [...uid] catch-all file.

None of our starter projects uses this setup.
I'll add a note to our backlog. We could use it in future examples. :+1:

1 Like