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

stormy-gold

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

complex-teal

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

magic-amber

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

stormy-gold

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

rare-sapphire

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

plain-purple

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

optimistic-gold

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

passive-yellow

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

fair-rose

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) { // ......

adverse-sapphire

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

adverse-sapphire

10/2/2024

router w/o typescript

Possible to use router w/o using typescript?

stormy-gold

10/2/2024

Is there a way to cancel a navigation event in Route.beforeLoad?

Am building an Electron app, where we want some urls to open in a separate window. We would like to handle this on a router or route level instead of manually opening popup windows. Trying to accomplish this by checking for specific urls in the root route beforeLoad method, but I can't find a way of cancelling the navigation event....

correct-apricot

10/1/2024

combining react query and defer

I have a page that displays articles and tags however I don't want to wait for the tags to load before displaying the articles. Is this the correct way to combine react query , ensureQueryData and defer to achieve this result? The full sandbox is here:...

probable-pink

9/30/2024

Re fetching with React Query when the URL changes?

Hi all - I've been trying to implement a system where a paginated API call is made using React query but using the URL parameters to control the requests using the Route API and the recommended approach for search parameters. I've been experimenting with the loaderDeps but can't seem to get it working. For instance increasing the page number by 1 is intiated using a <Link> taking the user to the search url page (+1) and I was hoping then would re request through react query with the updated fil...

ratty-blush

9/30/2024

Cookie based authentication approach

Hello all. I have a cookie based authentication approach. In my login page and in my _app layout i have a beforeLoad function like this: login.tsx ```ts...

wise-white

9/30/2024

Best way to do optional path params (for i18n)? Virtual routes?

Hey everyone! We've been experimenting with Tanstack Start and Router for a frontend refactor of an app we have. One of the requirements is optional path prefixes for i18n, i.e. /todos/:id should be identical to /en/todos/:id if en is the fallback language, otherwise prefixes are specified for all other languages. Is there a way to achieve this with router? We've been trying with virtual routes, but it seems codegen goes all over the place when you combine root-level virtual routes with Tanstack Start. With every combination we tried the codegen hangs trying to generate routes....

graceful-beige

9/30/2024

How to use context data in a loader

Hi, I'm confused about using data from the useAuth hook that returns the userId. How do I use it in the loader where the userId is already in the context?

rare-sapphire

9/30/2024

Persist URL Parameter Across Navigations

Hi everyone, I'm using TanStack Router and I want to set up a specific URL parameter (named commit) at the root route level that should persist across navigations. If the parameter has a value, I want it to be retained automatically when calling the navigate function, without needing to explicitly handle it for each navigation event. I couldn't find a straightforward way to implement this behavior. Does anyone have suggestions on how to achieve this? ...

ambitious-aqua

9/30/2024

Importing generated router file causes nitro startup error

Hi! I am using tanstack router with vinxi and trying to get ssr working (before you ask I have reasons for not using start although it is very cool) ...

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