Link Resolving

When working with field types such as a Link or a Rich Text in a Gatsby project and because routing is specific to your site, you will need to define all your routes in a Link Resolver function and pass it to any methods or fields that require it.

1. Create the Link Resolver

Start by creating the /src/utils/linkResolver.js file. This example helps to dynamically resolve your page routes for three document types (category, product, and page). You will need to adapt it or write your own depending on the routes on your own website.

Copy

export const 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 '/'
}

module.exports = linkResolver

2. Register it in your Gatsby configuration

Register your newly created Link Resolver in the Gatsby configuration file: gatsby-config.js file to make it available for your routes and Link fields. See the following example:

Plugin configuration
Full gatsby-config.js example

Copy

const linkResolver = require('./src/utils/linkResolver')

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: 'your-repo-name',
        linkResolver: () => (doc) => linkResolver(doc),
        // here goes all your other plugin configuration
      },
    },
  ],
}

Copy

const linkResolver = require('./src/utils/linkResolver')

module.exports = {
  siteMetadata: {
    title: 'Gatsby + Prismic Site',
    description: 'Learn how to integrate Prismic into your Gatsby project.',
  },
  plugins: [
    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: 'your-repo-name',
        linkResolver: () => (doc) => linkResolver(doc),
        schemas: {
          page: require('./custom_types/example_page_type.json'),
        },
      },
    },
  ],
}

⚠️ Update the repositoryName

Make sure that you update the repositoryName to match the URL of the Prismic repository created earlier in this article. To find this, go to your Prismic dashboard, then to your repository.

If the URL for your repository is https://my-awesome-repository.prismic.io, you'll need to replace 'your-repo-name' above with 'my-awesome-repository'.

Using the Link Resolver in a full example

Now let's see how you can use the Link Resolver we previously created and registered in your Gatsby project.

Copy

import React from 'react'
import { graphql, Link } from 'gatsby'
import { RichText } from 'prismic-reactjs'
import { linkResolver } from './example_path_to_linkResolver'

const GatsbyLink = (type, element, content, children, index) => {
  if (element.data.link_type === 'Document') {
    return (
      <Link to={linkResolver(element.data)} key={element.data.id}>
        {content}
      </Link>
    )
  }
  return null
}

const Page = ({ data }) => {
  if (!data) return null
  const document = data.allPrismicPage.edges[0].node.data

  return (
    <>
      <h1 className="page-title">
        {document.title.text}
      </h1>
      <RichText
        render={document.description.raw}
        serializeHyperlink={GatsbyLink}
      />
    </>
  )
}

export const query = graphql`
query MyPages {
  allPrismicPage(uid: "example_uid"){
    edges {
      node {
        data {
          title {
            text
          }
          description {
            raw
          }
        }
      }
    }
  }
}
`

export default Page