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

sensitive-blue

10/10/2024

Route implicitely has type 'any' because of loader

I have the following code: ```export const Route = createFileRoute( "/_layout/_adminPermission/admin/committees/$slug", )({ loader: ({ context: { queryClient, auth }, params: { slug } }) =>...

absent-sapphire

10/9/2024

CreateLink makes all routes "active"

So I want to combine mantine's NavLink with the type safety of Tanstack's Link component. I followed this link https://tanstack.com/router/latest/docs/framework/react/guide/custom-link#createlink-with-third-party-libraries...

xenophobic-harlequin

10/9/2024

handleSerialError fails when setting err.routerCode with TypeError(s)

Fetch network requests or other fetch errors that don't even bring a response are automatically TypeError, and that object can't be extended, causing: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible

ambitious-aqua

10/9/2024

Get all Search Objects

I have an object where I define properties for a custom MenuItem component that includes a Link wrapper. I have got my route types working where if I try to define a appMenuItem it will provide all of my route paths but I also want to do this for my search objects where I can optionally chose to pass search parameters from one page to another that will be used in the to property in the Link component. For example: ```...

other-emerald

10/9/2024

route.tsx pendingComponent is rendering when index.tsx loader runs

I have the following file router structure: ``` └── routes/ ├── (hcp)/...

extended-salmon

10/8/2024

react context provider is not updating router context

I have an auth provider wrapping my route provider. I am then using an auth hook and passing its state to the RouteProvider context. When auth state is changed the context does not seem to update. Is this expected behavior?...

other-emerald

10/8/2024

I don't know the difference between useDataLoader and useSuspenseQuery.

What are the advantages and disadvantages of each?

extended-salmon

10/7/2024

layouts beforeload

I have a layout with a beforeload. As I navigate to children within this layout the beforeload is executed. Is there a way to configure this to run only once and not every time I navigate to different child routes?

quickest-silver

10/7/2024

HTTP Session Cookie

Hello, I'm new here around tanstack but have been using query and table for a couple months, I ran into an issue today with an assignment using router where my Auth API uses session cookie stores to store a user's session for Auth purposes, and it was not saving it for some reason? And I then went over to nextjs and it worked without any issues, is there something theory wise that I am doing incorrectly Usage would like similar to below: ```javascript...

unwilling-turquoise

10/7/2024

Router Loaders parallelism in a CRM app project

Hello, I am really wondering what should be the best use-cases for loaders in my case. I am building a CRM using tanstack-router and I have a lot of URLs like this: /entity/$entityId/entityBs or /entity/$entityId/entityBs/$entityBId. My problem is what is $entityId does not exists server-side, all the loaders of the child routes still gets executed for no reason since we know the parent does not exist. Any advices? Should I only be using loaders for my top-level entity page and not for nested routes? ...

eastern-cyan

10/5/2024

Best practices for combining tanstack router context + tanstack query [React, Typescript]?

Howdy, I am building an app that tries to implement authentication without using any stored state on the frontend (no localestorage/session). My project uses tanstack router and tanstack query so I am a bit confused how I can combine both to make my life easier? I am currently setting user/setUser as tantack router context and setting user on login/signup with a cookie. ...

adverse-sapphire

10/4/2024

Can I have server only context that i can access in my router ?

I'm experimenting with Tanstack start and tRPC. I want to be able to prefetch some queries in my loader and by dehadryte and hydrate the queryClient get the data on the client. I'm using createServerSideHelpers to create the context I want to use in the router but it can't be packed in the client bundle. I've try to create separate routers one for the client and one for the server but it doesn't seems to work like I expect: type are not ok and the code is packed in the server bundle. Do you have any exemple of having server only context ? do you have any input about how I can achieve prefetch with tanstack start ? is there any trick with vite to have on router definition but different code depending on if we are on the server or the client ?...

extended-salmon

10/4/2024

Can I make a common loader for few components?

I have a backend server from which I request user details, and it successfully sends the user details. However, the issue is that I only get the user details for specific routes where I use a loader. I want to access the user details on every authenticated route. For example, if I navigate to localhost:5173/, I get the user details because I'm using a loader there. But if I try to access localhost:5173/test or localhost:5173/test2, I don't get the user details, even though all three routes are authenticated. This happens because I haven't used a loader in the test or test2 components. I would like to implement a central loader that can fetch the user details for every authenticated route. Can you help resolve this issue?...

foreign-sapphire

10/3/2024

Route

How we can create the dynamic routes in tanstack router? example urls:- mysite.com/anything, mysite.com/{slug} The slug can be anything. I'm trying to build a headless wordpress site using this router....

fair-rose

10/3/2024

Syncronously getting url

I would like to sycnronously get the current url.
My use case is this. I have a form submit to a database that may take some time to resolve. When the request resolves I navigate the user to a new page. But, if while the request is resolving (could take a few seconds) the user manually navigates to another page in the app, I don't want to navigate them to the new page when the request resolves.
Since the value returned from useLocation is stateful, it's value is stale if the user manually navigates while the request is resolving. Is there a way to call getLocation once the request resolves so I can check if the user has navigated while the request was resolving?...

fascinating-indigo

10/3/2024

onCatch not getting fired if no errorComponent is present on a route

I have an errorComponent defined at _root level which acts as a fallback "catch-all-errors" component. An inner route that doesn't expose any error components is throwing an error via tanstack-query's throwOnError: I'd like to use the onCatch method to evaluate the error and eventually clear any invalid search parameters. However, the method doesn't get fired unless there's an errorComponent defined on that route, so I'm stuck going back all the way the fallback on __root and cannot access the route's onCatch method. Is this the expected behaviour, or should the onCatch method get fired anyway?...

extended-salmon

10/3/2024

If no "to" prop is present navigate({search}) results typescript error

I have a new typescript issue since latest release. I use very often ``` navigate({ search: ()=> someFunction })...

deep-jade

10/3/2024

Can I matchRoute on a wildcard path?

I want this kind of logic: ```ts const isAuthRoute = !!matchRoute({ to: "/auth/*" }); // wildcard not allowed if (!isAuthRoute) { // ......

sensitive-blue

10/2/2024

addFileChildren not a function

This example uses .addChilren https://tanstack.com/router/latest/docs/framework/react/api/router/createRootRouteWithContextFunction This one uses .addFileChildren https://github.com/TanStack/router/blob/main/examples/react/basic-react-query-file-based/src/routeTree.gen.ts But neither works for me. I’m getting the error _routes_rootWEBPACK_IMPORTED_MODULE_0.Route._addFileChildren is not a function. ...

sensitive-blue

10/2/2024

router w/o typescript

Possible to use router w/o using typescript?

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