Prismic causes re-commit of entire layout

[matt-sanders]

Hey guys

I'm using this source plugin along with gatsby-plugin-transition-link to animate between pages. What I've noticed is that using both of these plugins together causes some issues and it all depends on which plugin loads first. I'm assuming that this is because both plugins wrap the page in another component, but I'm not entirely sure.

In each of the examples below I'm looking for two things. Firstly I am using an effect on the layout component ( src/components/layout.js ) which is set to run once on the initial render:

React.useEffect(() => {
   console.log("Running effect")
}, [])

This should only run once. The layout component is wrapped around everything else as defined in the transition plugin options:

{
      resolve: `gatsby-plugin-transition-link`,
      options: {
        layout: require.resolve(`./src/components/layout.js`),
      },
    },

The second thing I'm looking for is the transitionStatus which is injected into each page as a prop. See the docs about this here

Here are two scenarios where this is not working:

1. If I use gatsby-plugin-transition-link first everything appears as if it's working correctly. The page queries run OK and I have access to transitionStatus on each page. See this sandbox for a reproduction, on each page I've added "Transition status is {transitionStatus}". However, you'll notice in the console that "Running effect" is logged every time you navigate to a new page. This is not what should happen. Layout is rendered once and so should only run the effect once. However, I think that this plugin is cloning the component so that it can inject the results from graphQL which is causing this to render twice. That's just my hunch based on this line. But it could be coming from the other plugin which also calls cloneElement here

2. If I load gatsby-plugin-transition-link second useEffect is only run once as intended. But now you'll see that transitionStatus is undefined on each page. I'm not entirely sure why this is the case. gatsby-plugin-transition-link also wraps each page but it doesn't use cloneElement which may be the difference. You can see that example here.

Any help would be greatly appreciated. I will also log this as an issue at gatsby-plugin-transition-link in case it's more relevant to them although it seems like this issue is less about the combination of these two plugins and more about the usage of cloneElement.

Cheers