title: Refetch query and cache evict on route change
body: <p>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:</p>
  <pre><code>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)
          }
      }
  }
  </code></pre>
  <p>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.</p>
  <p>This is the playlist page:</p>
  <pre><code>const SpotifyPlaylistPage: NextPage = () =&gt; {
    const apolloClient = useApolloClient();
    const router = useRouter()
    const [rerender, setRerender] = useState(false)
    const [progress, setProgress] = useState(100)
    var id = typeof router.query.id === &quot;string&quot; ? router.query.id : &quot;&quot;
  
    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(() =&gt; {
      const cache = new InMemoryCache()
      if (cache.evict({ fieldName: &quot;getMoreSpotifyPlaylists&quot;, broadcast: false })) {
        console.log('evicted')
      } else {
        console.log(&quot;error&quot;)
      }
      setRerender(r =&gt; !r)
    }, [router.query.id, id]);
  
    useEffect(() =&gt; {
      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 &amp;&amp; playlistData?.getSpotifyPlaylist?.jsonData) {
        showContent.current = true
      } else {
        router.push(&quot;/&quot;)
      }
    }
    if (showContent.current) {
      return (
        &lt;AppContainer routeType='public' key={id}&gt;
          &lt;LaHead title={menuTranslation('home')} /&gt;
          &lt;div className='w-full h-96 top-0 left-0 absolute z-0'&gt;
            &lt;Image alt=&quot;test&quot; layout='fill' objectFit='cover' src={playlistJSON?.images[0]?.url} /&gt;
            &lt;div className='w-full h-full top-0 left-0 absolute bg-gradient-to-t from-la-mauve1 dark:from-la-martinique3 to-transparent'&gt;&lt;/div&gt;
            &lt;div className='w-full h-full top-0 left-0 absolute bg-la-mauve1/80 dark:bg-la-martinique3/80' /&gt;
          &lt;/div&gt;
          &lt;div className='z-10'&gt;
            &lt;NavbarWithSearchBar /&gt;
            &lt;Container size='large'&gt;
              &lt;LaBreadcrumb breadcrumbElements={[{
                href: &quot;/&quot;,
                name: &quot;Home&quot;,
                isActive: false
              }, {
                href: &quot;#&quot;,
                name: playlistJSON?.name,
                isActive: true
              }]} /&gt;
              &lt;div className='flex items-center justify-between'&gt;
                &lt;div className='flex items-center space-x-2 md:space-x-4'&gt;
                  &lt;Title&gt;{playlistJSON?.name}&lt;/Title&gt;
                  {playlistJSON?.public ?
                    &lt;span className='flex cursor-pointer grow justify-center hover:text-la-seance2 hover:dark:text-la-seance1' data-tip={commonTranslation('public')} onMouseEnter={() =&gt; { setIsPublicIconFilled(true) }} onMouseLeave={() =&gt; { setIsPublicIconFilled(false) }}&gt;
                      &lt;ReactTooltip arrowColor=&quot;transparent&quot; multiline place=&quot;top&quot; className=&quot;la-tooltip&quot; effect=&quot;solid&quot; /&gt;
                      &lt;UsersGroupIcon fillEffect={isPublicIconFilled} className='w-6 h-6' /&gt;
                    &lt;/span&gt;
                    :
                    &lt;span className='flex cursor-pointer grow justify-center hover:text-la-seance2 hover:dark:text-la-seance1' data-tip={commonTranslation('private')} onMouseEnter={() =&gt; { setIsPublicIconFilled(true) }} onMouseLeave={() =&gt; { setIsPublicIconFilled(false) }}&gt;
                      &lt;ReactTooltip arrowColor=&quot;transparent&quot; multiline place=&quot;top&quot; className=&quot;la-tooltip&quot; effect=&quot;solid&quot; /&gt;
                      &lt;LockIcon fillEffect={isPublicIconFilled} className='w-6 h-6' /&gt;
                    &lt;/span&gt;}
                  {playlistJSON?.collaborative ?
                    &lt;span className='flex cursor-pointer grow justify-center hover:text-la-seance2 hover:dark:text-la-seance1' data-tip={commonTranslation('collaborative')} onMouseEnter={() =&gt; { setIsCollaborativeIconFilled(true) }} onMouseLeave={() =&gt; { setIsCollaborativeIconFilled(false) }}&gt;
                      &lt;ReactTooltip arrowColor=&quot;transparent&quot; multiline place=&quot;top&quot; className=&quot;la-tooltip&quot; effect=&quot;solid&quot; /&gt;
                      &lt;UsersIcon fillEffect={isCollaborativeIconFilled} className='w-6 h-6' /&gt;
                    &lt;/span&gt;
                    :
                    &lt;span className='flex cursor-pointer grow justify-center hover:text-la-seance2 hover:dark:text-la-seance1' data-tip={commonTranslation('individual')} onMouseEnter={() =&gt; { setIsCollaborativeIconFilled(true) }} onMouseLeave={() =&gt; { setIsCollaborativeIconFilled(false) }}&gt;
                      &lt;ReactTooltip arrowColor=&quot;transparent&quot; multiline place=&quot;top&quot; className=&quot;la-tooltip&quot; effect=&quot;solid&quot; /&gt;
                      &lt;UserIcon2 fillEffect={isCollaborativeIconFilled} className='w-6 h-6' /&gt;
                    &lt;/span&gt;}
                &lt;/div&gt;
                &lt;Button onClick={async () =&gt; {
  
                }} fullWidth={false} content={&lt;RefreshIcon className='w-6 h-6' /&gt;} /&gt;
              &lt;/div&gt;
              &lt;div className='text-flex italic'&gt;
                {playlistJSON?.description}
              &lt;/div&gt;
  
              {spotifyPlaylistSongsLoading ? &lt;div className='flex w-full justify-center'&gt;
                &lt;LaLoader /&gt;
              &lt;/div&gt; : spotifyPlaylistSongsJSON?.items.length &gt; 0 ?
                &lt;&gt;
                  &lt;ThreeBoxesContainer&gt;
                    {spotifyPlaylistSongsJSON?.items?.map((item: any) =&gt; &lt;SongBox key={item.track.id} songData={item} /&gt;)}
                    {spotifyPlaylistSongsData &amp;&amp; spotifyPlaylistSongsData.getSpotifyPlaylistSongs.hasMore ?
                      &lt;Button onClick={async () =&gt; {
                        await fetchMoreSpotifyPlaylistSongs({ variables: { id, offset: newOffset, limit: spotifyPlaylistSongsVariables?.limit } })
                        setNewOffset(newOffset + spotifyPlaylistSongsVariables.limit)
                      }} content={commonTranslation('showmore')} /&gt; : null}
                  &lt;/ThreeBoxesContainer&gt;
                &lt;/&gt;
                : &lt;MessageBox type='warning' title={commonTranslation('error')} message={actionsTranslation('noPlaylists')} /&gt;}
  
            &lt;/Container&gt;
            &lt;BottomNavbar /&gt;
          &lt;/div&gt;
        &lt;/AppContainer&gt;
      );
    }
    return (
      &lt;div&gt;&lt;LoadingBar className=&quot;!bg-la-seance2 !dark:bg-la-seance1&quot; progress={progress}
        onLoaderFinished={() =&gt; setProgress(0)} /&gt;&lt;/div&gt;
    )
  }
  </code></pre>