T
TanStack•7mo ago
like-gold

Invalidate route without reseting scroll

In my page I have a button which programmatically invalidate the current route: 
const handleDelete = async () => {
  const response = await mutation.mutate(data.id);
  
  await router.invalidate({ sync: true, filter: (d) => d.fullPath === Route.fullPath });
};
const handleDelete = async () => {
  const response = await mutation.mutate(data.id);
  
  await router.invalidate({ sync: true, filter: (d) => d.fullPath === Route.fullPath });
};
It does work, but my scroll resets and goes to the top of the page. Is there a way to keep the scroll position or a better approach? Thank you
8 Replies
like-gold
like-goldOP•7mo ago
I am considering to use tanstack query for data loading/invalidations. that way I believe i could control it better. does it make sense?
wise-white
wise-white•7mo ago
Yup, using Query you'll invalidate the data with invalidating the router and resetting scroll There mighr be a resetScroll option you can set to false on router.invalidate Personally I'd just go with query if you know it better
like-gold
like-goldOP•7mo ago
yeah... I ended up moving to tanstack query since I couldn’t figure out a way to invalidate data without resetting the scroll (there’s no resetScroll in the invalidate method). I feel like it’s a bit overwhelming because the native loader data was sufficient until I needed this functionality, which seems like a pretty common use case
absent-sapphire
absent-sapphire•7mo ago
can you please create a complete minimal example, e.g. by forking one of the existing examples? without query
like-gold
like-goldOP•7mo ago
absolutely! I will prepare a minimal example and come back here with the link @Manuel Schiller I was replicating the basic example on stackblitz to create a minimal example and noticed that the basic example includes scrollRestoration: true in the createRouter method, which my app was missing. I increased the list of posts and commented out the scrollRestoration line. after calling router.invalidate(), the scroll moved to the top of the page. When I uncommented the line, the scroll maintained its correct position. I believe this was my mistake, as I overlooked this option in the documentation. do you think it’s worth continuing to use tanstack query? are there any disadvantages to using tanstack query instead of relying on loaderData?
absent-sapphire
absent-sapphire•7mo ago
so with scrollRestoration: true it works as you expect? nice! dont see real downsides. query is nice if you want to share data across routes, since you have a cache where you can read from regardless which route or even component triggered the fetch
like-gold
like-goldOP•7mo ago
yes, it worked! Got it! I’ll likely stick with tanstack query then. I really appreciate your time and help! thank you very much
wise-white
wise-white•7mo ago
Your welcome, I missed the scrollRestoration thing myself so apologies there.

Did you find this page helpful?