I'm using dnd-beautiful-kit in order to segregate Cards. Each Card has some informations (presented on the video) and Avatar component. Avatar can be the image (if avatarSource exist) or an initials of the user. Also I'm using react query to fetch avatarSource from backend.
Forgive me for not showing the whole, editable code but it is too big to be readable. The components are in that hierarchy:
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>});}
After my investigation I realized that the avatarSource becomes undefined after I move card to another column, BUT the user does not. What is more, I hardcoded avatarSrc by passing it straight into <Avatar src={'base64 data....'}/> and then there was no blinking.
In sum, I dont know why:
react-query does not catch cached value
simply put, because you are not using the returned data from react-query, but only relying on local state that you don't need:
const { data } = useQuery({
queryKey: ["getAvatar", userId],
queryFn: () => {
return getAvatar(userId); //here is fetching by axios
}
})
const avatarSource = data && "data:" + data.contentType + ";base64, " + data.fileContent
that's pretty much the same as before, just without local state.
when the userId changes, you'll get a new cache entry, which means data will be undefined and state will be loading. To avoid that, you can pass keepPreviousData: true to the react-query options.