Refetch query and cache evict on route change - reactjs

Question

I have a problem regarding my GraphQL query cache. I'm trying to create pagination for this query. I have some music playlists and every playlist have its own page. On a playlist page I call a query to get the playlist songs (which I get as a JSON response). This is the merge function from my InMemoryCache:
getMoreSpotifyPlaylists: {
keyArgs: [],
merge(existing: PaginatedJsonResponse | undefined, incoming: PaginatedJsonResponse): PaginatedJsonResponse {
var existingJSON, incomingJSON
if (existing?.['jsonData']) {
existingJSON = JSON.parse(existing?.['jsonData'])
} else {
return incoming
}
incomingJSON = JSON.parse(incoming?.['jsonData'])
var finalJSON = {
...incomingJSON,
items: existingJSON?.items.concat(incomingJSON?.items)
}
return {
...incoming,
jsonData: JSON.stringify(finalJSON)
}
}
}
The problem is that when I change the playlist page, the first songs remain the songs from the other playlist. I've tried to evict the cache on page change but this didn't worked.
This is the playlist page:
const SpotifyPlaylistPage: NextPage = () => {
const apolloClient = useApolloClient();
const router = useRouter()
const [rerender, setRerender] = useState(false)
const [progress, setProgress] = useState(100)
var id = typeof router.query.id === "string" ? router.query.id : ""
const { t: menuTranslation } = useTranslation('menu')
const { t: commonTranslation } = useTranslation('common')
const { t: actionsTranslation } = useTranslation('actions')
const { data: playlistData, loading: playlistDataLoading } = useGetSpotifyPlaylistQuery({ variables: { id } })
const { data: spotifyPlaylistSongsData, loading: spotifyPlaylistSongsLoading, fetchMore: fetchMoreSpotifyPlaylistSongs, variables: spotifyPlaylistSongsVariables } = useGetSpotifyPlaylistSongsQuery({ variables: { id, offset: 0, limit: 5 } })
const [spotifyPlaylistSongsJSON, setSpotifyPlaylistSongsJSON] = useState(null)
const [newOffset, setNewOffset] = useState(5)
const [playlistJSON, setPlaylistJSON] = useState(null)
const [isPublicIconFilled, setIsPublicIconFilled] = useState(false)
const [isCollaborativeIconFilled, setIsCollaborativeIconFilled] = useState(false)
useEffect(() => {
const cache = new InMemoryCache()
if (cache.evict({ fieldName: "getMoreSpotifyPlaylists", broadcast: false })) {
console.log('evicted')
} else {
console.log("error")
}
setRerender(r => !r)
}, [router.query.id, id]);
useEffect(() => {
if (playlistData?.getSpotifyPlaylist?.jsonData) {
setPlaylistJSON(JSON.parse(playlistData?.getSpotifyPlaylist?.jsonData))
}
if (spotifyPlaylistSongsData?.getSpotifyPlaylistSongs?.jsonData) {
setSpotifyPlaylistSongsJSON(JSON.parse(spotifyPlaylistSongsData?.getSpotifyPlaylistSongs?.jsonData))
}
}, [apolloClient, playlistData?.getSpotifyPlaylist?.jsonData, playlistDataLoading, spotifyPlaylistSongsData?.getSpotifyPlaylistSongs?.jsonData])
var showContent = useRef(false)
if (!playlistDataLoading) {
if (id && playlistData?.getSpotifyPlaylist?.jsonData) {
showContent.current = true
} else {
router.push("/")
}
}
if (showContent.current) {
return (
<AppContainer routeType='public' key={id}>
<LaHead title={menuTranslation('home')} />
<div className='w-full h-96 top-0 left-0 absolute z-0'>
<Image alt="test" layout='fill' objectFit='cover' src={playlistJSON?.images[0]?.url} />
<div className='w-full h-full top-0 left-0 absolute bg-gradient-to-t from-la-mauve1 dark:from-la-martinique3 to-transparent'></div>
<div className='w-full h-full top-0 left-0 absolute bg-la-mauve1/80 dark:bg-la-martinique3/80' />
</div>
<div className='z-10'>
<NavbarWithSearchBar />
<Container size='large'>
<LaBreadcrumb breadcrumbElements={[{
href: "/",
name: "Home",
isActive: false
}, {
href: "#",
name: playlistJSON?.name,
isActive: true
}]} />
<div className='flex items-center justify-between'>
<div className='flex items-center space-x-2 md:space-x-4'>
<Title>{playlistJSON?.name}</Title>
{playlistJSON?.public ?
<span className='flex cursor-pointer grow justify-center hover:text-la-seance2 hover:dark:text-la-seance1' data-tip={commonTranslation('public')} onMouseEnter={() => { setIsPublicIconFilled(true) }} onMouseLeave={() => { setIsPublicIconFilled(false) }}>
<ReactTooltip arrowColor="transparent" multiline place="top" className="la-tooltip" effect="solid" />
<UsersGroupIcon fillEffect={isPublicIconFilled} className='w-6 h-6' />
</span>
:
<span className='flex cursor-pointer grow justify-center hover:text-la-seance2 hover:dark:text-la-seance1' data-tip={commonTranslation('private')} onMouseEnter={() => { setIsPublicIconFilled(true) }} onMouseLeave={() => { setIsPublicIconFilled(false) }}>
<ReactTooltip arrowColor="transparent" multiline place="top" className="la-tooltip" effect="solid" />
<LockIcon fillEffect={isPublicIconFilled} className='w-6 h-6' />
</span>}
{playlistJSON?.collaborative ?
<span className='flex cursor-pointer grow justify-center hover:text-la-seance2 hover:dark:text-la-seance1' data-tip={commonTranslation('collaborative')} onMouseEnter={() => { setIsCollaborativeIconFilled(true) }} onMouseLeave={() => { setIsCollaborativeIconFilled(false) }}>
<ReactTooltip arrowColor="transparent" multiline place="top" className="la-tooltip" effect="solid" />
<UsersIcon fillEffect={isCollaborativeIconFilled} className='w-6 h-6' />
</span>
:
<span className='flex cursor-pointer grow justify-center hover:text-la-seance2 hover:dark:text-la-seance1' data-tip={commonTranslation('individual')} onMouseEnter={() => { setIsCollaborativeIconFilled(true) }} onMouseLeave={() => { setIsCollaborativeIconFilled(false) }}>
<ReactTooltip arrowColor="transparent" multiline place="top" className="la-tooltip" effect="solid" />
<UserIcon2 fillEffect={isCollaborativeIconFilled} className='w-6 h-6' />
</span>}
</div>
<Button onClick={async () => {
}} fullWidth={false} content={<RefreshIcon className='w-6 h-6' />} />
</div>
<div className='text-flex italic'>
{playlistJSON?.description}
</div>
{spotifyPlaylistSongsLoading ? <div className='flex w-full justify-center'>
<LaLoader />
</div> : spotifyPlaylistSongsJSON?.items.length > 0 ?
<>
<ThreeBoxesContainer>
{spotifyPlaylistSongsJSON?.items?.map((item: any) => <SongBox key={item.track.id} songData={item} />)}
{spotifyPlaylistSongsData && spotifyPlaylistSongsData.getSpotifyPlaylistSongs.hasMore ?
<Button onClick={async () => {
await fetchMoreSpotifyPlaylistSongs({ variables: { id, offset: newOffset, limit: spotifyPlaylistSongsVariables?.limit } })
setNewOffset(newOffset + spotifyPlaylistSongsVariables.limit)
}} content={commonTranslation('showmore')} /> : null}
</ThreeBoxesContainer>
</>
: <MessageBox type='warning' title={commonTranslation('error')} message={actionsTranslation('noPlaylists')} />}
</Container>
<BottomNavbar />
</div>
</AppContainer>
);
}
return (
<div><LoadingBar className="!bg-la-seance2 !dark:bg-la-seance1" progress={progress}
onLoaderFinished={() => setProgress(0)} /></div>
)
}