TanStack

T

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

harsh-harlequin
harsh-harlequin4/5/2024

How to handle auth context update

Hi guys i'm new to tanstack router and i'm loving it so far. I have a question though on the best way to handle authentication. At the moment my App component looks like this ```tsx...
rare-sapphire
rare-sapphire4/5/2024

How to show the loader while it's loading `createLazyFileRoute`?

I can't find in the documentation how to show loder while a lazy route is loaded
fair-rose
fair-rose4/4/2024

Dynamic breadcrumbs, fetched from API

I am struggling on how-to implement dynamic breadcrumbs, which we did with React router, where for instancewe go to Edit product page we would like to display the product name which we only know when we have retrieved the data. I have implemented breadcrumbs using context and setting breadcrumbs from loader, but how can (if possible?) I achieve this from fetched data? Any tips is greatly appreciated.
harsh-harlequin
harsh-harlequin4/4/2024

getRouteApi error

Hi ! I just added a new route in my application and it now shows this error in all my getRouteApi calls : "Type instantiation is excessively deep and possibly infinite." I've got a bit more than 100 routes. Everything was working well before I add this new route. Does someone has the same issue ?...
extended-salmon
extended-salmon4/4/2024

Show optional modal based on route without loading additional data

I have the following urls /overview and /overview/$singleID where the main page is a table of content and if you click on something I want to show a modal. Right now I've solved this with an <Outlet /> and it works great. But since I can't pass data down to the Outlet I need to load data twice. I could obviously solve this using a context but this feels overkill. What's the best way to have two routes load the same view? I could control the modal based on if $singleID is set or not. But how would I then have both /overview and /overview/$singleID load the same component?...
fascinating-indigo
fascinating-indigo4/3/2024

How to get the full path?

Is there any way of getting the whole path without me always having to use the javascript location.pathname?
extended-salmon
extended-salmon4/3/2024

Bun + React test renderer + Tanstack Router

Hey there. Is anyone here who has successfully setup a bun unit test for a React component which uses a tanstack router hook? As the RouterProvider does not take any children im not able to use this Provider. I'm kind of stuck. Help would be appreciated ...
correct-apricot
correct-apricot4/2/2024

Authenticating createLazyFileRoute

So I know that beforeLoad exists in createFileRoute but not createLazyFileRoute. How would I authenticate my lazy route in this case?
generous-apricot
generous-apricot4/2/2024

[bun 1.1.0] bun install @tanstack/router-vite-plugin issues?

Has anyone else encountered issues with istalling @tanstack/router-vite-plugin with bun? I try doing it normally, as a tarball, but nothing works. I'm on Windows using bun v1.1.0....
harsh-harlequin
harsh-harlequin4/2/2024

Best way to handle authenticated routes with http-only cookie

I am currently trying to find a way to process a http-only session cookie with Tanstack Router. The docs explain that you can use the beforeLoad-fn to redirect to the login route if necessary. My routes are...
xenial-black
xenial-black4/2/2024

Using file based router to manage directories routes and redirect to child route.

If using file based router, like: ``` layout/ index.tsx foo.tsx...
conscious-sapphire
conscious-sapphire3/31/2024

Layout with redirect to child route

Hey! I'm in the simple situation with a /layout route with some html and two child /layout/a and /layout/b I'd like to set a redirect on the parent /layout to the child /layout/a, how can I do that?...
noble-gold
noble-gold3/31/2024

clean fct when leaving a route

Hi, Is there any built-in mechanism to call a fct when leaving a route? Let's say, I want to clear some data in my redux store when leaving my page (route), how can I deal with this?...
xenial-black
xenial-black3/31/2024

Nested Routes that varies between Outlet and specified components

Hello! I created a sample code below https://stackblitz.com/edit/github-gvqtql How would I restructure this so that /foo/bax/baz will render as it's own page and not as an Outlet on /foo while keeping /foo/bar and /foo/bax rendered on the /foo. Thank you so much!!...
rival-black
rival-black3/31/2024

Typescript issues with file based routing

```import { createRouter, ErrorComponent } from '@tanstack/react-router'; import { routeTree } from './routeTree.gen'; import { queryClient } from '@/api-hooks/queryClient'; import { Spinner } from '@/components/common/Spinner'; ...
continuing-cyan
continuing-cyan3/30/2024

useBlocker triggers an event when we, for example, change the search parameters through navigate

Is it possible to use something other than a boolean flag, similar to what React Router DOM does? And can we actually obtain, for example, the next location?" let blocker = useBlocker( ({ currentLocation, nextLocation }) => value !== "" &&...
harsh-harlequin
harsh-harlequin3/29/2024

How to pass link props to a child component

Hi. I need to be able to pass link props to a child component to allow this child component to show a link component with props passed as props. How can I do it type safely ? Thanks for your help !...
evident-indigo
evident-indigo3/29/2024

Link component params prop type error

Application works fine with no crashes, but I get this type error. NOTE: Broke after updating from 1.19.4 to 1.24.0...
No description
jolly-crimson
jolly-crimson3/28/2024

Recommend way to navigate when destroying with TanStack Query

I am using TanStack Query and TanStack Router in my app. I have a list of items, click on one to go to view its details and from that route I can delete the item. After I delete the item I want to go back to the list. Easy peasy. Should I navigate back to the main list in the route component or should I navigate back to the main list in the useMutation?...
xenial-black
xenial-black3/28/2024

Resetting InfiniteQuery on navigate replace

Hi! I have a form where one of the select fields uses useInfiniteQuery to populate the select items. On form submit, the page refreshes via useNavigate with replace: true and the form values as the search parameters. But if I check the field again after navigation, the items in the select field are the values of the next page of the useInfiniteQuery before I submitted the form. I was hoping to ask what I can try to maybe reset the query to the first page again when it navigates to the same page. Thank you! (I'm actually not sure if I should post this here or on Query)...