#hola amigos, tengo una duda, estoy
narrow rock
pero cuando recargo la pagina borrando la cache, por ejemplo con crtl+shift+R entonces en consola se imprime undefined, y en el navegador sale el error de la imagen, de que no puedo pasar un parámetro undefine
supongo que es por que al borrar la cache trata de sacar de nuevo el dato de user pero este no existe, pero por que en el servidor también sale undefined, como es el manejo de esa cache
estoy bastante perdido ahi
luego cuando puse el optional chaining operator en cada llamada de user en el componente, pues el error ya no sale, pero obviamente en todos esos campos el valor que renderiza es undefined
como puedo manejar esto
ademas de que en caso de que el fetch falle entonces va a rendererizar todo como undefined, como se deberia de manejar esto?
de antemano se agradece toda la ayuda
en todos los tutoriales que he visto simplemente hacen el fetch de la data y la usan en el server component, en a pesar de esto hace la build sin errores pero ya cuando lo implemente me encontré con esto, y directamente el pipeline para el deploy del server de desarrollo no completa la build
tulip lark
Pues considerando que es el layout de la página de perfil de un usuario, si user es undefined es porque el usuario no existe y la página tampoco. La forma más sensata de manejarlo es retornando un 404 not found si el usuario con ese id no existe
Lo que no entiendo es por qué estás recuperando la información desde el layout y no desde la página en si... Cómo tienes acceso al id del usuario para recuperar sus datos?
narrow rock
hola Ivan gracias por tu ayuda
te explico por que en el layout, la seccion del perfil del usuario consta de tres paginas diferentes con difernete contenido, una para datos del usuario, otra para logros, y asi, pero esa imagen y su nombre persisten en las tres
eso esta en la parte superior y lo que cambia es el otro contenido
por eso determine que esa data deberia ir en el layout
tulip lark
Ok pero como recuperas el id de los params para recuperar el usuario?
narrow rock
no eso luego lo tomare de la sesion con next auth
por ahora aun no voy alli
como mencionaba el fetch si retorna el usuario correctamente
y cuando accedo a esta pagina el componente funciona bien
y renderiza sin problema
pero cuando hago un refresh de la pagina borrando la cache entonces ocurre el problema
tulip lark
Muéstrame fetchByUserId
narrow rock
y supongo que el problema es normal, lo que no entiendo bien es como entonces debo manejar esto
para que en lugar de que todo se pinte como undefin
export const fetchUserById = async (userId: string): Promise<any> => {
try {
const res = await fetch(`${process.env.NEXT_PUBLIC_URL_API_USERS}/getUser/${userId}`);
const user = await res.json();
return user[0];
} catch (error) {
console.log(error, '-------RESPONSE ERROR-------');
throw new Error('Error fetching user by id');
}
};
ya te digo que el fetch funciona normal
tulip lark
Ajam... Esa api es interna de Next?
narrow rock
no
tulip lark
Ok, no es un endpoint de next
narrow rock
no
tulip lark
Intenta agregar cache: "no-store" en la config del fetch
tulip lark
Vale pero es que si vas a usar next auth el cual usa cookies no va a poder ser estático
Vas a tener que revisar la sesión del usuario en cada petición
narrow rock
pero es que no quiero que sea estatico, solo quiero que sea server
narrow rock
si pero con un revalidate lo hace el refetch
tulip lark
O sea por defecto trata de que todo sea estático a menos que tú optes por salir de ese comportamiento de una forma u otra
narrow rock
mira Ivan es que el error no va por ahi
tulip lark
si pero con un revalidate lo hace el refetch
Una página o ruta con revalidate sigue siendo estática, sólo que cada cierto tiempo se purga el caché
narrow rock
el error esta es cuando hago un refresh borrando cache, o cuando la respuesta del fetch falla y user no tiene la data esperada, entonces alli se me presenta el error, por que no hay data para mostrar, y esto es un comportamiento normal, por que obiamente no hay data para mostrar
lo que quiero saber es como manejar esto, y el como hacer para que cuando se borre la cache y no encuentre la data, en lugar de sacar ese error trate de obtener la data de nuevo o si la api retorno algo no esperado se maneje el error
narrow rock
Una página o ruta con revalidate sigue siendo estática, sólo que cada cierto tie...
pero con una instrucción de revalidate a una ruta desde una accion definida se puede hacer un refetch para que rerenderise
tulip lark
Ok, vamos por parte. En el fetchByUserId se te está pasando algo importante... fetch no arroja una excepción a menos que que sea un network connection error... Tienes que revisar la propiedad ok de la response y arrojar tu mismo la excepción. El try catch ahí no tiene mucho sentido a menos que vayas a hacer algo con el error en el bloque catch... Deja que el posible error que se arroje burbujee hasta la página, eso lo deberías manejar con error boundaries
Con eso resuelves la parte de manejo de posibles errores
Segundo, si todo ha ido bien pero el user que se retorna es undefined, significa que el usuario con esa id no existe. Tienes que hacer esa verificación y retornar not found en caso de que sea undefined
Con eso te quitas la necesidad del optional chaining porque ya estás haciendo un early return si user es undefined
Lo otro que te comentaba, next cachea todo agresivamente a menos que ciertos escenarios se presenten. Si vas a usar next auth y vas a sacar el id del usuario de cookies y demás como me comentabas, ten en cuenta que el segmento donde hagas esto VA A SER dinámico, porque seguramente usarás funciones dinámicas para obtener esos datos de la request. En ese caso, quieras o no, la ruta va a ser dinámica y se va a renderizar por cada petición a la misma. Puedes revisar en la documentación de Next
Las condiciones para que una ruta pase a ser dinámica son: usar funciones dinámicas como searchParams, cookies, etc., especificarlo en la propiedad cache de la config de fetch, o especificarlo a nivel de segmento con export const dynamic = "force-dynamic"
narrow rock
Ok, vamos por parte. En el fetchByUserId se te está pasando algo importante... f...
con esto voy teniendo una idea de como puedo hacerlo, pero aun me queda una duda, por que al refrescar la pagina borrando el cache, en lugar de revalidar, user cambia a undefined, es que mira, al ingrezar el carga la data y renderiza son problema y obtiene el user correctamente lo que indica que el fetch funciona, pero al hacer el refresh borrando cache el user se borra, pero no hace de nuevo el fetch, eso es lo que no entiendo, y el problema principal
y ahi es cuando sale el error
tulip lark
con esto voy teniendo una idea de como puedo hacerlo, pero aun me queda una duda...
Puedes intentar lo de cache: "no-store" y ver si sigue pasando? Se me ocurre que es justamente por lo que te digo del caché automático de fetch
Igual cuando implementes todo completo y accedas a las cookies y demás, verás que ya no tendrás ese problema porque pasará a ser dinámico
Petición que se haga al segmento, petición donde todo volverá a ejecutarse