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
Hi, @tim2. How were you able to get your content updating? It looks as though I have everything configured correctly and I am not using gatsby-image or sharp on the site, but my previews aren’t being populated with my changes in the CMS.
Hi Devon,
Have you checked out our preview troubleshooting article:
Or the previews in Gatsby documentation?
https://prismic.io/docs/gatsby/misc-topics/previews
One thing to know is, if your repo is set to private, then currently previews will not work.
Hi, Phil. Yes, I have gone over both multiple times and searched for whatever I thought would be pertinent here in the forum. And my repo is not private.
I thought perhaps since Tim there seemed to have potentially had the same issue I am dealing with, he may be able to help.
The search continues!
I just had this problem myself too, finally after a day of debugging I found the issue. I made a more detailed post about this here: Prismic Preview stuck on loading Gatsby-Plugin-Image.
My issue was that I was using Gatsby-Plugin-Image to display the images that came from Prismic. Prismic Preview uses the page template file to render its content, so the preview tried to use the local image processing that Gatsby Plugin Image provides, but it must happen on build time, so the render failed.
I fixed it by using a conditional render to display a regular <img> element on Prismic Preview mode, while all regular users get an optimized Gatsby-Plugin-Image image. I did it by making the conditional render check if GraphQL can access the path localFile.childImageSharp, which is used by Gatsby Plugin Image. If it can't, then display a regular <img> element.
Here's my working code. If you can't grasp the issue, you might want to read my longer post for the logic that I used.
{slice.primary.hero_background_image.localFile?.childImageSharp?.gatsbyImageData != null ?
<GatsbyImage
image={slice.primary.hero_background_image.localFile?.childImageSharp?.gatsbyImageData}
alt={slice.primary.hero_background_image.alt}
/>
:
<img
className="gatsby-image-wrapper"
src={slice.primary.hero_background_image.url}
alt={slice.primary.hero_background_image.alt}
/>
}
I don't see any issue with this strategy, other than a bit larger and more complex template file. This conditional check should only happen on both Gatsby build time and the Prismic Preview page loading.
Hi Jere,
Thanks a lot for pointing this out and offering this solution. This should help a lot of people.
Another thing to consider is that images coming form Prismic are already compressed/optimised automatically with our Imgix integration and so it might not be necessary to use Gatsby Image with your Prismic images. This could also resolve the issue you were seeing.
Thanks.