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

metropolitan-bronze

6/8/2024

Use explicit params on loader function

I have a pathless route of "/_layoutMain" which is basically my layout. Now I also have a "/channels/$guildId" route. But In the loader of "/_layoutMain" I need to get the "$guildId" of "/channels" But the loader param object is now type of Record<never, string> So I can't convince it that there is indeed a param here....

inland-turquoise

6/8/2024

Why can modules.data be undefined here?

```typescript export const Route = createFileRoute('/_auth/gameserver/$gameServerId/modules')({ loader: async ({ params, context }) => { const [modules, moduleInstallations] = await Promise.all([ context.queryClient.ensureQueryData(modulesQueryOptions()),...

sensitive-blue

6/7/2024

Disable loaderData cache

Is it possible to disable the cache for the loaderData completely for a route?

flat-fuchsia

6/6/2024

Redirect behaviour on child pages

Hello! I am having some trouble with redirects in Tanstacak Router. I basicly have some pages set up something like this:

/dashboard

/dashboard

/dashboard/user

/dashboard/user

/dashboard/admin

/dashboard/admin

...

fair-rose

6/6/2024

How should I type 'prev' search in reusable component? If it is going to be always the same type

🤔

optimistic-gold

6/6/2024

is using route.fullPath still possible for index routes with trailingSlash never?

This stopped working (in ts-land) with the type handling of trailingSlash, wondering if there is a workaround I'm not aware of, other than typing out the full path. See line 67 here: https://stackblitz.com/edit/tanstack-router-xrnp9s?file=src%2Fmain.tsx%3AL68...

plain-purple

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....

fair-rose

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.

constant-blue

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...

fascinating-indigo

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?

rival-black

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,...

foreign-sapphire

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....

magic-amber

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?...

unwilling-turquoise

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),...

ratty-blush

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/*?

inland-turquoise

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...

conscious-sapphire

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:...

plain-purple

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...

optimistic-gold

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')({...

unwilling-turquoise

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.

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