Open matt-sanders opened 4 years ago
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
I am having exactly the same problem:
Reproduce:
useEffect(() => {
console.log('APP DID MOUNT')
}, [])
I also have this issue
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:This should only run once. The layout component is wrapped around everything else as defined in the transition plugin options:
The second thing I'm looking for is the
transitionStatus
which is injected into each page as a prop. See the docs about this hereHere are two scenarios where this is not working:
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 usescloneElement
hereIf I load
gatsby-plugin-transition-link
seconduseEffect
is only run once as intended. But now you'll see thattransitionStatus
isundefined
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