Trouble implementing previews with multi-locale site

Developing with Prismic
1

Hi there,

I'm having quite a bit of trouble trying to set up Prismic previews and I'm hoping to get some help.

Here is a sample of what my gatsby-config and link-resolver look like:

image.png

(/preview/ is set in the Prismic preview settings, including the trailing slash. I heard there are issues with no trailing slash + AWS + Prismic preview so I added it here, though I haven't gotten so far as to test that yet. Also not sure if I should be using path or previewPath here. The Prismic docs say path but looking at the source of the plugin, I think this has been changed to previewPath?)

image
image630×662 45.7 KB

Here are some of the issues I am facing:

  1. I'm pretty sure I've gone through all the steps to set up previews (I followed this as well as a lot of looking around), but when I make a change in e.g. the homepage in Prismic, save it and then click on the preview button (set up for localhost), I get the Gatsby dev 404 page (see screenshot). If I then navigate to /homepage/preview (the previewPath I set up in gatsby-config) then the preview appears to work for that page. Interestingly, it also seems to work if I navigate to /en, which is our homepage URL. How do you normally handle this? I assume the preview button is supposed to redirect me to the correct page (not sure if that should be /homepage/preview or /en in this case).

image.png

  1. If I make a change to a document in a locale other than the default locale, e.g. Danish, and I click the preview button, I still get the 404 page, but even if I then navigate to the preview path (/homepage/preview) I see the English page and none of the edits. If I go to /da (Danish homepage) I can see the correct locale as well as the live preview edits. This last case seems fine, but then I'm not sure what the point of setting the preview paths is(?), and I guess it should automatically direct us there when clicking the preview button from Prismic.

  2. A lot of my content in Prismic is split out into components. I guess there wouldn't be a certain preview path that would make sense to show when editing content in this, as they could be used in various pages. Do you have any suggestions on how to handle this?

  3. I am using the useStaticQuery hook for content queries in components. I see it says in the plugin README that this isn't supported, but it has seemed to work for me. Is it just for previews that it doesn't work (seems to be the case)? I see an example of using withPreview with the StaticQuery component - do you know if it's possible to get it working with hooks, or do I have to refactor to use the StaticQuery component (this would be a bummer)?

As I mentioned, my content models are very componentised, so the content for any given page may be shared between different components. Is it possible to view live preview changes across different components and/or across different locales in one preview session? It seems like a preview session only shows changes for the document that initiated the preview?

Any help would be much appreciated.

2

Hello,
Which are you using the @prismicio/gatsby-source-prismic-graphql plugin? the useStaticQuery should be working.

the path set in previewPath is for redirecting. (plus some other stuff)

but then I’m not sure what the point of setting the preview paths is(?)

the plug builds a page there, this is also where you will be redirected when clicking the preview button in primic.

For the multi langage issue can you recreate the issue in the examples folder here?

Thanks

Marc

3

Hi @marc.mcintosh ,

Thanks for the response.

I was using gatsby-source-prismic-graphql but have just switched the Prismic fork.

I still can't get components using useStaticQuery to work with the preview. i.e. I have a header component and a header content model, and when I try changing some content in the document in Prismic and then save and try to preview, I don't see any changes.

I'm still not sure I follow the difference between the options.pages.path option and options.pages.previewPath. It looks like path was changed to previewPath in this PR but but Prismic docs seem to say to use path:

image
image1402×998 94.1 KB

Did you want me to create a reproducible test case, or did you mean to try copying the configuration of one of the examples there? (I checked, but it didn't look like any of the examples there were implementing preview functionality - let me know if I missed something)

4

Hi Sean,

Use previewPath,

We’ll have to update the documentation :slight_smile:

5

This issue has been closed due to inactivity.