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-orange11/25/2024

TanStack Router Course

Hi there everyone, do you where I can find a TanStack Router course?
like-gold
like-gold11/25/2024

Nested dynamic routes

Hello, Is it possible to have one Route be able to match nested dynamic routes? I would like '/profile/$userID/$tabID/$subTabID' to be reachable via any sub-sebsequence (e.g. '/profile', '/profile/$userID'). I tried building out this folder structure but couldn't get the inner routes to match...
correct-apricot
correct-apricot11/25/2024

Stale data loading with ensureQueryData and useSuspenseQuery

in the docs there is this example about data loading ```ts const postsQueryOptions = queryOptions({ queryKey: ['posts'], queryFn: () => fetchPosts(),...
xenial-black
xenial-black11/25/2024

TS error in the beforeLoad example (throwing the wrong type)

Hello, I have a TS error with this example : https://tanstack.com/router/v1/docs/framework/react/guide/authenticated-routes#redirecting The error is located at throw redirect({ to: '/login' }); The error is :...
rising-crimson
rising-crimson11/25/2024

Link component always returns `isActive` `true`

Hi all 👋🏼 Version: 0.0.1-beta.53 I'm using the Link component but they all return true for isActive:...
rival-black
rival-black11/25/2024

suspend until resources are fully loaded

Hi everyone, I'm using tanstack start is there a hook where I can load images and fonts and suspend until those are fully loaded before showing the component...
foreign-sapphire
foreign-sapphire11/24/2024

Route “fragments”

I work in a monorepo that has lots of apps. Today, each app is responsible for managing its own routes (not using ts router today). We have a top level platform package that imports components/ routes from each package and composes them together. I’m very close to accomplishing this with tanstack router, however the restriction that a root route must be defined is making this very difficult because composing N apps together means there will be N root routes. I don’t know if this is possible or on the road map anywhere but it would be extremely nice to define a group of routes that are meant to be exported and consumed by a root route defined somewhere else. I can sort of accomplish this with virtual routes but there are other tradeoffs....
extended-salmon
extended-salmon11/24/2024

About route groups/layouts with different wrapper layouts

Hey Router people! I am currently experimenting with converting a Next.js project that has the following routing (example): Grouped under (main) and has its own layout.tsx in the Next.js world. Let's say this layout renders a header - /...
xenial-black
xenial-black11/23/2024

hide search param if it's a default value

how can I hide search param if it is a default value ?
No description
foreign-sapphire
foreign-sapphire11/23/2024

Navigating to an external route in beforeLoad

I currently have an app that verifies if a user is logged in or not. If not, we want to redirect them to our homepage. The problem is that our homepage does not use tanstack router so the navigate function gives us a type error. Normally in this situation, I would just use window.location to redirect the user but I also want to prevent the route component from loading. Does the router have a way to redirect to routes “outside” of the routes it knows about?...
foreign-sapphire
foreign-sapphire11/23/2024

Load virtual routes absolute path

Hi! I didn’t see anything in the docs for this. Currently, it seems that loading a virtual route file via an absolute path is not currently supported. I can sort of work around this by building a relative path from an absolute path but I wanted to check to see if I was missing something
inland-turquoise
inland-turquoise11/22/2024

Are links supported in createRoute(), and not just createRootRoute()?

We seem to not to be able to make these work on normal routes, and only have them work on the root route.
correct-apricot
correct-apricot11/22/2024

navigate is not work when CatchBoundary is work

navigate is not work when the component have CatchBoundary and it catch error of child route beforeLoad function throw. I want to use CatchBoundary component to catch child route error, keep the layout not change, but i navigate is not work after the CatchBoundary catch the child route error. this is an reproducible minimal library: https://stackblitz.com/edit/vitejs-vite-mqaspb?file=README.md #router-questions...
harsh-harlequin
harsh-harlequin11/22/2024

Authentication using React hooks does not re-trigger beforeLoad

Hi, I use a react hook useInternetIdentity to login the user and want to set that up so that the user identity is available in the router context. This works well. But, changes to the login state does not trigger a new beforeLoad on the route. When the login state changes because the user logs in or out, I can see the identity in <InnerRoot> update. But, this does not trigger a refresh of the route. ...
foreign-sapphire
foreign-sapphire11/21/2024

protected routes

I understand that it is insanly important that we add the beforeLoad in a __authenticated.tsx file but what I don't understand is how to create a wrapper around my project to check the add that check. Could someone help out a big noob understand here? 🙂 Wops! This is what I have read. Please highlight what I have missed. https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes...
genetic-orange
genetic-orange11/21/2024

How can I use zod discriminated union for search params?

I have a list of search params and some of them should not be present if a search param (let's say it's called mode) has a certain enum value. I've tried various things but no success
cloudy-cyan
cloudy-cyan11/21/2024

What's the proper way to integrate with react-oidc-context?

I am using react-oidc-context for auth, I want to integrate the router with it, but I do not want to go into the app without auth being loaded
const auth = useAuth()
auth.isLoading // This is a boolean
const auth = useAuth()
auth.isLoading // This is a boolean
...
conscious-sapphire
conscious-sapphire11/20/2024

Add file type to API route

I am trying to create an API route that generates custom meta images. I have successfully done this. But I am unable to add the .png file extension for the path. How can I create an API route like '/api/images/meta/$id.png'?
harsh-harlequin
harsh-harlequin11/20/2024

Route rewrite before route parsing?

Our hash-based routing app is called by an external system which we can't change and which adds an additional # to our url, which has to be removed before the router parses the route. The app is called under foo.com/draft/#/login?#access_token=eyJhb . As you can see, there is one # too much before access_token. How can we rewrite the route before the router does the parsing to remove this second # ?...
No description
unwilling-turquoise
unwilling-turquoise11/20/2024

Are there plans to have an RPC-like thing for api routes?

I was just curious if there are any plans to formalize api routes having an RPC client. RPC). For example it would be super cool if you could createServerSideFn({apiRoute: "users?id", method: "GET" }) or something like that...