Warning: Can't perform a React state update on an unmounted component. #6209
Description
This is the code for useMuation
const [tokenAuthCall, { loading: mutationLoading, error: mutationError }] = useMutation(LOGIN_MUTATION, {
refetchQueries: [ { query: ME_QUERY }], awaitRefetchQueries: true,
})
But on using refetchQueries it gives the following 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.
This is my nav code:
function NavContents(props) {
let me
let data = MeQuery()
try {
me = data.me
} catch {
me = false
}
return (
<React.Fragment>
{me && (
<li className="nav-item">
<NavLink to="/profile" className="nav-link">
{me.name}
</NavLink>
</li>
)}
{me && (
<li className="nav-item">
<NavLink to="/signout" className="nav-link">
(SignOut)
</NavLink>
</li>
)}
<React.Fragment>
)
And the is MeQuery()
import React, { Component } from "react"
import { gql, useQuery } from "@apollo/client"
const ME_QUERY = gql`
query {
me {
email
name
}
}
`
function MeQuery() {
const { loading, error, data } = useQuery(ME_QUERY)
let value
if (loading) return "Loading..."
if (error) {
value = false
}
value = data
return value
}
export default MeQuery
export {ME_QUERY}