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-sapphire2/12/2024

Default Search Params

Based on the documentation and the example projects, it seems like you should be able to set default search parameters either by returning a default parameter in validateSearch, or using a preSearchFilter. For example if I have: ```tsx...
adverse-sapphire
adverse-sapphire2/12/2024

Possible to use preloading without suspense?

I want to be able to pre-load some data when a use hovers over a link, however I do not want the loader function to cause a suspense trigger, is that possible? For context, I have a page in my app that shows some data in a Grid. The grid component already handles showing a loading icon when the data isn't fetched yet. I want to use this native loading functionality instead of having the whole route suspend....
extended-salmon
extended-salmon2/12/2024

beforeLoad passing context from zustand is not reactive

when I pass isAuth from zustand store reload page first it is false then it load the user and makes it true. but beforeLoad can't detect that state change it's only once? how can I overcome this using other ways?
No description
xenogeneic-maroon
xenogeneic-maroon2/11/2024

Dynamic Link Match Problem

Link component prints "/test/folder?testSuiteId=4ec9425b-4d7e-48eb-8aaa-cc5cd34f3545" which is the link I really want to go. But router matches stepsRoute while I'm expecting it to match testSuiteRouteWithFolder. Final URL becomes : /testcase?testCaseId="1" . !! If I copy this URL to URL bar and press enter, it goes to correct route. !!...
fair-rose
fair-rose2/11/2024

Splat routes with final fixed route segments

I have a use case that right now it's not supported by TSR. I work with a CMS that uses a concept that is called "object traversal" to retrieve the objects stored in the CMS database. The objects are stored in an objects/documents DB that is able to store them in a hierarchically way (as a file system, with parent/child structure). So they map the way it's stored directly with the natural organization of a website: /folder/nested-folder/page...
sunny-green
sunny-green2/11/2024

How to get path param type from parent path on parseParams

Hi Everyone, I recently started using file based routing and ran into this situation. I have a URL schema like this: posts/:userId/posts...
adverse-sapphire
adverse-sapphire2/11/2024

Pathless directory is exposing itself!!!

here my features directory was _features ! But it's being rendered as normal path features in nested path for employees!
No description
fair-rose
fair-rose2/10/2024

SSR examples incomplete or not working

I'm trying the SSR examples: https://github.com/TanStack/router/tree/main/examples/react/basic-ssr-file-based Looks amazing, but the production mode is not complete:...
optimistic-gold
optimistic-gold2/9/2024

Recommended way to load data with React Query/Router

Hello! I recently discovered TanStack, it's pretty awesome! I'm building a project with TanStack Query and TanStack Router. I read the documentation of TanStack router and it said that I should use a loader to load data in a page. It makes sense, but I feel like it's kinda useless when using React Query (even though the examples uses React Query inside the loader function)....
adverse-sapphire
adverse-sapphire2/9/2024

Is there any way to make the pathless route root file to include in it's folder?

Normally if I do _auth.tsx for example and on same level maintain a _auth directory it works fine! But It doesn't work if I want to make a index.tsx file inside the _auth! Is there any way to do that! Because it's looks like a missing piece of the folder located outside the directory!
rival-black
rival-black2/9/2024

example of firebase auth / tanstack query user data fetching & tanstack router

any example project that implement firebase auth or tanstack query data fetching and store it into context api? that have protected routes, context user data (for display user data on site header)...
ratty-blush
ratty-blush2/9/2024

Issues with routes registration (autocomplete)

I have this dashboard route: ```tsx const dashboardRoute = new Route({ getParentRoute: () => authenticatedRoutes,...
No description
foreign-sapphire
foreign-sapphire2/9/2024

Recommended way to go about custom Links?

I would like to have more than just a string in my Link components and also handle the active state with own styles. My current approach would be something like ```tsx <Link to="/dashboard">...
harsh-harlequin
harsh-harlequin2/9/2024

Page still gets rendered by outlet even though path does not match

I'm trying to do some permissions-based routing in the React side instead of the beforeLoad, because I wanted to avoid a blank page while my initial beforeLoad that verified the auth was resolving the api query. I've got a setup but its giving me some issues. When I reload my page to /about, although I've got the <Navigate/> setup and the path changes to the redirect path, my outlet still renders the component briefly from the path that should not be accessed. I believe it could be due to accessing useRouterState to get the current path, but not sure why....
No description
mute-gold
mute-gold2/8/2024

It is possible to use "search param"-based routing?

For context, I have a Liquid website... https://example.com We are injecting a React app that will open in a modal and we want it to have its own routing......
adverse-sapphire
adverse-sapphire2/8/2024

Router with Tanstack Query - Why not useLoaderData ?

If I have a route that looks like this: ```tsx const userQueryOptions = (userId: string) => { queryKey: ["userDetails", { userId: userId }],...
stormy-gold
stormy-gold2/8/2024

Multiple layouts

I trying to achieve the following and I'm not sure if it's possible. I would like the home page of the application as well as most of the other routes to share a common layout, but for a particular path and it's children to have a completely different layout. Imagine the majority of the pages have an unauthenticated layout but a select few use an authenticated layout....
harsh-harlequin
harsh-harlequin2/8/2024

Error in beforeLoad not triggering global ErrorComponent

I've got a beforeLoad on my main layout that can receive an error from my API. When I receive the error, I get the default white-page Tanstack error, instead of the component I've set as my root route's errorComponent. Is there a reason why this is?
optimistic-gold
optimistic-gold2/7/2024

Authentication Context Updates vs Redirect (Race Condition) & Maybe useRouteContext() is Static?!

Hey all! New to Tanstack Router here, and trying to follow the Authentication guide (https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes) and Authenticated Routes Context example (https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes-context) but I'm running into a situation where, upon login/logout, my redirects (to Dashboard on login and Login on logout) beat the context update –if it is indeed actually updating– and the wrong info is rendered. My suspicion is that this is because the router's context isn't actually updating at all when it's supposed to?! That feels like I'm doing something wrong. In debugging this, I've been able to see that when my useAuth() context hook updates and its new state gets passed into the <RouterProvider /> context, a page component that calls useRouteContext() like the following never receives that new state:...
other-emerald
other-emerald2/7/2024

prettier on lint-staged throws an error with files starting with $, have you handled that?

I know It's not an error caused by the router, but I'd love to hear if you have found any workaround to make this work. In short, tokens starting with $ are removed so src/routes/$id.tsx is parsed as src/routes/.tsx which obviously does not exist and prettier can't find it...