I have solved this by adding trailing slashes to the urls in the link resolver like in the code below. I came to this solution after reading a line from the solution in this article:
I can't find anywhere in the docs why the preview component redirects with a trailing slash for unpublished previews but I am glad I finally figured it out.
The documentation and tutorials for previews with gatsby + prismic seems phenomenally disjointed, over-complicated and inconsistent across various official sources. I suppose this will only be made worse by Prismic dropping support for the Gatsby plugins as per this article (Gatsby + Prismic v6: Faster and Simpler). It also seems fairly heavy handed to replace all the links to docs with a redirect to that page. Makes finding resources on the preview pages close to impossible!
const linkResolver = (doc) => {
// Pretty URLs for known types
if (doc.type === "project") return `/${doc.lang}/work/${doc.uid}/`;
if (doc.type === "story") return `/${doc.lang}/stories/${doc.uid}/`;
if (doc.type === "person") return `/${doc.lang}/people/${doc.uid}/`;
if (doc.type === "homepage") return `/${doc.lang}/`;
if (doc.type === "employment") return `/${doc.lang}/employment/`;
if (doc.type === "practice") return `/${doc.lang}/practice/`;
// Backup for all other types
return `/${doc.lang}`;
};
module.exports = linkResolver;