(Gatsby) Flash of 404 page when previewing unpublished content

Developing with Prismic
1

gatsby@5.12.4
gatsby-source-prismic@6.0.1
gatsby-plugin-prismic-previews@6.0.1

When we are previewing new (unpublished) content we are seeing the 404 page component for a moment or two before it redirects to the content template. Is there some way of preventing this?

404.js

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

const PageNotFound = () => {
  return (
    <div className="pb-16 2xl:pb-32">
      {/* Page markup... */} 
    </div>
  );
};

export default withPrismicUnpublishedPreview(PageNotFound);

The component below is imported into gatsby-ssr.js and gatsby-browser.js.

wrapRootElement.js

import React from 'react';
import { PrismicPreviewProvider } from 'gatsby-plugin-prismic-previews';
import { repositoryConfigs } from './prismicPreviews';

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

prismicPreviews.js

import { linkResolver } from './utils/linkResolver';

import ArticleTemplate from './templates/post';
import StoryTemplate from './templates/story';

export const repositoryConfigs = [
  {
    repositoryName: 'myRepo',
    linkResolver,
    componentResolver: {
      article: ArticleTemplate,
      story: StoryTemplate,
    },
  },
];

Thanks!!

2

Hi @ldevitt ,

Unfortunately, there's no way to prevent this as this is the expected behaviour. Because the document is unpublished, there is no permanent URL based on the UID available yet, so the preview system needs to hit the 404 page to find the Link Resolver and therefore find the correct file based on the type for the document to create a page.

Thanks.