[Question] - is the plugin supposed to support previews on production builds?

[matthewtgilbride]

Having read through #16 and #17, it is apparent to me that it is not recommended to use the preview feature in a production build.

Still, I am unclear on whether or not previews are even supported for bundles built via gatsby build as opposed to when running gatsby develop.

I am happy to submit a PR to update documentation pending the answer to this question...

Tangentially, in a project of my own, I get a query is not defined from the withPreview call when the page loads (again, only on a production build). This is only when using the useStaticQuery hook. The StaticQuery component does not lead to the console error.

Despite the error, the site works fine, but previews do not. This is the case regardless of useStaticQuery vs. StaticQuery. I can't test this with someone else's prismic repo but have reproduced it with my own.

[lucashfreitas]

Hello @matthewtgilbride ,

The documentation is a bit unclear and should be clear about the limitations of preview feature.

useStaticQuery hooks is not yet supported with preview feature. If you want to use it you have two options:

1. Use gatsby HOC component and plugin withPreview function.
2. Fetch data only executing query in pages using the tradicional way:

`export const query = {

}`

In my case unfortunately I had to restructure my queries as I was using useStaticQuery hooks :(. After that finally got the preview working, but I still find some gotchas.

• Prismic website official docs: Doesn't mention about useStaticQuery incompatibility and the doc is really basic.
• Gatsby docs - copied from repo readme: It does mention that useStaticQuery hooks is not yet supported.
• repo readme : It does mention that useStaticQuery hooks are not yet supported.

The plugin docs definitely need a review.

If you have any questions regarding preview please get in touch with me. I am sorry for everyone having problems with it, I had the same issue and unfortunately has to spend many time trying to figure out things that should be explained by the docs.

[matthewtgilbride]

Thanks @lucashfreitas. I hope I can be helpful as well, no need to apologize!

OK, I was under the impression that useStaticQuery was now supported because of this issue: birkir#77. Some of the conversation seems to indicate that it is fixed. However, I see the issue is still open.

It seems, perhaps, that useStaticQuery is supported by the plugin generally, but NOT for previews. Do you think that is the case?

I wonder if we could create some issues on this repo regarding updating of the docs for previews. Off the top of my head:

1. Recommendation to use previews only with gatsby develop on a staging site.
2. useStaticQuery is supported only when NOT using the withPreview helper
3. Some write up about omitPrismicScript and how to avoid loading unnecessary scripts in a production build

I am happy to tackle numbers 1 and 2. I am not sure I understand number 3 well enough to write it up.

Thoughts?

[lucashfreitas]

It seems, perhaps, that useStaticQuery is supported by the plugin generally, but NOT for previews. Do you think that is the case?

Yes.

I wonder if we could create some issues on this repo regarding updating of the docs for previews. Off the top of my head:

Also think yes.

1. Recommendation to use previews only with gatsby develop on a staging site.

Not to sure on this one? I believe the preview can be used everywhere. As an example, I am using the preview in a stage deployed website and it's working fine (I am using my own fork with some fixes and had to do some adjustments). I believe would be nice to be clear about the impacts of using the preview feature (grahql calls) - although it shouldn't affect the main website as the preview will be enabled only when someone triggers it from the prismic website, if the preview fail to execute graphql data, the page will still renders but the new "fresh" data won't be injected at the page. The problem is that when the preview fails to fetch data it fails silently logging a console error, I think it could have something simple as a error toastr telling users that the preview couldn't be loaded.

2. useStaticQuery is supported only when NOT using the withPreview helper

Agree. I believe useStaticQuery hooks doesn't seems to work with the preview at all?

3. Some write up about omitPrismicScript and how to avoid loading unnecessary scripts in a production build

Yes, I can handle this one, I've created a pull request about at #17

I've created this discord chat: https://discord.gg/suQuQWw

Hopefully this can provide help to people who is having problems with the preview feature. Feel free to join, maybe the community can get together and help! 👍

[MarcMcIntosh]

That's a good question,

This is usually a result of the modification made in the universal plugin to babel-plugin-remove-graphql-queries
I'll have to take a look at the plugin and see if gatsby have made any changes that need to mirrored. :)

[MarcMcIntosh]

Yes,
@matthewtgilbride update to the most recent version: 3.6.11 and update gatsby to versison 2.24.11 and you'll previews working in production again :)

[lucashfreitas]

@MarcMcIntosh I wouldn't say that the preview feature is 100% working in production or at least the docs need some updates about limitations, etc.

Would be great if we add extra documentation about gatsby-image / useStaticQuery. I believe a lot of people have broken preview feature because of gatsby-image, silently errors, and other issues.

I believe the most urgent thing would be to update the docs as it is missing a lot of details around the preview feature using gatsby.

Another thing that I figured is that we need to set the fragments used by our page queries, otherwise any query using them won't work with preview. I had to read the source code to understand that. See the example below:

const MyPage = ({data}) => {

}

MyPage.fragments = [Fragment1, Fragment2] /*If we don't do that, queries that use fragment won't work in preview, but this is not clear in documentation */
 

I have a few hours free this week and would be able to collect a known issues list that I had when trying to set up the preview. I believe would be great if we can get the community around this to list all the issues they had and try to do better documentation based on that. It would be really nice to have the Readme.md + prismic website + gatsby plugin page docs updated. Let me know if you need any help or if prismic is planing any action on that?

Cheers

[matthewtgilbride]

Having updated to the latest version, I still see the limitation I highlighted above with regards to production builds.

Let's put a plan together to update some documentation. @MarcMcIntosh if you think it is feasible to make a fix so that useStaticQuery can work with gatsby build, that would be awesome. I am happy to assist on both fronts.

[MarcMcIntosh]

I have a few hours free this week and would be able to collect a known issues list that I had when trying to set up the preview. I believe would be great if we can get the community around this to list all the issues they had and try to do better documentation based on that. It would be really nice to have the Readme.md + prismic website + gatsby plugin page docs updated. Let me know if you need any help or if prismic is planing any action on that?

That would be great :)

Let's put a plan together to update some documentation. @MarcMcIntosh if you think it is feasible to make a fix so that useStaticQuery can work with gatsby build, that would be awesome. I am happy to assist on both fronts.

Wait it doesn't work again?
There's a condition in the bable-plugin-remove-graphql-queries.js I made some changes to the universal plugin and tried on a demo project... it seems to have worked. I'll double check (or figure out how to automate the checking)

[matthewtgilbride]

@MarcMcIntosh - sorry to hassle - are you still looking into this?

[ohlr]

For me previews work on production builds locally. But deployed on AWS Amplify they fail... What system are you deploying to @matthewtgilbride ?

[matthewtgilbride]

@ohlr we are very early days in my project so there is no "real" production build to AWS or otherwise. For me, previews work on production builds just not with the useStaticQuery hook.

FWIW - I would take a look at #40 - someone opened a similar issue on the original repo - it appears between prismic and gatsby the approach taken by this repo might not be supported long term.

Thoughts?

If you were already aware of this but are forging ahead anyway, I'd be curious to know if it is because you are just too far along in your project to pivot, or because you think this is still the better solution.

[mrseanbaines]

@matthewtgilbride were you able to get preview working with useStaticQuery even locally? I couldn't get it working at all and am having to refactor to use StaticQuery 👎 .

I have a minimal repro here for a multi-locale site with the Header component using StaticQuery (previews work) and the Footer component using useStaticQuery (previews don't work). I had to do some jiggery-pokery in gatsby-node to be able to use country codes instead of lang codes ☹️

[ohlr]

@mrseanbaines regarding country codes have you seen https://github.com/prismicio/gatsby-source-prismic-graphql#optional-short-language-codes

[mrseanbaines]

@ohlr yep seen that, but that is still language codes (e.g. en, da, sv) rather than the full locale codes (e.g. en-gb, da-dk, sv-se). What I'm after is the country codes (e.g. gb, dk, se)... Actually, in real-life I need a mix of the two, so a function option to modify the path as suggested here would be ideal

[MarcMcIntosh]

@matthewtgilbride yes I can remember updating the dependancy package, are you still having issues?

[MarcMcIntosh]

Production previews work with gatsby version 2.24.11
https://github.com/prismicio/gatsby-source-prismic-graphql/blob/master/packages/gatsby-source-prismic-graphql/package.json

[MarcMcIntosh]

This will likely be updated soon