Plugins causing a re-commit on each page load

[matt-sanders]

Hi guys

I'm not sure if this is an issue with this plugin or with gatsby-source-prismic-graphql so have logged this issue there also just in case.

I'm using gatsby-source-prismic-graphql to pull content from Prismic. 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 the prismic 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 may be something else as this plugin also uses 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. You can see that example here.

Any help would be greatly appreciated. It seems like this issue is less about the combination of these two plugins and more about the usage of cloneElement.

Cheers

[patches11]

I am not using gatsby-source-prismic-graphql but I am using this, I have the same issue of duplicate components mounting/unmounting. Removing this plugin fixes it so I am pretty sure the issue is here

[iksent]

I am having exactly the same problem:

Reproduce:

1. Use this example: https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth (client side routes at /app)
2. Add "gatsby-plugin-transition-link" as a plugin to gatsby-config.js (and you can continue to use Link from "gatsby" package)
3. Add this code to app.js:

   useEffect(() => {
       console.log('APP DID MOUNT')
   }, [])

4. Login and switch between pages: Details and Profile
5. You will see the "APP DID MOUNT" console log every click, so it means that /app page recreates the full components tree.

[kije]

I also have this issue