This repository was archived by the owner on Apr 13, 2023. It is now read-only.

Description
I am in a situation where I have a getCurrentUser query which is called from a few different protected routes. Based on this I will then redirect the user if they don't have the relevant permissions
const { data, loading } = useGetCurrentUserQuery()
const user = data?.getCurrentUser
return (
<Route
{...rest}
render={(props) =>
loading ? (
<LoadingScreen />
) : user && !user.signupComplete ? (
<Redirect to="/complete_signup" />
) : user?.signupComplete ? (
children
) : (
<Redirect to="/login" />
)
}
/>
)
This is all great. However, I also need to call getCurrentUser
from other components within the children. If for some reason the currentUser object is updated and this protected route redirects you the browser throws a warning:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
I assume this is because the currentUser changes propagate through the app and apollo doesn't know it have unmounted.
"@apollo/client": "3.0.0-rc.6",
"@apollo/link-error": "^2.0.0-beta.3",