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

conscious-sapphire

6/5/2024

Getting access to the isLoading state when using queryClient.ensureQueryData() within TSR

I am using Tanstack router, along side Tanstack Query to fetch data for my route. When I navigate from one route to another, I wanted to display a loading spinner on the current page, while data is being fetched for the destination route. The below code snippet is what I'm working with. ```ts export const Route = createFileRoute('/some/desination/route')({ component: DesinationComponent, // I do pass the Tanstack queryClient via context....

metropolitan-bronze

6/5/2024

Context is undefined in 'loader'

The application encounters a TypeError: Cannot read properties of undefined (reading 'queryClient') during the loading process. The loader function attempts to use context.queryClient to ensure query data but fails because context.queryClient is undefined.

other-emerald

6/5/2024

Refresh Route on Auth Change

Hello, I am moving from next js to Tanstack router and it has been a pleasure to work with, I am wondering if someone could help me with this example though, for some reason when I am trying to login I have to do the action twice, i thought because of the way the context work it would update everywhere, https://stackblitz.com/edit/tanstack-router-gqbxfs?file=src%2Froutes%2F_auth%2Fsignin.tsx you can see in the example here, when i try to log in, i have to do it twice and then only the second tim...

unwilling-turquoise

6/5/2024

Clerk auth

I seem to have circular dependency issue with Clerk and Tanstack router. Clerk depends on router and I also need to pass auth context to the router. What is the solution to this problem?

rare-sapphire

6/5/2024

Purpose of `from` for JavaScript users

Hey 👋🏽 , I use tanstack-router in a JS project. Until now I have always tried to supply from in the navigations and then route relative. I.e.: ```js throw redirect({ from: Route.fullPath,...

ambitious-aqua

6/4/2024

Type "../../" is not assignable to type "../../../"

Im always getting this error, when trying to navigate. The error only appears in the ide, the code works fine. When I use ../../../ I get: Type "../../../" is not assignable to type "../../../../" and so one....

optimistic-gold

6/4/2024

How would I achieve this route pattern?

/ducks - list of all ducks /ducks/detail/$duckId - modal showing duck details over top of list (<Outlet /> inside /ducks?) /ducks/new - form to create new duck, but should be full page, not inside /ducks Outlet Layouts? what would the file/folder structure look like?...

metropolitan-bronze

6/4/2024

Router example with react query is slow to swap components

Using the example from the documentation, I find that switching between routes there is delay in swapping the Outlet when we have a loader running. Even until we show the pending component it takes a second. How can we improve the smoothness of the app? ```ts export const Route = createFileRoute("/posts")({ loader: ({ context: { queryClient } }) => queryClient.ensureQueryData(postsQueryOptions),...

absent-sapphire

6/3/2024

chrome extension: file-based routing

Hi. I am developing a chrome extension. And the default route of the app is chrome-extension://[hash_id]/index.html. How can I define this type of route with file-based routing instead of defining a $index and then redirect to the /something/*?

like-gold

6/2/2024

navigate does not trigger new page

Hi, I have a dropdown that should only change a specific param within the url. However, although it reaches the if branch and the $gameServerId is different, the navigate does not result in a new page being loaded. Any ideas?
```typescript...

dependent-tan

6/1/2024

dist/Index.html shows route not found after vite build in dist folder

Hi after i run vite build, and try to load index.html with live server, the __root folder will load properly with all the components(including outlet component), however outlet component will just show the defaultNotFoundComponent defined in the createRouter, if i set the defaultNotFoundComponent as a <Link/> element to other routes, it will load the route properly. what should i do to get the outlet to load the route properly when the webpage first loads from index.html? the defaultNotFoundComponent, the Link works perfectly to load the route:...

cloudy-cyan

6/1/2024

Best practices for getRouteApi() with optional path param?

Are there any best practices for using getRouteApi() when rendering the same element for the index route as well as optional the same route with an optional param? Since TSR doesn't support optional params out of the box we need to define two routes: * /search * /search/playlists...

equal-jade

5/31/2024

Should `prefetchQuery` be await'ed inside the route's `loader`?

I couldn't find any info in the docs specifically about calling queryClient.prefetchQuery inside of a route's loader method. Based on my understanding of both methods, it seems like I would not want to await the prefetchQuery calls since it would block the route from rendering until the query/queries are finished fetching rather than handling the loading state inside the component. For example: ```tsx export const Route = createFileRoute('/orders/search')({...

conscious-sapphire

5/31/2024

Auth Guarded Route doesn`t load lazy component

When I reset the site data, some lazy routes (auth guarded) in the dashboard don't load when going from login to their pages. After navigating through the dashboard, the pages start loading as they should. And then this problem does not occur. It seems that under some conditions lazy components are not loaded. Making routes with createFileRoute help to solve the problem. But i want to use this feature. Is there another way to create lazy route with file-base stracture? Help please.

ratty-blush

5/31/2024

Nested Router Instances

Hi people, I'm trying to do a POC of a micro frontend using the Router on both host and remote. Unfortunately, when I try to load another instance of the Router on the remote module, I get an error (that is possible to see in the picture). I read the documentation and looked into the API reference, tried to find a blog post or an example project and no progress; so making this question here it's my last resort. With that, my questions are:...

foreign-sapphire

5/31/2024

Unable to upgrade from 1.17.4 to 1.17.5

I'm trying to get up to the latest version and I am getting multiple issues, the first one I am getting is a type issue when going past 1.17.5. (I am also getting this at 1.34.7 but I'm getting multiple error when I go to latest so I am trying to tackle them 1 by 1). Here's a screenshot of the type issues I am getting, not getting them in 1.17.4 but I for every version forward. Anyone have an idea? I believe I've setup my router like the doc is recommending. I am currently on typescript 5.3.3, I have also tried latest (5.4.5)...

rare-sapphire

5/30/2024

Error when built

My routes don't seem to be a part of my built code when publish my app to production but works fine in development

optimistic-gold

5/30/2024

Flashing on refresh on a protected route

why is the page flashing before redirecting on refresh? ```js import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"; import { validateSessionCookie } from "../../utils/session";...

fascinating-indigo

5/30/2024

Route-based sidebar issues

I'm attempting to implement a route in my application (route /foo) that itself displays fullscreen. Upon clicking a link on the page, I attempt to navigate to /foo/$id/steps. This should open a side-panel (drawer) that overlaps the existing /foo route's content. Additionally, a link is available inside the side-panel to navigate from /foo/$id/steps –> /foo/$id/connect, which replaces a subset of the side-panel's contents with different contents. Utilizing React Router V6, I was able to achieve this via roughly the following snippet React Router V6...

like-gold

5/29/2024

Redirecting with Pending Component

We recently added logic to add a default pending component. Our route has a loader and on certain status codes, we throw a redirect to a different page. However, after we added the above to, whenever we throw a redirect the route match remains in "pending" with isFetching = true and pending = true (shown in TanStack dev tools). Before we added the pending, it redirected as expected, however, now it doesn't seem to behave as expected. When we have a regular Error thrown (i.e throw Error()), it renders the errorComponent as expected and the route match status goes to "failed" and isFetching is false. ...

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