Link Resolver

The Link Resolver will help you build your project URL routes and manage links in field types such as a Link or a Rich Text in a Gatsby project.

The Link Resolver helps you build the URLs for your site. Now let's take a look at how to create one and use it in your project.

1. Create a Link Resolver

Start by creating a 〜/src/utils/linkResolver.js file. Our example resolves page routes for three documents Custom Types (category, product, and page). Adapt it or write your own depending on the routes on your own website.

Copy

exports.linkResolver = (doc) => {
  // URL for a category type
  if (doc.type === 'category') {
    return `/category/${doc.uid}`
  }

  // URL for a product type
  if (doc.type === 'product') {
    return `/product/${doc.uid}`
  }

  // URL for a page type
  if (doc.type === 'page') {
    return `/${doc.uid}`
  }

  // Backup for all other types
  return '/'
}

2. Add it to the plugin

After you've created the link Resolver file, add it to the plugin configuration in the gatsby-config.js file. See how we do it in the following example:

Copy

// Truncated example gatsby-config.js file

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  // ... 
  plugins: [
    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        linkResolver: require('./src/utils/linkResolver').linkResolver,
        // ...
      },
    },
  ],
}

3. Usage

Now that the Link Resolver is created and registered in the plugin, the routes become available in the url field in the metadata of the documents in the queries.

For example, here we're getting the URLs for all the documents of the type Page:

Copy

query MyQuery {
  allPrismicPage {
    nodes {
      url
    }
  }
}

Then we'll use these urls to create dynamic pages and to resolve internal links

Create dynamic pages

Use the URLs to create dynamic pages. You can use Gatsby Node APIs or the File System Route API.

For instance with the File System Route API, if we have documents of the type Blog, and we create a file such as 〜/src/pages/{PrismicBlog.url}.js, the Link Resolver will create a unique URL path using each document's UID, like so: `/blog/${doc.uid}`.

Resolve internal links

To resolve internal links pass the url of a document query to a Gatsby link. For example, in this query we get the url of a Content Relationship field with the API ID of navigation_link:

Copy

query MyQuery {
  prismicPage {
    data {
      navigation_link {
        url
      }
    }
  }
}

Then we use the url in a Gatsby Link component:

Copy

import * as React from 'react'
import { Link } from 'gatsby'

export const InternalLink = ({ data }) => {
  const document = data.prismicPage.data
  return (
    <Link to={document.navigation_link.url}>
      <div className="logo">Example Site</div>
    </Link>
  )
}

If your link is inside a Rich Text field, you'll need to build a Custom Link component to resolve the output depending on the type of link. Learn more in the dedicated section of the Template Rich Text and Titles article

Links in Rich text fields

Create a custom serializeHyperlink for your Rich Text fields.

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.