Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning: Can't perform a React state update on an unmounted component.

See original GitHub issue

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}