Preview mode not working with Gatsby's wrapPageElement

[JonJamesDesign]

If I use Gatsby's wrapPageElement, or a plugin that does, like @TylerBarnes gatsby-plugin-transition-link to create a persistent template layout, the Prismic preview mode feature stops working.

When I click the "Preview" button from the CMS with a persistent template setup on my Gatsby site (with wrapPageElement), I get the following:

Disabling the gatsby-plugin-transition-link plugin, or removing the use of wrapPageElement in my own gatsby-browser.js file (as the case may be) restores the preview functionality.

---

gatsby - ^2.3.16
gatsby-source-prismic-graphql - ^3.1.3

---

EDIT: typos

[TylerBarnes]

I believe this is actually something we should bring up with Gatsby core. There isn't a good way to replace the props that are passed to pages right now since there is no Gatsby API to do so.
For transition link, since pages can be animated, I'm cloning the page element using react.cloneElement and then adding transition props onto the page. Perhaps prismic is doing the same for the preview data?
For my own WordPress plugin that does instant Gatsby preview, I'm doing the same thing there.
With the current Gatsby API's the order that you add your Gatsby plugins will determine wether or not it works.

In your Gatsby config you could actually try switching the order that gatsby-source-prismic-graphql and gatsby-plugin-transition-link come in and it might start working.

[Cali93]

Hi I'm also using wrapPageElement (for my theme and context providers) and I'm unable to use prismic preview.. Is there any work around to this ?

[frederikchristensen]

I've encountered the same issues as described above while leveraging gatsby-shopify-starter, which uses the Context API + gatsby-plugin-layout. I also use gatsby-plugin-transition-link on top of this. Unfortunately both Gatsby-plugins relies on the wrapPageElement.

I'm also very interested in a workaround because I have similar project coming up, where I would like to use the same stack. As a happily paying Prismic.io-customer this issue is unfortunately a show-stopper for me, because it can't live up to my clients expectations of previewing 🤷‍♂️

I would therefore like to know if the Prismic.io team (cc: @arnaudlewis ) has any interest in fixing this? 🙂

[frederikchristensen]

I reached out to Prismic.io's customer support who suggested me to set the query as a property of the exported component, like so:

export const query = graphql('...");

const MyPage = () => (<div>...</div>)

MyPage.query = query;

export default MyPage

... and previews are now working 😍✌️