prefetching doesn't work with components that useSWR with validateOnMount

[haluvibe]

If I prefetch a key and then load a component with useSWR revalidateOnMount: true using the same key, before the prefetch has resolved - the request ends up validating and never resolves.

I can fix this by pre-fetching the key and in the component have revalidateOnMount: false on the useSWR as you suggest...

But if I haven't pre-fetched the key, and the component is set to revalidateOnMount: false, then that component never loads the data!!!

And this only works when not using suspense, with suspense it ends up in a never ending re-rendering loop.

[sergiodxa]

Could you provide a CodeSandbox to replicate this issue?

[haluvibe]

sure -> https://codesandbox.io/s/elated-torvalds-gvere

Try inputting the 'abc' into the first field.
wait > 2 seconds
then input 'abc' into the second field.

This works fine, because the fetch has resolved by the time the Resource component loads...

now,
try inputting '123' and then before the fetcher has resolved (< 2 seconds) input '123' into the second field.

You will see that the '123' request goes into a validating state and never comes out.

Then re-read my first comment, hopefully it makes more sense with the codesandbox

[haluvibe]

mmm, seems to work in codesandbox but not in my app... strange because the code is almost identical.

The Nextjs uses a fetch to a api/resource/[id].ts endpoint where as the codesandbox is a self-resolving promise, the rest is exactly copy/paste...

Maybe this is an issue with swr with nextjs???

Any chance you could take a look at the repository...

https://github.com/haluvibe/nextjs-starter

And here is the deployed version, check the console logs...
https://nextjs-starter-gray.vercel.app/render

[haluvibe]

Furthermore, I discovered the issue is only in chrome (Mac OS) Version 86.0.4240.111 (Official Build) (x86_64)

works as expected in safari and firefox