component refetches on mount even after data is prefetched

[brettgoulder]

Describe the bug
I have been creating a basic CRUD app architecture using react-query. I ran into an issue when utilizing prefetch, where it makes an extra fetch after the new component is mounted, even though I am setting staleTime in the prefetch.

Is this because the prefetched query becomes inactive when the new component mounts? Is it intended behavior to refetch in this case?

To Reproduce
Steps to reproduce the behavior:

1. Go to this CodeSandbox: https://codesandbox.io/s/competent-cohen-7igge
2. Create a fake user
3. Hover over edit, see that the data has been prefetched in the React Query Devtools
4. Click Edit
5. See that the data has been refetched

Expected behavior
I expect for the refetch to not happen because I have already prefetched the data.

* note this code is v3
Here is the prefetch in the source code: https://codesandbox.io/s/competent-cohen-7igge?file=/src/pages/UserList.jsx:973-1231
Here is the custom hook being called on the Update User form: https://codesandbox.io/s/competent-cohen-7igge?file=/src/pages/UpdateUser.jsx:303-363

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Chrome
• Version: 86.0.4240.198

[tannerlinsley]

In v3, you don’t set the stale time in the prefetch for the future. Stale time on a prefetch determines whether the prefetch should happen based on when the data was previously updated. So if there is already cached data and it is 5 seconds old, this prefetch will be skipped:

prefetchQuery(key, fn, {staleTime: 6000})

And the same applies for useQuery. So what you are probably looking for is this:

prefetchQuery(key, fn)
useQuery(key, fn, { staleTime: 1000 })

This way, as long as the data is less than a second old, the useQuery will not trigger another fetch.