Tengo un componente que consulta a un usuario actualmente autenticado a través graphQl y useQuery hook
const Home = () => { const [state, setState] = useAppContext() const { data: authedUserData, error } = useQuery(GET_AUTHED_USER); console.log('authed user', authedUserData?.getAuthedUser) // logs authed user console.log('state', state) // logs null useEffect(() => { if (authedUserData?.getAuthedUser) { setState({ ...state, currentUser: authedUserData.getAuthedUser, isAuthed: true }); } }, []) if (error) return <div>Failed to load</div> if (!data) return <div>Loading...</div> return ( <Posts data={data} header={<NavHeader />} /> ) } Luego estoy tratando de configurar lo que sea que regrese de GET_AUTHED_USER en una parte del state global, veo en los registros authedUserData.getAuthedUser registra a mi usuario pero registra registros como nulos hasta que actualizo la página. Colocar cualquier dependencia dentro de useEffect activará un bucle infinito. ¿Como puedo resolver esto?
El uso de una matriz vacía como su lista de dependencia useEffect le dice a React que solo desea que esta función se ejecute una vez, después del renderizado inicial . Para cuando haya regresado su resultado de GraphQL, se lo habrá perdido.
Debe "escuchar" authedUserData y actuar una vez que ya no esté undefined :
useEffect(() => { if (authedUserData?.getAuthedUser) { setState({ ...state, currentUser: authedUserData.getAuthedUser, isAuthed: true }); } }, [authedUserData])