Estoy representando un icono en el que un usuario puede hacer clic para cerrar la sesión. Este icono se muestra con la condición de que el usuario haya iniciado sesión. No quiero mostrarlo cuando el usuario no haya iniciado sesión. Tengo esta función en un evento onClick y cada vez que se ejecuta la función, el usuario se desconecta en el backend, pero los datos del usuario aún se recuperan justo después. ¿Cómo puede ser esto? Supongo que mi función de espera asíncrona está mal escrita o está invalidando la consulta demasiado rápido. Quiero invalidar la consulta de datos del usuario para que vuelva a obtener y vea que el usuario no ha iniciado sesión, por lo tanto, ya no muestra el ícono de cierre de sesión.
const logoutUser = async () => { setShowModal(false) try{ await axios.delete('/logout') console.log("LoggedOut:") history.push("/") queryClient.invalidateQueries('userData') }catch(error) { console.log(error.message) } }Imagen de mi backend manejando el cierre de sesión y obteniendo los datos del usuario justo después
a juzgar por la imagen adjunta, parece que la solicitud de eliminación llega y cierra la sesión del usuario. await correctamente la solicitud, lo cual está bien. invalidateQueries tampoco es "demasiado rápido". Simplemente marcará la consulta como no válida y la recuperará si está activa (que probablemente lo esté). Ahora, vuelve a ir al backend que entrega 401. Supongo que no tienes habilitados los reintentos, de lo contrario, verás 3 solicitudes más.
Ahora lo que sucede es que react-query nunca desechará los datos almacenados en caché. Incluso si tiene un error , si ha obtenido datos antes, su estado será:
status: 'error', error: "401 - Unauthorized" data: staleDataFromTheLastSuccessfulRequestEste es el principio obsoleto mientras se revalida y también obsoleto si hay error en el que se basa la biblioteca.
Después de cerrar la sesión, lo que probablemente desee es:
queryClient.removeQueries('userData') esto eliminará los datos del caché, pero no informará a los observadores al respecto. Si todavía renderiza algo en la pantalla, estará allí hasta la próxima renderización. Probablemente no sea un problema cuando redirige a la pantalla de cierre de sesión. Como alternativa, puede:queryClient.resetQueries('userData') esto restablece los datos a su estado inicial ( undefined a menos que lo combine con initialData ), y también informará a los observadores activos, lo que puede resultar en una recuperación. Es probable que esto sea lo que desea si muestra ese ícono en un componente que siempre está visible, como un encabezado.