Estoy usando dnd-beautiful-kit para segregar Cards. Cada Tarjeta tiene algunas informaciones (presentadas en el video) y un componente de Avatar. El avatar puede ser la imagen (si existe avatarSource) o las iniciales del usuario. También estoy usando la consulta de reacción para obtener avatarSource del backend.
Perdóneme por no mostrar el código editable completo, pero es demasiado grande para ser legible. Los componentes están en esa jerarquía:
const Card = (user) => { return( <div> {user.name} {user.lastName} <Avatar userId={user.id}/> </div> ) } const Avatar = (userId) => { const [avatarSource, setAvatarSource] = useState(); useQuery({ queryKey: ["getAvatar", userId], queryFn: () => { return getAvatar(userId); //here is fetching by axios }, onSuccess: data => { setAvatarSource("data:" + data.contentType + ";base64, " + data.fileContent) } return ( {avatarSource? <img style={avatarStyle} id={style.avatar} src={avatarSource} alt="avatar" /> : <div style={avatarStyle} className={style.initials}> {user.initials} </div>});}Después de mi investigación, me di cuenta de que avatarSource se vuelve indefinido después de mover la tarjeta a otra columna, PERO el usuario no. Lo que es más, codifiqué avatarSrc pasándolo directamente a <Avatar src={'base64 data....'}/> y luego no hubo parpadeo.
En resumen, no sé por qué:
react-query no captura el valor almacenado en caché
en pocas palabras, porque no está utilizando los data devueltos por react-query, sino que solo confía en el estado local que no necesita:
const { data } = useQuery({ queryKey: ["getAvatar", userId], queryFn: () => { return getAvatar(userId); //here is fetching by axios } }) const avatarSource = data && "data:" + data.contentType + ";base64, " + data.fileContenteso es más o menos lo mismo que antes, solo que sin el estado local.
cuando cambie el ID de usuario, obtendrá una nueva entrada de caché, lo que significa que data no estarán undefined y el estado se loading . Para evitar eso, puede pasar keepPreviousData: true a las opciones de consulta de reacción.