Page Reload Behavior with Data Prefetching Using Tanstack Router

[RomSribn]

Describe the bug

We have encountered an issue with data prefetching in our application utilizing @tanstack/react-query version 5.8.7 and @tanstack/react-router version ^1.0.5. The core of the problem lies in the application’s behavior when employing the defaultPreload: 'intent' flag to enable link hover prefetching. Specifically, upon prefetching data on hover, the entire page appears to reload, affecting even those components that are unrelated to the prefetching process, essentially reverting them to their initial state.

Your Example Website or App

Steps to Reproduce the Bug or Issue

1. Enable data prefetching with defaultPreload: 'intent' in the @tanstack/react-router settings.
2. Hover over a link that triggers data prefetching.
3. Observe as the entire page resets to its initial state, including components unrelated to the preloaded route.

Expected behavior

Data prefetching on hover should only refresh the data and components directly associated with the preloaded route without causing a full page reload or affecting unrelated components.

Screenshots or Videos

https://github.com/TanStack/router/assets/41267545/af9453f3-c571-49f9-ab53-3663ad618017

Platform

• @tanstack/react-query version: 5.8.7
• @tanstack/react-router version: ^1.0.5
• Browser: Chrome (latest stable version)
• Operating System: macOS

Additional context

We have attached a video demonstrating the described behavior for a clearer understanding of the issue.

[schiller-manuel]

can you please try with the latest version (v1.15.22)? if this issue still exists, please provide a minimal example on e.g. codesandbox.

[RomSribn]

The issue persists with the new version 1.15.22. We will discuss with the team when we can allocate time to provide a demo application for demonstration.

However, I believe if there is any public example of an application structure using Tanstack Router in conjunction with Tanstack Query, the behavior would be identical. 😢

[schiller-manuel]

Can you find out which (if any) router version did not have this issue? This would help fixing this issue.

Can you reproduce the issue in one of the router+query examples. e.g. https://tanstack.com/router/v1/docs/framework/react/examples/basic-react-query-file-based ?

[SeanCassiere]

@RomSribn is this problem since persisting in the latest version?

Please respond to Manuel's question to this can be checked on.

[zackarychapple]

Just had a chat with @RomSribn and the issue is still occurring. We'll work on creating a reproduction as soon as we can. Thank you for your patience.

[SeanCassiere]

@zackarychapple @RomSribn any update on your side? or a workable reproduction?

Sidenote; what version of TSR are y'all on now?... and please create your reproduction using latest.

[RomSribn]

Thank you for checking in. We are currently in the process of gathering all necessary details and setting up the environment to produce a workable reproduction. We understand the urgency of resolving this issue and are prioritizing it accordingly.

Regarding TSR, we are using latest, as specified in the post. We will make sure to use the latest version for our reproduction to ensure compatibility and accuracy.

I will keep you updated on our progress and will reach out if we need any further information or assistance from your side. cc: @zackarychapple