withUnpublishedPreview Not Working On Gatsby/Netlify Deployment

I'm deploying a Gatsby project on Netlify using the 'gatsby-source-prismic' plug-in.

For context, I'm just running some initial tests with Prismic before integrating into a production project.

I currently have a simple Prismic repo with an "article" custom type and two documents within it-- one of the documents is published, the other is simply a draft which I am trying to preview.

As per the instructions I have a 404 page which is exported in the withUnpublishedPreview HOC. My custom type id is "article" hence the templateMap properties.

const NotFoundPage = () => (
  <Layout>
    <h1>Page not found!</h1>
  </Layout>
)

// If an unpublished `page` document is previewed, PageTemplate will be rendered.
export default withUnpublishedPreview(NotFoundPage, {
  templateMap: {
    article: TestArticle,
    prismicArticle: TestArticle,
  },
})

The TestArticle component is using the withPreview HOC to merge preview data with published.

const TestArticle = ({ data }: any) => {
    console.log(data)
    return ( <div dangerouslySetInnerHTML={{ __html: article_title.html }}></div>)
}

export const query = graphql`
  query($uid: String) {
    prismicArticle(uid: { eq: $uid }) {
      data {
        article_title {
          html
        }
      }
    }
  }
`

export default withPreview(TestArticle)

When I navigate to my production draft/404 page from Prismic, the url contains parameters like documentId, token, etc. But I'm simply met with a 404 page and no console log.

The programmatic page building for the published article works fine. Preview/draft does not.

Any ideas what's going on here?

[SOLVED + CORRECTION]

You need both the withPreview and withUnpublishedPreview components to be set up in order to view draft pages.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.