Open osamaaamer95 opened 4 years ago
We're experiencing this exact same issue as documented by @osamaaamer95
I created an issue on the community page
Hello everyone, The problem with the preview is working on runtime (after build). A workaround I did was to deploy it into Heroku, running on dev mode.
Hello everyone, The problem with the preview is working on runtime (after build). A workaround I did was to deploy it into Heroku, running on dev mode.
@jgcmarins sorry if I misunderstood, but you deployed a dev build on Heroku and previews are now working? Which platform were you using before (if any)?
I am deploying to netlify (the final gatsby build). It works perfectly, but without preview feature. I was able to make preview work only on dev mode, so, the workaround was to the deploy a running instance in dev mode into heroku. Now I have 2 sites running:
@jgcmarins did you use an official starter to set up Gatsby? If so, which one? I am trying to get a minimal reproducable repository in order to assess where the issue is.
I used Gatsby Starter Prismic
I believe that starter does not use gastby-source-prismic-graphql
Yep, then I refactored it and started using gastby-source-prismic-graphql
just because of the preview thing.
Experiencing the exact same problem. Published pages are being correctly previewed, but it doesn't work for unpublished ones. Looks like Gatsby is trying to get the published API (which makes sense), but the data isn't being overwritten by this plugin.
EDIT: If you create a page/article/whatever, publish it and then update it without publishing it, it works as expected.
Hey guys, we are working on fixing this at the moment on this PR
https://github.com/birkir/gatsby-source-prismic-graphql/pull/150
Hey, We just released a new version on npm this is an alpha version at the moment that will introduce changes in the configuration.
Let us know if this fixed the issue. ;)
I upgraded to 3.6.3-alpha.0 and I'm still seeing the issue where the old data persists on my preview page despite clicking save in prismic (this is for a currently published page where I've made updates that have not yet been published). When I look in Chrome's inspector I can see that the new data was indeed fetched under Network, but it never gets hydrated into the page.
I'm also seeing this in my console:
Unpublished pages just show a blank white page with the purple prismic box in the lower left. I see the same console error from above on these pages as well.
I'm also still experiencing problems.
Generally, I think it's a bit unclear how exactly this is supposed to be implemented. I miss a really simple example. None of the examples I've encountered have worked yet.
@Duaner could we get some clarity on what to do here (even a workaround). Unlike @jgcmarins I cannot even get previews working in develop mode. The lack of previews is currently holding up the development/launch of one of our projects.
I don't know if it is just bad timing. But after seeing Prismic boast some much about the hard work that went into providing Preview support in Gatsby, I moved my stack to Gatsby/Prismic. And now I find out that Preview doesn't work.
I'm not sure if this is a recent regression, or if it has been broken for a long time.
But it's frustrating that there is some much content out their hyping up this as a feature.
I hope that it will either be fixed soon, or the documentation will be updated to say that preview functionality is no longer supported.
I've just learned of a potential fix from one of the Prismic-developers.
It does work, but you need to be aware of that you MUST name the query exported from your template-components query
. So in @osamaaamer95 's case, the article.jsx
-component must be
export const query = graphql`...`
and not
export const articleQuery = graphql`...`
The plugin looks to replace the query
variable from the component, so we don't have the liberty to name the query whatever we like.
Next problem is, that as soon as you introduce an image to a custom type, the preview breaks again. There's an issue on that right here: #139
I've made an example of previews actually working right here: https://github.com/MadsMadsDk/prismic-preview-i18n-gatsby-test - but be aware, that the Page-component breaks because I've introduced an image. Remove the image, and it works again.
Thanks for your comment @MadsMadsDk! I tried renaming it to plain old 'query' when I first investigated the issue but it doesn't work, so it may be the image issue.
I have since moved to Next JS on my current project since this was a major blocker, so I am not actively looking for a solution any more. Hoping to see this fixed soon though ✌️
Thanks @MadsMadsDk for you the information that you provided. By rectifying both of these issues I've now got previews working... it's a shame that I'm going to have to remove the awesomeness of using ImageSharp though. But at least it is now working for my content team to use Previews.
Looks like my issue ended up being related to https://github.com/birkir/gatsby-source-prismic-graphql/issues/154. I'm at least seeing the updated data now. Still only seeing a blank page for unpublished page previews though.
Not sure if this will help anyone, but I was having issues while using alias's in my queries. Which you may not need as your queries should all live in "prismic".
Just to follow up here, I was told by the Prismic staff the following:
We currently don't recommend running projects with Gatsby image or image sharp as these sort of issue arise.
I was then told to use Prismic's built in Imigix solution instead.
It appears as though Prismic has no real plans on properly supporting Gatsby image, one of Gatsby's best features, moving forward. Prismic's built in solution using Imigix (which is what I was told to use) does not allow for a custom domain which means you'll loose all your image SEO value for your domain. They also do not have a full example which shows how to achieve blur up, srcset, lazy loading and other useful features using Gatsby, Prismic and Imigix.
In terms of the pull request that partially fixes previews, it does appear to cause another issue where navigating to another page. The initially previewed page shows up fine, but clicking on link in the previewed page causes the page to show up blank for me.
Hey,
I think you can have a look at https://github.com/imgix/react-imgix#lazy-loading
And this component should do most of the things that you're looking for. I will see if I find some time to find a provide an example.
If you really want to make it work with gatsby images I will recommend doing a Pull request to fix this problem.
Is Page
supposed to be called Article
?
Do you have a example project with this issue?
First of all, I would like to acknowledge the great work that @birkir and all the contributors have done with this awesome plugin.
Second, is there any way that our community can get together to try to find a workaround for this? We can create a discord channel or something like this, I know we are super busy at the moment, but assuming that the preview feature is pretty key for anyone that is developing websites for clients, it might worth a try.
I've read all documentation provided by prismic and this plugin, but it sounds impossible to get the preview working. In my case, I have already removed all gatsby-image (this is another issue that I already know about) and we have other several issues like it doesn't work with fragments, etc, etc. There are definitely some issues that need to be addressed.
The main reason why I choose prismic and gatsby was the possibility to preview content. My website is ready at the moment and it's impossible for my client to preview content, they will have to build every time they wish to do some changes, and it's so frustrating. Unfortunately, I didn't check that before starting the project, otherwise, I would definitely go for another solution as the preview feature is pretty key for the most part of people who develop websites for clients.
Prismic promotes that preview feature works well with gatsby, but actually it doesn't work 100% and it's leading some people like me on making the wrong decision about whether they should use prismic with gatsby, assuming that preview feature works fine:
Prismic community seems to be very helpful, what if we all get together to try to find a way to solve this issue? I am available a few hours a week and super keen to help with that.
Did someone manage to get the preview 100% functional? Even though without gatsby-image?
Some related links:
https://user-guides.prismic.io/en/articles/3403530-troubleshooting-previews - I did and tested all of that, and the preview still not working.
https://community.prismic.io/t/gasby-issues-implementing-previews/136/19 - Issue in prismic forum
Common Problems I've found:
I would love to see your thoughts and ideas around this!
Context (Environment)
I am trying to integrate previews on a Gatsby blog set up on Netlify. We were using gatsby-source-prismic before. I followed this guide and requested support to enable GraphQL for the repository. We had custom page creation set up from the old plugin, so I removed that code and set up automatic page creation. Relevant code sections are attached.
Expected Behavior
Current Behavior
Possible Solution
/article-preview
page being created during build.Relevant code
package.json
gatsby-config.js
gatsby-browser.js
linkResolver.js
article.js
Similar issues
167, #171, #34