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

adverse-sapphire
adverse-sapphire9/20/2024

CSR is possible when using Flie Based routing in Tanstack Router

I wanted to use tanstack router for internal app but wondering it is possible or not
multiple-amethyst
multiple-amethyst9/19/2024

tanstack/react-router with react-router-dom

I have inherited an application that I would like to migrate to tanstack/react-router but it would not be possible to do it at once and both libraries would have to coexist simultaneously. Is this possible?
continuing-cyan
continuing-cyan9/19/2024

Vercel throws 404 page when reloading the page

https://client-workout-tracker.vercel.app/ If you go to any other url other than the root it will be 404 ...
sensitive-blue
sensitive-blue9/19/2024

Is there a way to manually trigger tanstack pending component for a page

I have a page that uses useQuery when the query is pending I want to show the page pendingComponent and when it errors I wanna show the error component I could have just used useSuspenseQuery then but it is bugging out when using it with React aria Select component the whole page just crashes when I change too fast and some other issues but I confirmed it worked well when I used useQuery
funny-blue
funny-blue9/19/2024

Correct method for setting search parameters

Is using the useNavigate method the correct way to set search parameters dynamically for when we want to stay on the same page? `onChange={(ids) => { navigate({ to: '/',...
funny-blue
funny-blue9/19/2024

useSearch paths includes layout routes

I have set up Code based routing where I have a couple of layout routes (using id instead of path). When I try to use the hook useSearch the provided paths have the layout id prefixed. The useNavigateHook does not do this and works perfectly. for example i want to access my index route this is what I want to do: const filters = useSearch({ from: ''/weather" })...
No description
xenial-black
xenial-black9/18/2024

Slow first paint when using a loader

When using a loader in any page the first paint gets delayed 500ms, this is really noticeable, look at this based on this examples home page: If i add console.log(performance.now()); to main.tsx and in the component in routes/index.tsx i get the following timings (image 1) But if we simply add this to the route:...
No description
exotic-emerald
exotic-emerald9/18/2024

Index.tsx or Route.tsx

I'm struggling to understand the difference between these two. From the docs on route.tsx:
When using directories to organize your routes, the route suffix can be used to create a route file at the directory's path. For example, blog.post.route.tsx or blog/post/route.tsx can be used at the route file for the /blog/post route....
funny-blue
funny-blue9/18/2024

Create a route just for adding layout using Code Based Routing

I want a way to add 2 different layouts depending on the routes using Code based routing. I've tried creating two layout routes and make the corresponding routes use the correct layout route as its parent but it adds the path of the layout route to the route. How do I add a layout route without adding its path to its children routes? This is my attempt at doing this. ...
xenial-black
xenial-black9/18/2024

Why is loader not fetch at the same time as the lazy load?

I've split my routes like this: src/routes/category/$.tsx -> has the loader and validateSearch src/routes/category/$.lazy.tsx -> only the component When I hover over a link to a category page, I see this in the network tab (check the image)....
No description
xenial-black
xenial-black9/17/2024

Group lazy routes

Hello! I was wondering if its possible to split multiple routes into a single bundle, i for example want all routes that start with /test to be in a secondary bundle, instead of each one into its own as it works by default with lazy routes, is this possible?
metropolitan-bronze
metropolitan-bronze9/17/2024

Tanstack Start attempting to run the build fails

Hi everyone, I am working on an app using Tanstack Start. I followed the setup instructions here: https://tanstack.com/router/latest/docs/framework/react/start/getting-started I noticed that running the dev, and build commands (vinxi dev and vinxi build) run fine, however attempting to run vinxi start after a build causes the error reported on this issue: ...
harsh-harlequin
harsh-harlequin9/17/2024

Retrieve some routes from all flatRoutes

Hello, I would like to retrieve some routes with a precise staticData. Could you please tell me how to do that? For the moment, I'm trying to retrieve the flatRoutes from the useRouter method, then trying to apply a match but doesn't succeed.. Thanks!...
rare-sapphire
rare-sapphire9/17/2024

Wont navigate away me after successfull sign in

i am using protected rotues with context but my problem is after i sign in state change to true but wont navigate me to page. ``` function App() { const auth = useAuth(); if (auth.isLoading) {...
No description
generous-apricot
generous-apricot9/16/2024

Suggestions for a dark/light mode theme selector

Is there something like remix-themes / next-themes for tanstack start for using the client system theme without flashing? I'm using shadcn and hoping for class based theming (adding dark class to root element)
xenial-black
xenial-black9/16/2024

Path aliases with tanstack start? (SOLVED)

Hello! im trying to prerender my app using tanstack start, i added the config found in the example: ```import { defineConfig } from '@tanstack/start/config' export default defineConfig({ deployment: {...
fascinating-indigo
fascinating-indigo9/15/2024

Is colocation of code possible in route directory

If I'm understanding docs correctly it's not possible to colocate any other components in the route directory with the route. Every file turns into a route. I suppose it's possible with virtual file routing but not file / directory routing? This seems like a big problem because colocating one-off components for a specific page is really nice.
extended-salmon
extended-salmon9/15/2024

Breaking parent layout inheritance

Hi everyone, I'm using file-based routing and have the following structure: ```...
correct-apricot
correct-apricot9/13/2024

Pending component not showing on beforeLoad on rootRoute

It seems that if you do a beforeLoad on the root route it doesn't render the pending component. Is this intended ? https://stackblitz.com/edit/tanstack-router-4kxhzc?file=app%2Froutes%2F__root.tsx&preset=node...