Estoy tratando de establecer un estado de IU que depende de si un usuario ha iniciado sesión. Si un usuario ha iniciado sesión, algún estado en la IU debería reflejar esto.

Estoy usando SSG para generar páginas estáticamente y SWR para obtener los datos del usuario. Cuando llamo a mi función de búsqueda y trato de llamar a mi enlace personalizado para verificar si el usuario está conectado, en la solicitud inicial, el usuario no está definido, pero cuando recargo, el usuario está presente.

¿Por qué es este el caso? ¿Se llama a la función de búsqueda antes que nada y cómo puedo solucionarlo?

Básicamente, todo lo que quiero es SSG las [parkCode].js y obtener algunos datos de usuario para mostrar el estado específico del usuario.

Aquí está mi código:

 // [parkCode].js import checkUser from '../../hooks/checkUser' import useSWR from 'swr' export default function Park({parkCode}) const user = checkUser() const fetcher = async () => { const username = await user?.username console.log(username) try { const {data} = await API.graphql({ query: listSites, variables: { filter: { code: {eq: parkCode}, owner: {eq: username}, }, }, }) return data?.listSites?.items[0] || null } catch (err) { console.error('Site not added by user', err) } } const {data, error} = useSWR('park', fetcher) console.log(data) // logs an error (says }

Mi gancho para ver si un usuario ha iniciado sesión

 //checkUser.js import {useState, useEffect} from 'react' import {Auth, Hub} from 'aws-amplify' export default function checkUser() { const [user, setUser] = useState(null) useEffect(() => { checkUserAuth() const unsubscribe = Hub.listen('auth', () => checkUserAuth()) return () => unsubscribe() }, []) async function checkUserAuth() { try { const signedInUser = await Auth.currentAuthenticatedUser() setUser(signedInUser) } catch (err) { setUser(null) } } return user }