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

wise-white
wise-white1/23/2025

Question about file structure

Hello everyone! I started using Tanstack Router recently and I'm loving it so far! I have a question about structuring my files and folders in an admin application:...
adverse-sapphire
adverse-sapphire1/22/2025

context not up to date in `beforeload` (with stackblitz)

I have a typed context set up to capture permissions and I want to use them in beforeLoad similar to how the docs describe where I pass it to the routing provider, but the context isn't being updated until after beforeLoad runs -- what am i missing here? see stackblitz below https://stackblitz.com/edit/tanstack-router-56o6e9vq?file=src%2Froutes%2Findex.tsx...
like-gold
like-gold1/22/2025

Is there any way to get available routes from specific route point?

For example, i have this kind of structure: ``` - projects - index.tsx - timer...
wise-white
wise-white1/21/2025

Recursive routing (Seeing if tanstack router works for our project)

In our project we have recursive routes and I can't seem to find an example of it in the docs This isn't our app but it gets the concept across Imagine an app that shows you a person say '/person/$id'...
No description
other-emerald
other-emerald1/21/2025

Broken Start examples

Are you already aware that the start examples are currently broken? I'd don't see a GitHub issue but I might be overlooking it
optimistic-gold
optimistic-gold1/21/2025

TSS dynamic sitemap

What's the preferred way to create a dynamic sitemap in TSS? Was thinking of an API route but it seems a bit quirky to get those to work from the root of the domain.
broad-brown
broad-brown1/21/2025

Search params inheritance merging

Hi everyone! I’m running into an issue with search param inheritance. I have a parent route /users with search params defined like this: ```ts...
typical-coral
typical-coral1/21/2025

custom link inside component with asChild

i can create a customLink provided by the examples in the doc. But when i want to use this link inside a custom component, lets say a shadCN dropdown menu item with asChild, it throws an error that i should provide an forward ref. Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Basic example...
passive-yellow
passive-yellow1/21/2025

Throwing errors with non-500 status from server functions

Hiya, great work on Tanstack Start and Router, really enjoying using it! Except for this tiny nitpick: If I understand the docs (https://tanstack.com/router/latest/docs/framework/react/start/server-functions#throwing-errors) correctly, you can only throw errors with HTTP status code 500. I'm just starting to build my new app with Tanstack Start, and I'm implementing auth first. It is fully functional; I validate with Zod (password.length > 8 etc.), and I throw an error if the username and password don't match. This means that my server responds with HTTP 500 in these cases, which is of course not the really correct status code. Is there a way to throw errors with custom status codes (400 and 401 in this case)? I tried returning a custom Response instead of throwing errors, but that messes up the return type of the action. Or am I just totally misunderstanding how I should go about implementing a login server function?...
sunny-green
sunny-green1/21/2025

How to Make ENV Accessible in a TanStack Start Server Build?

I'm using the Clerk example: Clerk Basic Example Environment Variables I have the following in my .env: ```env...
genetic-orange
genetic-orange1/21/2025

Skip navigate type check for an common component

I have a monorepo: apps |- admin |- client libs...
fascinating-indigo
fascinating-indigo1/21/2025

Validate Location State

Hi guys, quick question. How can I validate the location.state object on the route like validateSearch? I looked in the documentation but I couldn't find an answer....
statutory-emerald
statutory-emerald1/21/2025

Does Start & Router remove the need for something like TRPC?

I am trying to think through what would still be the use case of using TRPC with react start. What is everyone's opinion on this?...
genetic-orange
genetic-orange1/20/2025

Link `to` prefix helper and typescript

My application supports a single to have access to multiple teams. Almost all links in the application will be links to the same /team/$slug prefix. I am trying to build a Link helper but I am struggling in navigating the types to play nice with my component. Any direction would be appreciated. Example component: ```typescript import { Link, LinkComponentProps } from "@tanstack/react-router";...
ratty-blush
ratty-blush1/20/2025

Route matching with a prefix?

Hi, is this possible to define a route like /@$username in tanstack router?
deep-jade
deep-jade1/20/2025

authenticated routes

I am implementing authenticated routes and was following the guide in https://tanstack.com/router/v1/docs/framework/react/guide/authenticated-routes#authentication-using-react-contexthooks where it talks about authenticated routes for auth state stored in a Context. It all makes sense but I'm struggling with one thing - My setup My react Context gets the state for whether the user is authenticated or not by making an api call to /user and if the response is valid and the user details are fetched successfully, it stores that state in the context as user. This is the state I am using to validate whether the user is logged in or not. ...
complex-teal
complex-teal1/20/2025

How do I use Non-Nested Routes in File-based router?

I'm building an application where we want to keep a lot of information as path params. Mostly there is no route nesting. All of the routes are supposed to render directly after our auth layout. While we are at 1 level of nesting everything was working well with the _ suffix. E.g. _auth/accounts_/$accountId/projects works well....
No description
optimistic-gold
optimistic-gold1/20/2025

Returning query options in loaderDeps to prevent duplication

When using tanstack query with tanstack router all the examples duplicate the query options between the ensureQueryData and useSuspenseQuery as below. ```typescript const postsQueryOptions = queryOptions({ queryKey: ['posts'],...
adverse-sapphire
adverse-sapphire1/19/2025

useSearch and conetext are not typed it search types as any and context to {}

My main.tsx ```tsx import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { createRouter, RouterProvider } from "@tanstack/react-router"; ...
conventional-tan
conventional-tan1/19/2025

Tanstack router looses types in loader

I am developing a SPA using Tanstack router and convex.dev. The following code works and result is properly typed inside the loader function. In my route component, when I run const data = Route.useLoaderData(); the TypeScript type is any. Am I using the loader function wrong here? I've tried adding an explicit return type, but it still didn't work...