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

genetic-orange
genetic-orange10/24/2024

Can't make Route pendingComponent works in lazy file

Maybe I am doing something wrong but I can't make the pendingComponent appear. If someone can take a look at it 🙏 https://stackblitz.com/edit/tanstack-router-kfc1rg...
extended-yellow
extended-yellow10/24/2024

Navigating to subpage of page with search params

I have a page /company/$companyId, which uses validateSearch in its route, to validate search parameters for a table on the page. I am trying to build a subpage of that page /company/$companyId/profile/$profileId, but I can't. Trying to navigate like this: ```ts navigate({...
stormy-gold
stormy-gold10/24/2024

Hi!

I am trying out file based routing and trying to create a route tree. My folder structure is attached. The problem is - all routes, even the ones in sub-folders are added as 'root routes': ``` const ProUsersIndexRoute = ProUsersIndexImport.update({...
No description
adverse-sapphire
adverse-sapphire10/23/2024

Using the beforeLoad in the root component breaks UI functionality (shadcn ui)?

In my root component, I have a simple server function that fetches the user and session from the session cookie in the beforeLoad function. app/routes/__root.tsx ```tsx export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(...
fascinating-indigo
fascinating-indigo10/23/2024

Unexpected token “export”

I have this reproducible stack blitz and I don’t know how to get it to work: https://stackblitz.com/edit/tanstack-router-t4oym2?file=app%2Froutes%2Findex.tsx
passive-yellow
passive-yellow10/23/2024

Is there an equivalent of React-Router's Action/Fetcher model?

I really like how React-Router lets you write an action that can take formdata or JSON from a Request, and call it from the client. It reduces a tonne of boilerplate. Is there anything similar to this for Tanstack Router? I guess Start will cover it to some extent with API/RPC routes, but I'm more interested in being able to do it on the client....
rival-black
rival-black10/23/2024

Is it possible to trace what triggered "Generating routes" messages on dev server start?

When starting the dev server, we see the Generating routes message twice. Sometimes it also triggers Vite to re-optimize dependencies Re-optimizing dependencies because vite config has changed. Is there a way to enable debug logs or something that will tell me what triggers the double output? Here's an example output on startup (we're not running tanstack start, just hand rolled Vinxi) ``` vinxi v0.4.3...
absent-sapphire
absent-sapphire10/22/2024

How to Implement Virtual Routes in a TanStack Start App?

I’ve been exploring how to use virtual routes or code routes in an app built with TanStack Start. In the documentation, there are examples of how to set up virtual routes when creating a project with Vite and TanStack Router, but I can’t find equivalent examples or guidance for TanStack Start (which uses Vinxi + Nitro). Has anyone successfully implemented virtual routes in a TanStack Start app? Any tips or examples would be greatly appreciated!
ambitious-aqua
ambitious-aqua10/22/2024

Is there an equivalent of SolidStart's renaming index.tsx option?

Hey folks, super quick question that I can't seem to find in the docs: Is there a way to rename index.tsx files within a nested file route? For example, SolidStart's file router has an option to rename these index files: https://docs.solidjs.com/solid-start/building-your-application/routing#renaming-index ```...
protestant-coral
protestant-coral10/22/2024

How to use params.parse?

Before deprecation of parseParams, I used to do ```js export const Route = createFileRoute('/post/$id/_layout')({ component: Outlet,...
rare-sapphire
rare-sapphire10/22/2024

Typesafety on use useLocation

Hey all! Not sure if Im doing something wrong or if I just don't understand what should be happening here: Im trying to get typesafety on useLocation(), example:...
ambitious-aqua
ambitious-aqua10/20/2024

Subscribe / Publish style updates?

I haven't really seen anybody tackle this, although I've often seen SSR / SSC / Streaming stuff compared to Pheonix Liveview. I'm not great at Elixir/Pheonix but my understanding is that one of the cool things you can do with it is publish updates to all clients without them requesting information via websockets. This has really cool implications for realtime data applications, games, etc...., and seems like a desireable option for data handling in general which Tanstack appears to be pretty top notch at in the JS ecosystem. I'm definitely not an expert on this, but it seems like Tanstack router, could achieve something like this with a plugin, potentially with a typesafe interface because fundamentally all users are going through the router when they ask for data....
like-gold
like-gold10/20/2024

All links are active and have same href

In the DOM all the links have an href to the same path, even though clicking on it routes you to the correct page. It also says all of them are active at once
No description
adverse-sapphire
adverse-sapphire10/20/2024

Route not active when using `redirect()` in `beforeLoad`

I'm using redirect in beforeLoad in my index.tsx route to navigate to a different route. This works but the activeProps to not get applied to that route. See the minimal repro below: https://stackblitz.com/edit/tanstack-router-redirect?file=src%2Froutes%2Findex.tsx...
foreign-sapphire
foreign-sapphire10/20/2024

Fully SPA on the client for Electron and some SSR stuff only for the web. Is it possible in TSR?

Hi. I've a monorepo that has web. desktop and electron. For the web and electron I've been using vite-electron which is just client SPA. Electron requires full SPA with a entry index.html (although we can serve the standalone server of like let's say Next.js but we're not doing that due to security and added resources). SPA will work great for 90% of our requireement but I was wondering if we could do SSR to certain pages that only works for web. Is it possible? We do some conditional building...
No description
extended-yellow
extended-yellow10/20/2024

Handling types of "prev" value

I have a link in my code that looks like this: ```tsx <Link to="/organization/$organizationSlug/" params={(prev) => ({...
rare-sapphire
rare-sapphire10/19/2024

SEO (meta prop)

Does the meta argument when creating routes actually do something in fully SPA client-side app, or is this only applicable when using in combination with tanstack start?
xenial-black
xenial-black10/19/2024

loader and lazy loading routes? is it possbile?

Is there any way how to mix both loader and lazy loaded routes? I like route to be lazy loaded, but also, to fetch data in loader, so I can have prepared data already. I don't like to create, both file route and lazy route....
rival-black
rival-black10/19/2024

File-based directory routes not working

Hi, I'm trying to set up a sample project similar to the layout in this example: https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#mixed-flat-and-directory-routes So I have a posts directory with: - $postId.tsx...