react-query-questions
solid-query-questions
table-questions
virtual-questions
router-questions
react-charts-questions
ranger-questions
vue-query-questions
svelte-query-questions
bling-questions
form-questions
angular-query-questions
start-questions
db-questions
start-showcase
router-showcase
đź“Ł-announcements
Search mask not working on initial load
I'm finding that if I try to use
navigate or even redirect on my initial URL to mask search params, it does not work.
E.g. in https://codesandbox.io/p/devbox/stoic-cerf-qj7jyh
...[BEST PRACTICE] - Interdependent queries in the page loader function
Hi guys ! đź‘‹
I'm wondering what is the best way to fetch multiple data, using TanStack Query, in the page loader function ? Note that almost every request i need, depends on the result of the request n-1
I would do something like :...
Question on Advanced SSR Docs
Documentation:
https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
I'm following the TanStack Query Advanced SSR guide and noticed a potential inconsistency between the initial setup and the App Router example.
...
Code-based routing structure in bigger apps
Hey folks! I’m using code-based routing in a larger app (not file-based), and I’m struggling a bit with how to organize routes properly.
Because of circular dependencies, I had to split each route from its
addChildren() definition (route tree). On top of that, re-exporting routes from a central @router/index.ts alias causes circular issues when one route imports another via the alias.
So now I’m left with long relative imports everywhere, and I’m wondering:...access 'previous' state of search params?
i'm trying to create a util roughly like
```ts
function withPreviousSearch(fn: (prev: <existing params for the route>) => <search key i'm updating>) {
void navigate({...
How to setup the index of a Layout file?
Hey, guys!
First of all I am new to Tanstack Router, although I have read pretty much all the documentation at this point.
I am migrating my project from React Router to Tanstack Router.
I previously had this set-up:...
preload if hovered for at least N time
Hey, I have a big list and users scroll through it, and it's prefetching every single item pretty much. I still want to use preload there but only if the user has hovered that item for N amount of milliseconds, that at least should reduce by a lot the number of items being preloaded. I found this in the docs
defaultPreloadDelay but this is will still call the prefetch so not quite the same. I guess this would be considered a feature request, what are your thoughts?Identifying source of notFoundError
I’m certain I’m just overlooking something obvious, but I was going mildly crazy this week when my console logs were showing “Warning: notFoundError was encountered on the route with ID “root” …
I couldn’t figure out what was causing it. Was it a missing favicon.ico being requested by the browser? Nope. Was it a tab I had open in one of many windows that was pointed to a route that no longer existed and was reloading itself for some reason? Nope. Nothing showing as 404 in Chrome dev tools either.
Anyway, eventually figured out that it was Chrome Dev Tools looking for a devtools.json file (and that request does not actually show in the dev tools network tab)....
Breadcrumbs: Prevent Router Context From Being Inherited
I'm building breadcrumbs that's using the Router Context guide from the official docs. The issue I'm having is that a Router context in a descendant route is inherited from the parent route, and it's resulting in duplicate breadcrumbs.
Is there a way to prevent this default behavior other than just filtering and checking for duplicates?
```tsx...
Multiple table search params
How should I handle multiple independent table search params on a single page (some synced to URL, some not)?
I have a page with 5 different tables. Each table has its own filters, sorting, and pagination. Some of these tables should sync their state (e.g. page number, filters) to the URL via search params, while others should keep state internally without touching the URL.
I read through this TanStack blog post https://tanstack.com/blog/search-params-are-state, which is helpful conceptually, but it doesn’t make it clear how to handle multiple independent state slices that may or may not persist to the URL....
Mobile: Docs: bottom two sidebar entries are un-tappable on iOS safari
It works fine on iOS Chrome, but on iOS safari, I cannot click the bottom 2 entries of the sidebar, in Docs, for any TanStack docs product
Fetching data in the page loader using an ID stored in localStorage
Hi guys ! đź‘‹
First, i'm sorry if a similar question has already been asked, there a lot of posts and i couldn't find one related.
Here is the context of my app:
- It's a school management app for students, professor and administrator...
Navigation resets current page instead of navigating
Anybody experienced an issue where calls to navigate() just reset the current route (ie search params go blank) on the current page instead of navigating you to the new one?
After upgrading from 1.92 to 1.120 our app is experiencing this issue on a couple pages. Stepping through, TSR seems to commit the new location correctly, but the current page just resets after
It’s probably something in our app rather than TSR but thought I’d ask anyway...
Loader and interceptors
Hi guys, I've encountered an unexpected behavior (at least for me) when using TanStack Router.
When I make an asynchronous call to an API inside a loader, and the API responds with a 401 Unauthorized due to an expired access token, I expect my Axios interceptors to handle this (as they do correctly with useQuery, useMutation, etc.).
However, it seems that the error is caught by the router’s error handling mechanism before the interceptor has a chance to process it. As a result, logic such as token refreshing, user sign-out, or redirecting doesn’t happen.
Is this expected behavior? If so, is there a recommended pattern to allow Axios interceptors to work correctly with loader-based API calls?...
tanstack query as a cache
Hi, I am using tanstack query instead of default router cache. Example from docs is using:
```
// Since we're using React Query, we don't want loader calls to ever be stale
// This will ensure that the loader is always called when the route is preloaded or visited
defaultPreloadStaleTime: 0,...
Subscribe to router’s global blocking state
Hey đź‘‹
Is there a way to subscribe to TanStack Router’s global blocking state?
Use-case...
Using router in a dynamic subpath, recieving page not found
I'm trying to host a static app on either
/ & /subpath
I've tried all combinations of setting the basePath on the router & in vite to "", "./" & "/" , the app does load however we first hit a page not found , navigating to / works from within the app but / should be /subpath
Express
```ts...layout component render while beforeLoad is still executing
repro url
https://stackblitz.com/edit/tanstack-router-grysknq6?file=src%2Froutes%2F_auth%2Froute.tsx
steps
1. click on logout...
How to handle modals (query params, or <outlet />
Hi, I am coming from Next js and how we used to handle modals by using Nuqs package (query params) - so that modals can persist in the url.
However, i am not sure if this is possible with tanstack router.
Do you have any experience in how u render your modals?...