TanStack

T

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

like-gold
like-gold6/14/2025

Fetching multiple resources in Loader using ensureQueryData

I had a question about handling multiple data fetches in a loader using ensureQueryData. I followed the example from the docs and added another queryOptions for a second fetch. Is this the recommended approach? ```tsx // src/routes/posts.tsx ...
extended-salmon
extended-salmon6/14/2025

how to best update path params?

hey all :blob_wave: My use case is that I have a workspace switcher, and there are multiple pages where the user can be inside the dashboard. If they switch from one workspace to another, we would like to keep them in the same page rather than set them at the base of the dashboard. What is the best way with tanStack Router to achieve this?...
helpful-purple
helpful-purple6/13/2025

How to render modal/dialog as route/Outlet from Index route

Im working with @tanstack/react-router and Im trying to render a Modal/Dialog component on the /admin/users . To do that, I put an Outlet within the parent index.tsx route. However, when I render the route for the modal @ /admin/users/add-user, the background index UI (from /admin/users ) seems to unmount entirely rather than displaying beneath the Modal. Im reasonably sure that the issue is simply because Im not properly organizing my routes. While its not a "minimal" repro, you can see my current route setup with the bugs @ https://github.com/lancej1022/enterprise-saas/tree/main/apps/web/src/routes/(authenticated) . If its easier, you can also view the route layout in the attached screenshot....
No description
correct-apricot
correct-apricot6/13/2025

Updating tanstack router causes crash

Update 1.120.5 -> 1.121.2 I updated the deprecated vite plugin import { TanStackRouterVite } from "@tanstack/router-plugin/vite"; -> import { tanstackRouter } from "@tanstack/router-plugin/vite"; plugin usage:...
other-emerald
other-emerald6/11/2025

Route file does not export any route piece

Sandbox: https://stackblitz.com/edit/vitejs-vite-hc6bcytw I created a new React project using Tanstack Router. This is the Vite configuration ```ts...
rival-black
rival-black6/11/2025

is there any documentation for `verboseFileRoutes`?

what value should I use?
xenial-black
xenial-black6/11/2025

It seems like the type inference of the useSearch hook is weird after the 1.121.0 update.

After the update, I got a type error while executing the tsc command, so I checked and found that the return type of useSearch was inferred as any. Are there more users who had the same problem as me? Please let me know if I did something wrong.
No description
xenial-black
xenial-black6/11/2025

[router-generator-plugin] undefined is not an object (evaluating 'this.environment.config')

Hey all, first time posting about this but this is the third time a non breaking update has broken my app 😭 (package.json currently locked to "^1.58.12") I am getting this error on build, anyone able to point me in the right direction? SPA Vite app using the plugin....
conscious-sapphire
conscious-sapphire6/10/2025

component render running before "beforeLoad"

__root.tsx ```tsx export const Route = createRootRouteWithContext<{ auth: {...
continuing-cyan
continuing-cyan6/10/2025

Invalidate router inside beforeLoad

Hey, I'm using tanstack start. Is there a way to invalidate the router inside beforeLoad? I update a language cookie in beforeLoad (so it triggers on link hover and on click : also I don't know if this is the intended behaviour but when I hover a link, it triggers a first time, when I left click it triggers a second time, and when I release it triggers a third time, I was expecting it to only trigger once after hover, or at most twice after hover and click. Also, in beforeLoad, preload is always false). But when I actually click the link, despite the cookie has changed, the loader doesn't fires so the language texts are not updated. ```js export const Route = createRootRouteWithContext<RouterContext>()({ head: () => ({ // ......
unwilling-turquoise
unwilling-turquoise6/10/2025

I have a problem with Search Params

```jsx import { createFileRoute, useNavigate, useSearch,...
ratty-blush
ratty-blush6/10/2025

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 ...
ratty-blush
ratty-blush6/9/2025

[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 :...
vicious-gold
vicious-gold6/9/2025

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. ...
vicious-gold
vicious-gold6/9/2025

`$` route is not found

my tree is ``` routes/ __root.tsx index.tsx...
like-gold
like-gold6/8/2025

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:...
equal-aqua
equal-aqua6/8/2025

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({...
flat-fuchsia
flat-fuchsia6/8/2025

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:...
adverse-sapphire
adverse-sapphire6/8/2025

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?
afraid-scarlet
afraid-scarlet6/8/2025

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)....