withUnpublishedPreview Not Working On Gatsby/Netlify Deployment

Developing with Prismic
1

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?

3

[SOLVED + CORRECTION]

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