Hi!
I'm having some problems with getting page links in Prismic and Gatsby to work properly.
I'm using a linkResolver as described in the docs and it works in terms of directing to the correct pages, but the transition is not instant. When I'm using the Link component provided by Gatsby in a project without Prismic, it switches in an instant. The behavior is especially visible because I have a dark mode implemented which colors the background dark, so every time I click on a link there's a flash of white.
I think the problem is with Prismic's link handling here, but I already tried everything regarding restructuring the linkResolver or linking directly to pages using the Gatsby Link component.
The linkResolver in my gatsby-config.js looks like this:
{
resolve: "gatsby-source-prismic",
options: {
repositoryName: "...",
lang: "*",
linkResolver: () => (doc) => linkResolver(doc),
schemas: {
home: require("./src/schemas/home.json"),
layout: require("./src/schemas/layout.json"),
about: require("./src/schemas/about.json"),
contact: require("./src/schemas/contact.json"),
product: require("./src/schemas/product.json"),
page: require("./src/schemas/page.json"),
404: require("./src/schemas/404.json"),
},
},
},
This is the linkResolver itself:
const linkResolver = doc => {
const defaultLanguage = "en-us"
switch (doc.type) {
case "home":
return doc.lang === defaultLanguage ? "/" : `/${doc.lang.slice(0, 2)}`
case "about":
case "contact":
case "page":
case "product":
return doc.lang === defaultLanguage
? `/${doc.uid}`
: `/${doc.lang.slice(0, 2)}/${doc.uid}`
default:
return "/"
}
}
module.exports = linkResolver
And I use it in my components like this:
<Link to={linkResolver(item.link)}>{item.title.text}</Link>
I hope I explained my problem properly. I can also share my repo if needed.
Thanks in advance for any help!
Jennifer