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.
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.
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
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
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
},
},
],
}
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'.
Now let's see how you can use the Link Resolver we previously created and registered in your Gatsby project.
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