search params prev type not inferred
I tried to use the functional updater of the
search prop as described here: https://tanstack.com/router/v1/docs/framework/react/guide/navigation#search-param-links
I implemented a simple counter (reproduction here: https://stackblitz.com/edit/tanstack-router-scf3nc?file=src%2Froutes%2Fabout.tsx,src%2Froutes%2Findex.tsx) and I noticed two things:
1) prev is inferred as:
the {} is really troublesome - in my editor, it leaves out the other part of the union completely because of it - and access to .count type errors with:
2) this is a runtime thing: If I set defaultPreloadStaleTime: 0 (as recommended for a react-query integration) and defaultPreload: 'intent' - the count updates in my component when I hover the link. Every time I hover it, the count increases :/StackBlitz
Router Quickstart File Based Example (forked) - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
Navigation | TanStack Router Docs
Everything is Relative
Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperative navigation call is made, you will always have an origin path and a destination path which means you are navigating from one route to another ...
8 Replies
metropolitan-bronzeOP•2y ago
another interesting, related find (let me know if I should craeate issues in GitHub for any of these): type-inference for search params stops to work if I make a link that goes to
'.' - which should be the current page?
Here's a TS playground: https://tsplay.dev/WKXjGw
note that count is a number, so all links to count: "5" should type error. However, only the one to / errors, while the one to '.' does not.
the interesting part is that the type inference looks the same when you hover count: (property) count?: number | undefined, however, there is no typescript error ..TS Playground - An online editor for exploring TypeScript and JavaS...
The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.
exotic-emerald•2y ago
for relative routes to have typesafety you must specify the from prop
if you don't specify the from prop you will get the union of all possible search params
since we don't know where you are coming from
exotic-emerald•2y ago
2) sounds like https://github.com/TanStack/router/issues/1162
GitHub
Page Reload Behavior with Data Prefetching Using Tanstack Router · ...
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 probl...
metropolitan-bronzeOP•2y ago
Thanks - subscribed
exotic-emerald•2y ago
an even better response would be : "fixed it in PR#123" 🙂
since you uncover so many bugs in a single day, you have the honor to fix them 😁
metropolitan-bronzeOP•2y ago
I can certainly try tomorrow. Can I trade in a query bug 😆?
exotic-emerald•2y ago
we need to discuss the exchange rate 😀
metropolitan-bronzeOP•2y ago
I hope it's in beers 🍻