Is it possible to preview never-published unpublished content?

Developing with Prismic
1

I just want to make sure, I do see references to previewing 'unpublished content' but it's unclear if that's in reference to unpublished changes to an already-before published piece of content. I'm using gatsby-source-prismic-graphql, and it seems my previews work fine for previewing changes to all already-published content, but if creating, for example, a new Post content item whose data is used to generate a post page at URL /post/example-post, the preview returns the 404 page, though at its 'correct' future URL. Is there no way around this?

I understand the possibility of technical limitations here but multiple clients have felt like this was a core betrayal of what they'd use the preview functionality for (i.e iterating on un-published blog posts without having to use their imagination looking at the content item fields).

1 Like
5

Hello!

It is possible to preview never published documents with Gatsby. if you have already added all the needed configuration for the previews and have tested it to see if it works with any other document, try updating the plugin to the latest version.

Also, there’s a parameter in the page’s configuration dedicated to create a path for unpublished documents. In the plugin, it’s called ‘path’. e.g:

 {
  resolve: `gatsby-source-prismic-graphql`,
  options: {
    repositoryName: repo[1], // Loads the repo name from prismic configuration
    path: '/preview',
    previews: true,
    pages: [{
      type: 'Post',
      match: '/blog/:uid',
      path: '/blog-preview',
      component: require.resolve('./src/templates/post.js')
    }]
  }
},
6

Hi Paulina, thank you for your reply! The pages object does seem similar to other documentation that I had seen, though unfortunately it still does not seem to be picking up the data. My gatsby-config plugin looks as follows, very similar to your example:

{
  resolve: 'gatsby-source-prismic-graphql',
  options: {
    repositoryName: 'SITE_NAME',
    accessToken: process.env.API_KEY,
    previews: true,
    path: '/preview',
    pages: [{
      type: 'Post',
      match: '/post/:uid',
      path: 'post-preview',
      component: require.resolve('./src/templates/post.jsx')
    }],
  },
},

However, gatsby build fails with Building static HTML failed for path "/post-preview", seemingly at where, in post.jsx, I assign the graphql data for use in the template, ie const post = props.data.prismic.postPost.edges[0].node; where it there’s the webpack error WebpackError: TypeError: Cannot read property 'node' of undefined.

Possibly I’m missing something about how ‘path’ in the plugin should be formatted? Is there a special way the graphql must be formatted in the template to allow this? Is ‘pages’ in the plugin where all templates are rendered or is it purely for previews? At the moment, our gatsby-node handles all multi-content page generation.

edit: That aside, even when all gatsby-node page generation is removed, the same error comes through for Post as before.

7

Hey @dev!

  1. The way your plugin is configured is correct, so it's weird that you're having this issue.

  2. About the webpack error. You need to add a validation that will check if the response is valid. If not, you need to return null: if (!prismicContent) return null. This check will prevent your application from breaking during the website build.

  3. There's no specific way of formatting the template itself.

  4. Yes, 'pages' is where all Dynamic pages are generated with the help of the plugin. Take a look at this other thread where i answered the difference of creating pages in both ways:

8

Thank you very much! With this answer I was able to make a solid foundation for the fix; the null check was integral, along with several other minor problems on individual types that were causing previews to silently fail while not causing an error in gatsby build. Thanks again for your support!