One of my components in SolidJS is an Artist page component. Here is a snippet of the code:
export function Artist() {
const params = useParams<{ id: string }>();
const [data, setData] = createSignal(null);
createEffect(() => {
fetchArtist({
devToken: import.meta.env.VITE_MUSICKIT_TOKEN,
musicUserToken: MusicKit.getInstance()?.musicUserToken,
id: params.id,
}).then((res) => setData(res));
});
return (
<div class={styles.artist}>
<Show when={data()}>
<div class={styles.artist__header}>
<div class={styles.artist__header__image}>
<img
loading="lazy"
decoding="async"
src={replaceSrc(
data()?.data[0].attributes?.editorialArtwork?.subscriptionHero
?.url || data()?.data[0].attributes?.artwork?.url,
data()?.data[0].attributes?.editorialArtwork?.subscriptionHero
?.height || data()?.data[0].attributes?.artwork?.height,
)}
alt="Album Art"
width={100}
height={100}
class={styles.artist__header__image__img}
/>
</div>
<div class={styles.artist__header__info}>
<div class={styles.artist__header__info__title}>
{data()?.data[0].attributes?.name}
</div>
<div class={styles.artist__header__info__subtitle}>
{data()?.data[0].attributes?.genreNames?.[0]}
</div>
<div class={styles.artist__header__info__actions}>
<ButtonPrimary
label="Play"
icon={IoPlay}
onClick={() => {
setIsShuffle({ value: 0 });
setQueue("artist", data()?.data[0].id, true);
}}
/>
</div>
</div>
</div>
<div class={styles.artist__body}>
<ArtistViewSelector artist={data} data={data} />
</div>
</Show>
</div>
);
}
I am encountering an issue where the ArtistViewSelector component does not update when the fetched data changes. This becomes apparent when I navigate to a different artist on the same page.
It seems that only the elements outside the ArtistViewSelector are being updated while the rest remains static. I am currently investigating the root cause of this behavior.