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

like-gold
like-gold
View on Discord
1/23/2024

Extending PathParamOptions and similar

What's the proper way to extend PathParamOptions? At the moment I'm doing the following: ```tsx export type TabItemInner< TRouteTree extends AnyRoute = RegisteredRouter["routeTree"], TFrom extends RoutePaths<TRouteTree> | string = string,...
exotic-emerald
exotic-emerald
View on Discord
1/23/2024

Type errors with the useSearch hook strict:false

With useSearch({strict:false}) I receive type errors. Has anyone seeing this as well? I am using the newest version of the router
No description
extended-salmon
extended-salmon
View on Discord
1/22/2024

Display Current URL

How can I display the current URL from within a component rendered with Outlet? I've tried some of the hooks built into TanStack Router but I may be missing an import statement or misunderstanding how they work. I essentially am just trying to do "window.location.href" but through TanStack.
quickest-silver
quickest-silver
View on Discord
1/22/2024

How to pass the props.

How to pass the props using lazyComponent(()=>import("@/Example"))
harsh-harlequin
harsh-harlequin
View on Discord
1/21/2024

HMR with file based routing

I'm using the file based routing with router-vite-plugin. Every time I'm making a change in a route and tap save, the whole page refreshes. Is this how it should work? For example I'm changing the styling and I see a full page reload. Maybe it's because is re-generating the routes? This doesn't happen with code based routing. Is there a solution for it?
xenial-black
xenial-black
View on Discord
1/20/2024

What should i do if i use rtk query

No description
stormy-gold
stormy-gold
View on Discord
1/20/2024

how to get URL or current route

can i somehow get the url or current route in the main component using tanstack/router maybe there is some hook ```js function App() { const href = useHook()...
xenial-black
xenial-black
View on Discord
1/20/2024

how can i check if i iauthenticated

import useIsAuthenticated from 'react-auth-kit/hooks/useIsAuthenticated'` export const createCollectionsRoute = new Route({ getParentRoute: () => collectionsLayoutRoute, path: '/create', component: CreateCollection,...
stormy-gold
stormy-gold
View on Discord
1/20/2024

Finding Active Sidebar Button without Link Component

Hey guys, I'm trying to use JoyUI(new beautiful component library of material ui team) with Tanstack Router but I have a problem. Before that, I was using my own sidebar button components with Tanstack's Link component in the sidebar so activeProps was enough for me to highlight selected navigation button. But now I'm using ListItemButton from JoyUI and it has a 'selected' field prop which takes a boolean value and styles button accordingly. But I don't know how to set its value in a way that it will change accordingly. I can find a solution using css classes but I don't want to do that. What is the best way of doing this? I tried the following code but it only works when I refresh the page. This is probably because changes in route doesn't cause re-renders. Isn't it suppose to cause re-renders since route is a hook?: const router = useRouter();...
rare-sapphire
rare-sapphire
View on Discord
1/20/2024

validateSearch with superstruct / valibot

trying to use superstruct to validateSearch because the of the zod bundle size, seems to give an error. Am I doing it wrong? or even better, is there a way to lazy load zod when doing validateSearch so it wont be in the initial bundle size?...
No description
other-emerald
other-emerald
View on Discord
1/20/2024

Router NotFoundRoute not working in File-Based routing

CC this discussion: https://github.com/TanStack/router/discussions/1013 After digging around and trying various things to get a fallback NotFoundRoute page to load, I had found this discussion in hopes that it would lead me somewhere. I'm met with an impasse, however. My project structure is simple:...
extended-yellow
extended-yellow
View on Discord
1/20/2024

What's the naming convention needed for this deep route?

For context, although I have child and deep routes, which follow a hierarchal structure in the URL path, all the actual components/pages are independent of their parent(s) and do not get nested. My problem, is that while the /posts and /posts/$postId page are displayed, the /posts/$postId/deep page never gets rendered. Its all likely to do with the naming and how it affects the routeTree that's generated and help would be appreciated....
No description
other-emerald
other-emerald
View on Discord
1/19/2024

Jetbrains IDEs <Link to='...'> route completion

Hi, I'm new to Tanstack Router and I'm just playing around with it at this point in time. This isn't necessarily Tanstack router related, but I've seen code completion suggestions demo'd for the to prop on Link in the announcement tweet https://twitter.com/tannerlinsley/status/1738709130213560497. I do get proper type linting for the routes, just no suggestions, so I'm not too worried. I'm just wondering how I'd configure this in my IDE, if at all possible. I'm using Jetbrains Goland so maybe this only occurs in WebStorm if at all, so it might just be a limitation of my IDE....
rare-sapphire
rare-sapphire
View on Discord
1/19/2024

"Type instantiation is excessively deep and possibly infinite." error occurring on `navigate`

The error goes away when I comment any leaf node route from the tree. So I don't think it's a specific route causing the issue. I see this was an issue previously but was meant to be fixed? (not totally clear, didn't follow whole discussion/PR). The code in navigate call in question only uses to and params: ```ts...
quickest-silver
quickest-silver
View on Discord
1/19/2024

Auth and Login page type error.

In the following example I have a problem I could use help with: I'm trying to make my entire app live behind an auth barrier except for the Login page. Which I will redirect to when the user is not Logged in. However, I'm getting ...
sensitive-blue
sensitive-blue
View on Discord
1/19/2024

how to use a live query in loaders

I am using electric-sql's useLiveQuery or liveMany to query data from inside components (useLiveQuery) or async code (liveMany). Use case is a local-first app saving data to and fetching it from local sqlite and syncing with a server in the background. Would it make any sense to use live queries inside loaders and if so how could it be done?...
exotic-emerald
exotic-emerald
View on Discord
1/19/2024

How to update a toolbar title inside of a layout

Hi Guys I am experimenting with the __layout.tsx feature. I would like to place a toolbar and within the toolbar there is an app title. Is it possible to modify this title with the tools around the router? Would this be a usecase for the router context? Could for example a React Node be a property of the router context? Thanks...
national-gold
national-gold
View on Discord
1/18/2024

invalidate() does not trigger useEffect in login.tsx in Kitchen Sink React Query File Based example

I tried to implement something similar locally and I am having the same issue. https://tanstack.com/router/v1/docs/examples/react/kitchen-sink-react-query-file-based How to reproduce:...
absent-sapphire
absent-sapphire
View on Discord
1/18/2024

router-vite-plugin in a JavaScript-project

Hey 👋🏽 @Tanner Linsley @Manuel Schiller, tanstack router is fantastic! thanks! I want to use the @tanstack/router-vite-plugin, but the project is JavaScript. Is it planned to add an option to the plugin, or the cli to create JavaScript-code instead of TypeScript? At the moment I have to convert the TypeScript code into JS in another way. Thanks for a response...
absent-sapphire
absent-sapphire
View on Discord
1/18/2024

How can I execute several navigations sequentially?

Hey 👋🏽 , I have following use case: There's a list of users. The list offers an onUserSelect and an onUserClick callback. My eventhandler of the onUserSelect, looks like this: ```js...
PreviousNext