TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

afraid-scarlet

9/9/2024

500ms delay loading lazy routes

I just followed the react getting started guide and noticed that there's a 500ms delay on loading the default index and the about route. I fired up react profiler and it shows Memo(MatchInnerImpl) suspended during mount it lasts for ~500ms before rendering the route. Is this normal or am I missing something? 500 ms delay to render an almost empty component seems too high. Code here: https://stackblitz.com/edit/vitejs-vite-gfcz4b?file=src%2Fmain.tsx...

rival-black

9/9/2024

Is there an example with TanStack Router and Clerk somewhere?

I can see the TanStack Start example but not one with just Vite + Router

extended-salmon

9/8/2024

Link search without from

I have links that I want to use in every list / table view in my app like this one: ```typescript <DropdownMenuItem asChild> <Link search={(prev) => ({ ...prev, sort: undefined })}>...

conscious-sapphire

9/8/2024

Loader causes re-render sometimes

Hello! im using the loader feature of tanstack router with tanstack query, and only in the first load of the page, and only sometimes, the page enters in a render cycle for around 2s, in this example i would expect the log to show onCe or twice, but its showing like 200 times ``` export const Route = createFileRoute('/item/$itemURL')({ component: () => {...

loud-coral

9/7/2024

Can't generate route tree

[vite] Internal server error: Failed to resolve import "./routeTree.gen" from "src/index.tsx". Does the file exist? in a completely normal React Vite project.

equal-aqua

9/7/2024

protected endpoint with lazy loader & directories

Hi, I've got a _auth.tsx that uses the guide from Authenticated routes. How would I move e.g. my /settings page into a directory but yet keep _auth.tsx ? ...

metropolitan-bronze

9/7/2024

How to use invalidate in hooks (auth Context)

I don't know how to use router.invalidate() on my onAuthStateChange listener to make sure that user data is always ok. The problem is useRouter needs to be called inside Router Provider and my Auth Context Provider is outside of it and it can't be changed with how tanstack router works ( I guess ). authContext.tsx ```tsx...

rare-sapphire

9/6/2024

Exported variable 'router' has or is using name 'FileRouteTypes' from external module src/routeTree

Full error:

Exported variable 'router' has or is using name 'FileRouteTypes' from external module "../src/routeTree.gen" but cannot be named.

This also happens with RouteRootChildren. I see both of these interfaces inside of routeTree.gen.ts but am not sure how to fix it....

extended-salmon

9/6/2024

HMR: Invariant failed: trying to access property 'id' on a route which is not initialized yet.

I'm experiencing this error when changing files. Refreshing the page makes the error disappear:

Invariant failed: trying to access property 'id' on a route which is not initialized yet. Route properties are only available after 'createRouter' completed.

The stack trace points to a Route.useRouteContext call....

adverse-sapphire

9/5/2024

Error using ensureQueryData

ive been developing my app for long time using tanstack router and query, and im having problems in the part of handling authentication, my app works perfectly but when, the access token expired then the problem appears, i made my backend with rust and i made an endpoint to check the status of the cookies to see if the tokens are valid, so in the frontend im trying to handle this in the AuthContext, and then i checked the doc of tanstack to follow how do i face this problem but nothing, if anyon...

graceful-beige

9/5/2024

Sharing data between routes using tanstack-router file based routing with generated routes

I'm trying to figure out how to share a react context between two nested routes /users /users/$id ...

absent-sapphire

9/5/2024

Parse search params "manually"?

I have implemented a Data Table component that can save filters. Filters are saved on the server as a string that is the page's search params. Example: channelId=%5B%22Azure_Test%22%2C%22BMQ_Test%22%5D&sortBy=channelId&sortOrder=asc. When I load this filter, I want to do the same operation that TanStack Router does to create the equivalent JSON object (channelId as a string array, sortBy as string, etc). How do I do that?

unwilling-turquoise

9/5/2024

RouterContext

We have recently brought the router into our project at work. My co-worker is not happy with my use of navigate calls when form fields are updated. (A search interface). He feels that we should be able to create a RouteContext and when form fields are updated update the context and it should update the url. I don’t think it works that way. Anybody have any experience or guidance they can offer?

genetic-orange

9/5/2024

AuthProvider Context is not getting sync with RouterProvider

I have a login page and when login is successful I am setting the userinfo and session storage and updating the AuthProvider Context but when I see the devtools the info is not in sync.

optimistic-gold

9/4/2024

@ in param

If I do something like this

<Link to="/$profile" params={{ profile: `@user` }>Name</Link>

<Link to="/$profile" params={{ profile: `@user` }>Name</Link>

the element is being formed as...

other-emerald

9/4/2024

Layout Rendering Twice

Any idea why my root layout for /dashboard is still rendering when i am on camera page for example:

other-emerald

9/4/2024

Issue with $id param in page

Property 'cameraId' does not exist on type 'Record<never, string>'. ```ts export const Route = createFileRoute( "/_authenticated/(camera-layout)/dashboard/camera/$cameraId/"...

extended-salmon

9/3/2024

tanstack router + tanstack start

Hi guys, I'm having lot of meetings with the CTO of my company to discuss the new tech stack for all our projects. Ours "go to" are: - react query - tanstack-table We want 100% CSR(client side rendering for most of our projects/routes) and in the future migrate to SSR "some" routes/pages according if we need to improve SEO, loading speed etc....

foreign-sapphire

9/3/2024

Persist component between non-grouped routes?

Hey, My understanding is that you can persist components between routes by putting them into a group and then putting the components you want them to share in the layout of the group. But what if you have two routes which are already in different groups? Here's an example from a mobile site that we're working on:...

foreign-sapphire

9/3/2024

Type safety for search params when the `from` option is not provided

I have the following route with validateSearch ```ts export const Route = createFileRoute('/dashboard')({ component: Dashboard,...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs