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

stormy-gold
stormy-gold
View on Discord
10/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. ...
xenophobic-harlequin
xenophobic-harlequin
View on Discord
10/29/2024

Router layouts inside subdirectory and prefixing

Gut check since I'm mostly brand new to Router and start, when creating a layout for a sub-route, it shows here that you could define it like this to create a Posts layout, is there any way to keep that layout file inside the subdirectory without having to prefix all the other pages inside it such as index and $postId?
No description
equal-jade
equal-jade
View on Discord
10/29/2024

i18n Route Match

Im debating what would be the best approach for implementing router rules/files to implement the following: - /pt-PT/about - /en-US/about - /fooo-bar...
xenial-black
xenial-black
View on Discord
10/29/2024

Access routes other than route leads to cannot get route

Hi, I have my file-based routes like this the screenshot If I try navigating from root to /raffle-details/$id, or reload that page, it'd work normally in dev server (vite). The issue happens with the build. I ran live-server and it was able to open the root route, then the details route. But if I access the details route directly, or reload that page, I'll get Cannot get page (screenshot). I try adding a notFoundComponent, it was not able to load this component as well....
No description
fair-rose
fair-rose
View on Discord
10/28/2024

Adding additional info to a route configuration

General question, is it possible to attach additional data to a route config, and have it typed for all routes? Thinking of something like being able to define an icon component for a route, so that I can pull that when displaying links in a sidebar or page title. The alternative is having to define things like a route's icon somewhere else in my application, which means that my route configuration is in different parts of my code instead of being centralized. If it helps, I'm using file based routing....
like-gold
like-gold
View on Discord
10/27/2024

apply upper level layouts to nested routes

Hi, How can tanstack-router executes layouts from upper level strucure, when I navigate some nested route. For example: _root.tsx (have _layout.tsx) settings (index.tsx, settings folder also have _layout)...
foreign-sapphire
foreign-sapphire
View on Discord
10/27/2024

file-based routing and nested paths (seems to be broken)

While rewriting my code-based routing app to a file-based one, I faced a strange thing — I can’t figure out how to create nested paths. During my searches for similar issues in history, I came across a few now-closed issues on gh like https://github.com/TanStack/router/issues/832 , but they were of no help for me 😭 I’ve reproduced bug (?) in a devbox here: https://codesandbox.io/p/devbox/6k9wl6 And here is a working example with code-based routing: https://codesandbox.io/p/devbox/xnktj8 ...
itchy-amethyst
itchy-amethyst
View on Discord
10/27/2024

Isolating Table Loading State Without Triggering Higher-Level Loaders

Hey I have my app with list of users inside table with basic pagination (page number, page size). Everything is working fine, but I wanted to make loading spinner inside my table whenever the request will be taken longer for example due to bad connection. I am using tanstack query + tanstack router. I tried doing this with useTransition hook from react and tried to render loader inside table whenever isPending from returned from hook is true but that loader from table was "over written" by the higher loaders for example inside createFileRoute or defaultPendingComponent. ...
foreign-sapphire
foreign-sapphire
View on Discord
10/26/2024

autoCodeSplitting causes entire app rerender

When autoCodeSplitting is set to true in vite config, every time I change anything in a route.tsx file, entire app re-renders. If i extract the part I want to change in a separate file (so not only component but new file) then only the component itself re-renders. Disabling the plugin makes everything work normally, ie. changing something in a route.tsx file doesn't rerender the entire app, just the part that got changed. This is what vite outputs as being updated with autoCodeSplitting on:...
genetic-orange
genetic-orange
View on Discord
10/26/2024

Cant enable autoCodeSplitting

Hello! I just found the autoCodeSplitting function, i tried enabling it and im getting [router-code-splitter-plugin] Unexpected splitNode type ☝️: VariableDeclarator I tried updating to: ``` "@tanstack/react-router": "^1.76.3", "@tanstack/router-generator": "1.74.2",...
wise-white
wise-white
View on Discord
10/25/2024

How to skip reloading data

Just curious if there's a way to dial in on loaders and skip running fetch functions on every single loader call. Here's a contrived case where using search params I am conditionally rendering a modal, but the root loader also fetches pokemon. It would be fantastic if there was a way for me to do something such that I can skip querying for all pokemon when only the modal search params change....
fair-rose
fair-rose
View on Discord
10/24/2024

Can't make Route pendingComponent works in lazy file

Maybe I am doing something wrong but I can't make the pendingComponent appear. If someone can take a look at it 🙏 https://stackblitz.com/edit/tanstack-router-kfc1rg...
generous-apricot
generous-apricot
View on Discord
10/24/2024

Navigating to subpage of page with search params

I have a page /company/$companyId, which uses validateSearch in its route, to validate search parameters for a table on the page. I am trying to build a subpage of that page /company/$companyId/profile/$profileId, but I can't. Trying to navigate like this: ```ts navigate({...
unwilling-turquoise
unwilling-turquoise
View on Discord
10/24/2024

Removing sleep hack from the Router Authenticated Routes Example

In the login handler below: https://stackblitz.com/edit/github-ystzdp?file=src%2Froutes%2Flogin.tsx There is a sleep with the comment: ...
deep-jade
deep-jade
View on Discord
10/24/2024

Hi!

I am trying out file based routing and trying to create a route tree. My folder structure is attached. The problem is - all routes, even the ones in sub-folders are added as 'root routes': ``` const ProUsersIndexRoute = ProUsersIndexImport.update({...
No description
exotic-emerald
exotic-emerald
View on Discord
10/23/2024

Using the beforeLoad in the root component breaks UI functionality (shadcn ui)?

In my root component, I have a simple server function that fetches the user and session from the session cookie in the beforeLoad function. app/routes/__root.tsx ```tsx export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(...
adverse-sapphire
adverse-sapphire
View on Discord
10/23/2024

Unexpected token “export”

I have this reproducible stack blitz and I don’t know how to get it to work: https://stackblitz.com/edit/tanstack-router-t4oym2?file=app%2Froutes%2Findex.tsx
extended-salmon
extended-salmon
View on Discord
10/23/2024

Is there an equivalent of React-Router's Action/Fetcher model?

I really like how React-Router lets you write an action that can take formdata or JSON from a Request, and call it from the client. It reduces a tonne of boilerplate. Is there anything similar to this for Tanstack Router? I guess Start will cover it to some extent with API/RPC routes, but I'm more interested in being able to do it on the client....
optimistic-gold
optimistic-gold
View on Discord
10/23/2024

Is it possible to trace what triggered "Generating routes" messages on dev server start?

When starting the dev server, we see the Generating routes message twice. Sometimes it also triggers Vite to re-optimize dependencies Re-optimizing dependencies because vite config has changed. Is there a way to enable debug logs or something that will tell me what triggers the double output? Here's an example output on startup (we're not running tanstack start, just hand rolled Vinxi) ``` vinxi v0.4.3...
quickest-silver
quickest-silver
View on Discord
10/22/2024

How to Implement Virtual Routes in a TanStack Start App?

I’ve been exploring how to use virtual routes or code routes in an app built with TanStack Start. In the documentation, there are examples of how to set up virtual routes when creating a project with Vite and TanStack Router, but I can’t find equivalent examples or guidance for TanStack Start (which uses Vinxi + Nitro). Has anyone successfully implemented virtual routes in a TanStack Start app? Any tips or examples would be greatly appreciated!
PreviousNext