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

passive-yellow
passive-yellow11/6/2024

Not able to get nesting in the route tree using file based directory routes [Codesandbox provided]

CSB - https://codesandbox.io/p/devbox/broken-leaf-6hnvrq NOTE: This deployment is kind of slow so please be patient. Our API routes aren't super secure right now so I've created a temporary deployment of our backend to avoid any attacks on the prod and this deployment is running on some free tier compute so it is very slow. Even on login it takes a couple of seconds and we haven't put loading state on the login button πŸ€¦β€β™‚οΈ creds: admin - pranjalakg.crf2p@gmail.com student - csheanon1023@gmail.com...
No description
exotic-emerald
exotic-emerald11/6/2024

ENOENT from `npm create @tanstack/router@latest`

Running npm create @tanstack/router@latest I get the following error Error: ENOENT: no such file or directory, copyfile '/home/jdubs/.npm/_npx/cb95eaa94bb67c03/node_modules/@tanstack/create-router/templates/ide/vscode/_dot_vscode/settings.json' -> '/home/jdubs/development/playground/tanstack/my-router-app/.vscode/settings.json'
rival-black
rival-black11/5/2024

How to open a dialog from a child Outlet route?

I have a dialog in a parent component. I want my outlet routes to be able to open that dialog but can't find a way to pass the openDialog function the child route since outlet doesnt accept props. `const openDeleteDialog = (type: string, itemId: number) => { setDeleteDialogOpen(true); setItemToDelete(itemId);...
rival-black
rival-black11/5/2024

How to add layout to dynamic route?

How can i add layout to dynamic route $projectId? As I added it in settings page.
No description
wise-white
wise-white11/5/2024

layout route component get all child routes and context

Is it possible to create this structure ``` settings/ route.tsx account.tsx...
deep-jade
deep-jade11/5/2024

notFoundComponent bubbles up regardless, why?

I've tried specifying defaultNotFoundComponent in the router, and also instead defining notFoundComponent in _root.tsx. When I throw notFound()inside a sub-route's beforeLoad, it bubbles up, instead of rendering that sub-route's notFoundComponent, why?
fascinating-indigo
fascinating-indigo11/5/2024

Router setup

I have a page with route /dashboard whose layout[ wrapper ] is defined, i want to create a page with route dashboard/type/1 but this page should not have the dashboards layout as wrapper.
foreign-sapphire
foreign-sapphire11/5/2024

Roadmap for Start

I'm interested in the early work of Start and am wondering if there is a rough and tentative roadmap for the framework. I was looking at the GitHub discussions and didn't have any luck finding one there. Are things still mostly internal to the TanStack team or did I just look in the wrong places?
metropolitan-bronze
metropolitan-bronze11/4/2024

Link causing refresh of page

When would using and clicking the <Link /> cause a page to refresh?
ratty-blush
ratty-blush11/2/2024

useSearch on a dynamic hook

Hi everyone I'm trying to build a dynamic hook to handle the things for the tanstack table, like: - pagination - filters - etc...
conventional-tan
conventional-tan11/2/2024

Nested route different layout

Hi, i'm starting to use ts router and I would like to know if this is the only way to have the user edit page with different layout that i have on my app route. I mean, i really have to create the "app_"~ route paths? there's no way to have the edit page inside my current "app" folder structure but without inheriting the parent layout that is in "app" folder?...
No description
continuing-cyan
continuing-cyan11/1/2024

Router context indeterministically using the initialValue instead of the passed value

Hello, I have a problem where in beforeLoad the router context sometimes use the value I passed to it and sometimes it uses the defaultValue (undefined in my case). Isn't the context supposed to always use the value provided to it?
xenogeneic-maroon
xenogeneic-maroon11/1/2024

How to hide back button?

What if the proper way to hide a back button? I have a back button which calls router.back() but I want to hide this button if router.back() would go out of the app. (For example, if you open a new tab and then go to the URL of the app, router.back() will work until it will go back to the new tab)....
conscious-sapphire
conscious-sapphire10/31/2024

Possibility of showing a spinner / loader prior to beforeLoad delay of 500ms

Im piggy bagging off the auth example from the docs. But using Clerk together with Convex for my authentication. I show a <LoadingView/> to the user while convex and clerk is done loading auth. this takes approx 700ms after that the beforeLoad happens and doens't return before 500ms which results in a white screen in that time span. My question is... is such a delay for this beforeLoad normal? and if so, could i show my loading spinner again while beforeLoad returns?...
conscious-sapphire
conscious-sapphire10/31/2024

How to add debounce to loader

I want to add debounce so that when search params change loader waits before fetch. Is it possible with TanStack router?
exotic-emerald
exotic-emerald10/31/2024

Search Params -Date parsing

We’re currently working through some filters that put a date range as two separate search Params. In our Zod validator we’re converting the date strings to Date objects exposed over useSearch. Is that a great practice or should we be doing that conversion in the select method of useSearch as a better practice. I’m mostly asking due to a big we introduced where leveraging previous params caused the Date object to be passed in when it needed to be conveyed to an ISO8601 date format....
eager-peach
eager-peach10/30/2024

Router set up for a complex app

I am building a project management app that has an "internal" view and an "external" view. The internal view is served at app.my-company.com and the external view is served at subdomain.my-company.com where subdomain is our customer's slug. I want to serve different routes in the internal view and the external view. Currently I have the same repo deployed on all subdomains and in my CRA + react router setup, I serve either the internal routes (if it is a reserved subdomain) of the external routes (if there is a non-reserved subdomain). ...
equal-aqua
equal-aqua10/30/2024

useSearch with validateSearch in _layout

I have the following routing structure ``` - post |- $postId |- _layout.tsx...
robust-apricot
robust-apricot10/30/2024

Can I prevent path parameters (specifically @) from being escaped?

It looks like path parameters are being escaped using encodeURIComponent instead of encodeURI which replaces characters like β€œ@β€œ with β€œ%40”. Is there a way to disable this behavior (have it use encodeURI internally instead)? If not, would a PR be welcome to update this behavior? (Use encodeURI for path segments but continue to use encodeURIComponent for query string and hash parameters) Edit: Upon looking further it seems encodeURI would probably be a bad idea as it would not escape β€œ?” or β€œ#”. Seems like a likely foot gun. I’m open to other ideas though. ...