Preview unpublished pages

Hello there.
Have been working on my side project to learn some Prismic and Gatsby. And now I'm kind of stuck again.
I got preview to work. That is a good thing. However, if I want to create a new page or a new link in my navbar it is not possible to preview the page or the link before it's published.
I think it might have something to do with the withPrismicUnpublishedPreview HOC on my 404 page. Perhaps. Can't find that much documentation since my versions of gatsby-source-prismic and gatsby-plugin-prismic-previews are beta-versions.

Have a look at my repo and give me some leads if you mind!
Have a nice day!

https://github.com/FagerKod/prismiclab

Hi @jimmy.fagerberg,

You should be able to preview any content, including unpublished documents that may be "supplementary" such as navigation links. To accomplish this, your Link Resolver and withPrismicUnpublishedPreview HOC should be setup accordingly.

(When I mention "navigation document", I mean any document you are using to manage your navbar.)

Depending on how you query for your navigation documents, you may also need to run useMergePrismicPreviewData (this isn't documented on GitHub but will be included in the updated documentation on prismic.io).

Your Link Resolver could be set up like this. See the navigation case.

// src/linkResolver.js

exports.linkResolver = (doc) => {
  switch (doc.type) {
    case 'page': {
      return `/${doc.uid}`
    }

    // Note that if a Navigation document is previewed, we will be sent to the
    // homepage. We do this since a navigation document doesn't map directly
    // to a page on the site. Instead, it is used throughout the site, such
    // as in a shared Layout component.
    case 'navigation': {
      return '/'
    }

    default: {
      return '/'
    }
  }
}

Since previewing a navigation document will send editors to the homepage, there is no need to include it withPrismicUnpublishedPreviews. That HOC is designed for custom types that have dedicated pages/templates within your site.

If you use Gatsby's useStaticQuery or <StaticQuery> to fetch your navigation links, you will need to ensure the query include _previewable and uses useMergePrismicPreviewData immediately after getting the result.

import { graphql, useStaticQuery } from 'gatsby'
import { useMergePrismicPreviewData } from 'gatsby-plugin-prismic-previews'

const NavBar = () => {
  const rawData = useStaticQuery(graphql`
    prismicNavigation {
      _previewable
      data {
        # Your fields...
      }
    }
  `)
  const data = useMergePrismicPreviewData(rawData)

  // `data` now contains previewed Navigation data!
}

Thank you for using the beta! If you have any feedback, please feel free to share it.

The official documentation is being updated to reflect gatsby-source-prismic V4 and gatsby-plugin-prismic-previews so you will see better documentation soon.

1 Like

This thread has been closed due to inactivity. Flag to reopen.