isValidating is still true when using useSWR just after mutate()

[hazae41]

Bug report

Description / Observed Behavior

I use some prefetching technique with mutate() when the user hovers a link

export function HomePage(){
  async function prefetch(){
     await mutate("/api/data", async (cache?: Data) => {
        if (cache) return cache
        return await fetcher<Data>("/api/data")
      }, false)
  }
  
  return <>
    <div 
      onMouseEnter={prefetch}
      onTouchStart={prefetch}>
      <Link href="/data">
        ...
      </Link>
    </div>
  </>
}

export function DataPage(){
  const res = useSWR<Data>("/api/data")

  console.log(res.isValidating) // true

  return <>
    ...
  </>
}

However, when the user clicks too fast, mutate() starts fetching but on the next page isValidating is still true (and never becomes false).

Expected Behavior

I expect isValidating to be false

Additional Context

[email protected]

[hazae41]

I mean, it's expected to be true for a short moment, but it keeps being true

[hazae41]

This doesn't work either:

await mutate(url, (cache?: T) => {
  if (cache) return cache

  fetcher(url)
    .then(data => mutate(url, data, false))
    .catch(() => { })
}, false)

[hazae41]

After a while it stops and throws a timeout error

[promer94]

repro: https://codesandbox.io/s/simple-prefetch-forked-rsofy