Hay un estado userIsAuthenticated en mi componente principal de la App que es false de forma predeterminada pero se vuelve true con la función setUserIsAuthenticated() cuando el usuario inicia sesión.

Ahora, en otro componente, me gustaría mostrar algunos datos del usuario, como el nombre de usuario. Los datos del usuario se obtienen de la API de back-end con Apollo:

Aquí está el componente:

 import React from 'react'; import { useQuery } from "@apollo/client"; import { ME } from "../../api/authentication/me"; import LogoutButton from "../authentication/authentication-required/logout-button"; const Nav = ({ userIsAuthenticated }) => { const { data, loading, errors } = useQuery(ME); if (loading) return "User is loading..."; if (errors) console.log(errors); return ( <div className="Nav"> {/* internalState = { internalState } */} <br /> { JSON.stringify(data, null, 2) } <br /> <LogoutButton/> </div> ) }

Aquí está mi problema: cuando el usuario inicia sesión, la consulta se realiza nuevamente pero el componente no se actualiza. Esto solo funciona si voy a otra página (estoy usando react-router-dom ) o si actualizo la página.

Sé que en React, un estado debe cambiar en el componente o en sus elementos secundarios para volver a renderizarse, así que intenté usar estados de actualización que cambian cuando cambia el userIsAuthenticated los accesorios recibidos.

Aquí hay un ejemplo de lo que probé:

 const Nav = ({ userIsAuthenticated }) => { const { data, loading, errors, refetch } = useQuery(ME); const [internalState, setInternalState] = useState(userIsAuthenticated); const [perviousValue, setPerviousValue] = useState(); if (userIsAuthenticated !== perviousValue){ const refetchMe = async() => { await setTimeout(() => await refetch(); } refetchMe(); setInternalState(userIsAuthenticated); setPerviousValue(userIsAuthenticated); } console.log(internalState); // To check if the state is correctly updated if (loading) return "User is loading..."; if (errors) console.log(errors); return ( <div className="Nav"> {/* internalState = { internalState } */} <br /> { JSON.stringify(data, null, 2) } <br /> <LogoutButton/> </div> )

Pero esto no resuelve el problema. El componente aún no se vuelve a procesar mientras no actualice la página o si no voy a otra página.

También probé con el gancho useEffect , pero siempre termino en un bucle infinito a pesar de que solo pongo mis accesorios userIsAuthenticated en la matriz de dependencia.

¿Hay alguna forma de volver a representar el componente después de recuperar la consulta sin tener que actualizar la página o pasar a otra?