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

multiple-amethyst
multiple-amethyst3/12/2024

How to unit test individual components that rely on routerState?

I'm attempting to unit test a component that relies on useMatchRoute. Unfortunately I'm met with ``` TypeError: Cannot read properties of null (reading '__store')...
sensitive-blue
sensitive-blue3/12/2024

is there a way to create a reusable <Link /> component?

I'd like to create a reusable link component with styles but have access to the to prop so i have autocompletion for routes
sensitive-blue
sensitive-blue3/12/2024

cmd k docs links/options direct to index page for me

does this happen to anyone else?
foreign-sapphire
foreign-sapphire3/12/2024

Adding a locale to every path

Hi, I'm migrating an app to tanstack router ATM, and it has locale-aware routes, like <basename>/en/<route>. The way they're doing this currently is by manually checking then adjusting window.location.pathname on every page load via an event listener. The locale is stored on the window object. If the locale changes, it hits an API for new translations then updates the stored value & so on. I don't really want this: I just want a declarative method of prefixing the pathname with the locale, and I can handle storing the value. User goes to mysite.com, url visible is mysite.com/en, user goes to login, mysite.com/en/login etc etc. Route masking seems close, but almost seems the inverse of what I need. Can anyone give any advice on how I'd set this up?...
funny-blue
funny-blue3/12/2024

Is there a simple way to navigate "one level up" in the tree?

Say that I'm on the route /posts/$postId/edit, what's the simplest way to navigate up to /posts/$postId? I could of course get the $postId variable and build the url myself. But it would be nice if there's something like a navigate.up() function.
distinguished-silver
distinguished-silver3/12/2024

How to put default search params?

``` import { createLazyFileRoute } from '@tanstack/react-router' export const Route = createLazyFileRoute('/playground/')({...
xenial-black
xenial-black3/12/2024

Generate URL from navigate({ to, params & search })?

Is there a way to generate a URL given the "to", "params" & "search" keys normally passed to a navigate call?
sensitive-blue
sensitive-blue3/11/2024

Default children route

I have a root to edit my office /offices/$id/edit This root as 3 children roots: ```ts...
wise-white
wise-white3/11/2024

Circular import

Maybe I'm missing something, but the dependency between a route and a component seems to force the two the be in the same file. I would like to split TakeHomeDetail and takeHomeDetailsRoute to separate files. However the route is used in the useParams call in the component and the component is used directly in the route which would cause a circular import. Does anyone know of a solution for this?
No description
equal-aqua
equal-aqua3/10/2024

Login is startup route

Hi all, How the code for authentication all route, if the user access page with no authentication, navigate to Login page
absent-sapphire
absent-sapphire3/9/2024

Infinite query + loader

When using infinite query inside loader function, I see that in the RQ kitchen sink example, ensureQueryData is used, but there is no ensureInfiniteQueryData. Is the alternative to do prefetchInfiniteQuery or is there something more appropriate?
robust-apricot
robust-apricot3/9/2024

will tanstack router be good for creating a offline first pwa vite+react app?

Hey i have a fresh vite + react app project, i wanna createa an offline first pwa, is this router a good choice for this ?
stormy-gold
stormy-gold3/9/2024

File based lazy routes throwing ReferenceError in routeTree.gen file leading to app crash

I am new to Tanstack router, so I followed the quick start guides provided in this document (https://tanstack.com/router/latest/docs/framework/react/quick-start#srcroutesindexlazytsx) on a fresh app created via vite, post making the changes as listed in the page, I tried to run the application using pnpm dev to my surprise I got a bank page. When I opened the console I noticed there was an reference error thrown in routeTree.gen.ts file. package.json ``` "dependencies": {...
No description
correct-apricot
correct-apricot3/9/2024

Default route with Electron after build

Hey guys. I am using TanStack Router with my electron-vite application. It works beautifully in dev. However, when I build a release and launch the application, the first route paths to 404 not found. ...
No description
extended-salmon
extended-salmon3/8/2024

context of auth not persisting on browser refresh on route beforeLoad

This seems to be the same case as the provided example in the docs https://codesandbox.io/p/devbox/github/tanstack/router/tree/main/examples/react/authenticated-routes-context?embed=1&file=%2Fsrc%2Froutes%2F__root.tsx%3A55%2C17&theme=dark After logging in and redirecting to /dashboard, when you reload the page you get the login page one more time. I am reproducing this on my app. What is the best strategy to persist the login state in this case?...
wise-white
wise-white3/6/2024

useSuspenseQuery fails (suspended while responding to synchronous input)

I'm attempting to follow the pattern for data loading in the file-based, react-query example. Where data is "ensured" in the loader, and loaded with a suspense query in the component. What can be seen in the photo. However, in my case, my app refuses to render, saying A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. The error is happening on initial load so adding startTransition isn't an option. I thought it may be related to not having a Suspense boundary, but I've looked all through the example and I don't see an explicit <Suspense/> boundary in it either....
No description
wise-white
wise-white3/6/2024

queryClient in context, type not inferred

Using router and query together in the file-based setup. For some reason the declaration isn't picking up on the queryClient being in context. Anybody have any clues as to why? main.tsx ```tsx const router = createRouter({...
No description
rare-sapphire
rare-sapphire3/6/2024

useNavgate ignore basepath

I updated from 1.17.4 to 1.19.1 and found this behavior) Steps to Reproduce: 1. Go to about page 2. Click to button https://stackblitz.com/edit/tanstack-router-g6pvet?file=src%2Fmain.tsx...
genetic-orange
genetic-orange3/6/2024

how does deduping works in tanstack router

Hi. I wonder how does deduping works in tanstack router and is there any samples I can see?