Post

@tannerlinsley.com @phry.dev any tips on how to skip suspending when I update search params in Tanstack Router which re-triggers `preloadQuery` in the `loader` that returns `queryRef` that is then read with `useReadQuery`? Wrapping `navigate` with `startTransition` doesn't seem to help 🤔

9/12/24, 1:52 pm0 reposts1 like

Lenz Weber-Tronic

@phry.dev

9 Dec 2024

Phew. I would have hoped for a `navigate` transition as you did... :/ I'm pinging Jerel on the side, maybe he has an idea.

Lenz Weber-Tronic

@phry.dev

9 Dec 2024

Did you return `queryRef` or `queryRef.toPromise()` from the loader? Doing the latter might help.

Teemu Taskula

@teemutaskula.com

9 Dec 2024

Thanks for the tip 👍 I'll come back to you tomorrow with the results when I'm back at work 😁

Dominik 🔮

@tkdodo.eu

9 Dec 2024

bottom line is that transitions around navigate "work", but are short-circuited by useSyncExternalStore used by the router :/. It's a trade-off. FWIW, useDeferredValue on the QueryKey is what works for react-query.

Teemu Taskula

@teemutaskula.com

9 Dec 2024

Is there a way to use `useDeferredValue` with `useReadQuery` in way that the we only ever suspend on the initial render and all subsequent changes to `queryRef` just maintain the old UI and gives some `isSuspending` flag that we can use for inline pending UI?