TanStack

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

Join

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

vicious-gold

10/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 ```...

probable-pink

10/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,...

extended-salmon

10/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:...

typical-coral

10/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....

fascinating-indigo

10/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

fair-rose

10/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...

eager-peach

10/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...

national-gold

10/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) => ({...

homely-rose

10/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?

like-gold

10/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

10/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...

helpful-purple

10/19/2024

How to do authenticated routes in `start` like this example?

https://github.dev/tanstack/router/tree/main/examples/react/authenticated-routes ```jsx function InnerApp() { const auth = useAuth()...

quickest-silver

10/18/2024

Sync loader always causes pending component to show?

Our loader does preloading of an apollo query which is separately fetched in the component using useQuery() (so we get reactive data but also start fetching the data as soon as possible). We handle loading state of the actual route using skeletons, so we want to get it mounted as soon as possible. We observe that merely having the loader(): void defined always causes the throbber to load, even though we return no value and the loader is not async. ```tsx...

environmental-rose

10/18/2024

Flat routes don't work in TanStack Start?

In TanStack start, if I use flat routes using the dot operator, it doesn't appear to work as intended? This does however work if I nest it in a folder with an index file like I would in NextJS. Are there any caveats I'm missing here to get this to work correctly in TanStack Start?...

conscious-sapphire

10/17/2024

How do I assert types for route params?

when I declare a new file route, such as: createFileRoute("/listening/top/$entity") is it possible to assert or assign a type to $entity? in my case I'd like for it to be an enum with artists, tracks, albums but I can't figure out how to extend it beyond a string...

other-emerald

10/17/2024

Type-safety for list of params in custom component

I have a reusable sidebar component that takes in a list of items that each link somewhere. How should I type the props to allow type-safety for the list? I currently have this: ```typescript export interface SidebarNavProps<P extends RoutePaths<RegisteredRouter['routeTree']>> { from: P,...

eager-peach

10/17/2024

Search params start and end date validation

Hi there, im implementing search params for filters and i want to make sure the start date is before the end date. in zod i can do something like this ```ts export const FiltersRequest = object({ startDate: fallback(string().date(), '').default(''), endDate: fallback(string().date(), '').default(''),...

complex-teal

10/17/2024

External Providers

I'm sorry for the dumb question, but what is the best place to include external providers on @tanstack/start project? I'm trying to use MantineUI, Clerk and Convex. All of them requires a provider around the app. I face a lot of errors with hydrateRoot, independent of the place that I use. Someone have a recomendation?...

flat-fuchsia

10/16/2024

createLink causes weird behavior with component?

I've built a table row that I have also wrapped up in a createLink. Felt like a great idea at first to help me distribute the type safety of the router on a component that I'd like to link to another page. But it causes this weird behavior with the styles. How do I stop it from doing that? ```tsx...

adverse-sapphire

10/16/2024

Navigation state?

For example is there a hook to detect when a page is loading. This would be useful for showing a page loading bar etc.

Previous Next

Gaming

Programming

TanStack

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

TanStack

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