Unpublished previews not working

Developing with Prismic
14

Hi @customerservice,

I'm Angelo, the developer of the Gatsby plugins.

Everything you provided looks technically correct. Since you are seeing isBootstrapped: true in <PrismicPreviewProvider>, that means the plugin is correctly connecting to your Prismic repository and pulling all previewed documents.

The only difference I see between your Page.tsx and 404.tsx pages is the way the Prismic repository is passed. Can you confirm that you are passing the correct repository name on 404.tsx (do you use a different Prismic Repository name during production?)?

{
  repositoryName: process.env.PRISMIC_REPOSITORY_NAME || 'boxinc',
}

I tried console logging the nodes argument given to the componentResolver function, that returned an empty array, which doesnt sound right to me.

This is the reason your 404 page renders your normal 404 page and not the previewed document.

The list of matching nodes is used to determine which template to render. If you are using the componentResolverFromMap helper function, it automatically uses the first node in the list and matches its type to your template map. If you need more granular control, you can write your own function that returns a React component to render.

Since your node list is empty, withPrismicUnpublishedPreview does not have a template component to render.

The list of matching nodes is determined using the following:

  • When all documents are fetched from your repository during a preview session, it resolves its URL using your Link Resolver and assigns it to its url field. The Link Resolver provided to withPrismicPreview and withPrismicUnpublishedPreview is used.
  • When your 404 page is rendered with withPrismicUnpublishedPreview, it uses the current URL to find nodes with matching URLs.

Image you have the following documents in your repository which return the following URLs:

  • Page 1 => /page-1
  • Page 2 => /page-2
  • Blog Post 1 => /blog/post-1
  • Blog Post 2 => /blog/post-2

Now imagine you write a blog post and preview it before publishing it (i.e. an unpublished preview)

  • Blog Post 3 => /blog/post-3 (unpublished)

When you click the preview button, you should land on your /preview page. This will redirect you to /blog/post-3, which is a 404 page since it does not exist on your site.

The 404 page will look at the URL and find a document that matches. It finds Blog Post 3, sees that it is a blog_post type, and renders the BlogPost template provided to withPrismicUnpublishedPreview.

The result of the Link Resolver for the unpublished document must match the URL you land on.

If this explanation does not help solve the issue, I can take a look at your project's code and run it locally. You can send your code to me in a private message if you are comfortable with that.