Gatsby Prismic Preview not showing edits

I’m using Gatsby and Prisimic with the gatsby-source-prismic-graphql plugin.

I can’t seem to get Prisimic to show updated content in the Preview.

In Prismic, I have localhost:8000 and /preview set in the Preview settings. In gatsby-config I have preview set to true and path set to /preview.

When I edit a live post and save (but not publish the change) I do not see the edit in preview.

Any idea what is wrong?

Hi @teamcrisis, sorry, I’m not sure what the issue might be without taking a closer look at everything. Can you send your project files so that I can test things here and investigate what the issue might be? You can either send me a zip file of your project or a link to Github. If you don’t want to share it publicly, you can send me a DM and I’ll be happy to take a look.

@levi Thanks for the help. I can’t seem to find a way to DM. Do I have that functionality as a new user?

I just sent you a DM, so you should be able to respond to that now.

I took a look at your project and wasn’t able to figure out why the previews aren’t working. So I’ve passed this over to our dev team to investigate. Someone there will look into this as soon as they are able and get back to you with what they find.

Ok, thank you for the help. I’ve been stuck on the issue for a while myself, so hopefully, it’s just something simple.

I’m also having problems with having previews showing the latest content. I have also checked this thread out, but no resolution unfortunately.

@levi do you have any updates to this issue?
Thanks!

I’ve been doing some research on the preview functionality in Gatsby as well, and I’m currently stuck.

I think I’ve found a way to make it work.

A common reason for why previews break, is because Prismic does not support the gatsby-transformer-sharp plugin. And they don’t seem to plan on doing so anytime soon.

However, there’s a work around.

We can conditionally include parts of a graphql query in gatsby, by using a directive.
That means we can utilize the gatsby-node.js lifecycle hook onCreatePage to introduce a context variable, that indicates whether or not the build is production or not. We can then use an environment variable to include or exclude the imageSharp-part of our queries.

.env.production (or in your CI)

GATSBY_ACTIVE_ENV=production

gatsby-node.js

exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions

  if (typeof page.context.isProduction === 'undefined') {
    const newPage = {
      ...page,
      context: {
        ...page.context,
        isProduction: process.env.GATSBY_ACTIVE_ENV === "production", // allows for reviews
      },
    }

    deletePage(page)
    createPage(newPage)
  }
}

src/templates/page.jsx

import React from 'react'
import { graphql } from 'gatsby'

function Page({ data: { prismic: { page } }, ...props }) {
  if (!page) return null // Needed for preview pages not to break
  return (
    <Layout>
      <Content content={page.page_title} />
      <Content content={page.content} />
      {page.imageSharp ? (
        <Img fixed={page.imageSharp.childImageSharp.main} />
      ) : (
        <img src={page.image.url} alt={page.image.alt} />
      )}
    </Layout>
  )
}

export const query = graphql`
  query PageQuery($lang: String!, $uid: String!, $isProduction: Boolean!) {
    prismic {
      page(lang: $lang, uid: $uid) {
        content
        page_title
        image
        imageSharp @include(if: $isProduction) {
          childImageSharp {
            id
            main: fixed(width: 1200) {
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

However, this does not work as the query is invalid on Prismics graphql endpoint. It does not allow custom variables such as isProduction.

I have made a small repository that reproduces the issue here: https://github.com/MadsMadsDk/prismic-preview-i18n-gatsby-test

@mads I tracked down the issue to a change which prevents the plugin from properly removing imageSharp before making the preview request to gatsby.

You can try changing that line locally and see if that fixes the issue.

Did this change fix the issue? I have the same issue (getting 500 error when loading preview), I found when I remove all imageSharp graphql queries then preview functionality works. I updated my package version which got rid of the 500 errors but then I ended up with a different error but preview still didn’t work.

Hi There,

I am also having issues with preview. Everything works fine and I can even see the preview side bar, but the content is not updated.

The preview seems to be working but the content is never updated. Does someone know what might be happening? I went through the documentation and following everything but it doesn’t seem to work.

Here is the screenshot of the left sidebar but the content is not being updated though:

Hi Tim,

Welcome to community!

Can you tell me if your repository is set to private? Also are you are using image sharp in your project?

Thanks.

Hey Phil,

Sorry, I removed my two previous posts and can’t get it back!

Following up, I managed to get it working but facing the same problem as everyone with gatsby sharp image.

Trying to find a workaround at the moment