Unpublished previews not working with Gatsby, Prismic and Netlify

Developing with Prismic
1

Hi,

I have read all posts related to this issue and can't find an answer anywhere. We have previews working for published documents but we are getting a 404 for all unpublished documents. I am struggling with debugging it. Any help would be appreciated.

We are using:
gatsby: 5.11.0
gatsby-source-prismic: 6.0.0
gatsby-plugin-prismic-previews: 6.0.0
react: 18.2.0

Our relevant files:
404.js

import * as React from 'react'
import {withPrismicUnpublishedPreview} from 'gatsby-plugin-prismic-previews'

const NotFoundPage = () => {
  return (
      <div>
        <h1>Not found</h1>
      </div>
  )
}

export default withPrismicUnpublishedPreview(NotFoundPage);

gatsby-browser.js and gatsby-ssr.js

import * as React from "react";
import {
  PrismicPreviewProvider,
} from "gatsby-plugin-prismic-previews";

import linkResolver from "./src/utils/linkResolver";
import {lazy} from "react";

const repositoryConfigs = [
  {
    repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
    linkResolver,
    componentResolver: {
      project: lazy(() => import('./src/templates/ProjectPage')),
      story: lazy(() => import('./src/templates/StoryPage')),
      homepage: lazy(() => import('./src/templates/HomePage')),
      practice: lazy(() => import('./src/templates/PracticePage')),
      person: lazy(() => import('./src/templates/PersonPage')),
      employment: lazy(() => import('./src/templates/EmploymentPage')),
    },
  },
]

export const wrapRootElement = ({element}) => (
  <PrismicPreviewProvider repositoryConfigs={repositoryConfigs}>
    {element}
  </PrismicPreviewProvider>
);

gatsby-config.js

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
});
const linkResolver = require("./src/utils/linkResolver");

const routes = [
  {
    type: 'project',
    path: '/:lang/work/:uid',
  },
  {
    type: 'story',
    path: '/:lang/stories/:uid',
  },
  {
    type: 'homepage',
    path: '/:lang',
  },
  {
    type: 'practice',
    path: '/:lang/practice',
  },
  {
    type: 'person',
    path: '/:lang/people/:uid',
  },
  {
    type: 'employment',
    path: '/:lang/employment',
  },
]


module.exports = {
  flags: {
    DEV_SSR: false,
  },
  plugins: [
    {
      resolve: "gatsby-source-prismic",
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        customTypesApiToken: process.env.PRISMIC_CUSTOM_TYPES_API_TOKEN,
        linkResolver,
        routes: routes,
      },
    },
    {
      resolve: "gatsby-plugin-prismic-previews",
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        linkResolver,
        routes: routes,
      },
    },
  ],
};

link-resolver.js

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;

I feel like I have tried every combination of setup from every one of the related posts in this community as well as all the various documentation articles. Banging my head against a brick wall on this one.

2

What do you see in the 404 page when opening the preview?
If you open it in dev mode and you see the Gatsby development 404 page, Click the “Preview custom 404 page” button. You should see the preview appear

4

@Pau Thanks for your reply. Yes, we have gone through that but we just get our 404 page (ie. Not found in a h1, as per our custom 404 template).

5

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;