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

continuing-cyan

8/26/2024

Do beforeLoad logic on all children routes of parent.

Take tree for example ``` /users/$userId /users/$userId/foo...

fair-rose

8/24/2024

zod .catch() in validateSearch create infinity loop

Hey I have this route: ```js export const paginationSearchSchema = z.object({...

correct-apricot

8/23/2024

Problems with beforeLoad() and load()

Hello guys, im making my app with react, vite and tanstackrouter, and ive been doing great since i faced this problem from couple weeks whiout a progress and wondering if someone can give me a hand. The problem its releated with how the app its handling the auth of the user, im trying to protect the routes with beforeLoad() but its been ignoring by load() and its rendering first the data. Im trying all the ways to fix it but nothing fix it. If somebody can give me an advice that will be helpful...

absent-sapphire

8/23/2024

Navigating between Micro-Frontends with TanStack Router's <Link> component

Hi everyone, I'm working on a monorepo with multiple micro-frontends using single-spa and module federation. I'm using TanStack Router for routing within each micro-frontend. I'm trying to figure out the best way to extend the <Link> component so it can navigate between these micro-frontends. I have a basic implementation that removes the basepath when ignoreBasePath is set to true, but I'm not sure if this is the most efficient or recommended approach....

continuing-cyan

8/22/2024

Typing params for top level routes that might have them?

Is it possible to type params that might exist at a higher level? Aim here is to swap cookie values if a specific param value changes ```js const appRoute = createRoute({ getParentRoute: () => rootRoute,...

rare-sapphire

8/22/2024

Type error <Link to={"./"} />

Hello, idk how to solve this type error, the link is working fine as it should be, but this red line is so annoying

eastern-cyan

8/22/2024

Offline first approach with PWA

Hi Guys I want to run a PWA offline first webapp with tanstack router. Did anyone has experience with it? An old project is using React Router and the Vite PWA plugin. I wonder if that would work with tanstack file based routing + lazy routes work out of the box? Any hints are more than welcome, thanks!...

exotic-emerald

8/22/2024

parseParams and stringifyParams deprecated

What interfaces I can use to fix this deprecated properties?

like-gold

8/21/2024

How to use useSearch from multiple routes?

I have two routes /posts and /posts/$pId. The /posts route defines search params with validateSearch. In a custom hook I use getRouteApi("/posts") to receive the useSearch hook and access the search params. That's fine so far: ```...

conscious-sapphire

8/21/2024

Read from ReadableStream on page load

Potentially stupid question but suppose I'm trying to do something like Claude where you ask a question from the home page then redirect to the chat page with a response immediately streaming in. How would I properly read from the stream following the rules of react? My current setup is using tRPC to send a mutation on the home page and get back a ReadableStream for the AI response, then passing that stream to the chat page with router context. In the chat page I'll start reading from the stream in a useEffect, but I don't think it's possible to make that effect pure? Since when you attach a Reader to the stream and start reading, you can't abort the read so a cleanup function that detaches the reader could cause an error where the reader tries to read from the stream when it's already detached. I suspect my general approach to this could just be wrong, would love any suggestions....

wise-white

8/21/2024

Loading component only on initial load?

I want a loading component to only show on log in or full reload, as that's when the majority of loading will occur (so this will live in my _authenticated routes). Is there a way to achieve this? If I set a pendingComponent, this will just run on every page. Maybe I can just use React to achieve this

extended-salmon

8/21/2024

How to block, if user wants to leave a route-tree?

Hey 👋🏽 @Sean Cassiere @Tanner Linsley , I have a create-order route with multiple steps. So the route-tree looks like this: create-order/step-1 create-order/step-2...

eastern-cyan

8/21/2024

Typescript error with Vite + file based routing

I upgraded all my router dependencies but receive typing errors.

rare-sapphire

8/20/2024

Auto-redirect when accessing a route

Hey everyone, quick question: how do I automatically redirect a user from my-url.com/courses to my-url.com/courses/in-progress? Maybe I could use the beforeLoad option?...

ratty-blush

8/20/2024

How to avoid "loading" state when using beforeLoad

I'm using TanStack Router and Query in my React project, and I'm trying to conditionally handle the beforeLoad event based on the presence of a token in local storage. When I even have empty beforeLoad the pending state is appearing even for second. Here's what I'm trying to achieve: No Token: If there is no token in local storage, I want to skip the beforeLoad entirely to avoid showing a pending component. With Token: If a token exists, I want to trigger a request to my API to fetch user data during the beforeLoad event....

variable-lime

8/20/2024

Optimizing build/bundle size for specific pages

Hey, I'm new to TanStack router so I have a few questions about making a good build for a webapp. I'm using Vite/React/TanStack Router to create a webapp with authentication, and I want to make sure the login page loads as fast as possible and has a small bundle size. Currently my routes look like this (all routes in the _auth directory are for when the user is logged in, all the routes in the _public directory are for when he is not): ```...

stormy-gold

8/20/2024

Prevent `component` from rendering when `beforeLoad` throws an error.

This is my root router, and I want to prevent component from rendering its content when an error is thrown in beforeLoad. The docs says the following

This async function is called before a route is loaded. If an error is thrown here, the route's loader will not be called and the route will not render

...

wise-white

8/20/2024

How to retrigger the pendingComponent when using `useSuspenseQuery`

Hello everyone! I have a posts component that is a list of posts, and a button that caps the limit of the amount of posts to 10. When loading this route initially I have a pendingComponent that reveals my pending ui. When I click the limit button I want to retrigger this pending UI, and then rerender the data in my component with the updated data What actually ends up happening is that it refetches my /api/posts endpoint, and then the component rerenders, but the pendingComponent doesn't come back or show. Here's my component structure...

optimistic-gold

8/20/2024

How To Get Previous URL

Is there a way to get the previous URL (the URL of the page that was navigated from) in TanStack Router? I already know how to store values in search params , path params or state params, so please let me know if there are any other way....

automatic-azure

8/19/2024

Documentation in code

Hi, is there anything i can do to get better docs in my code than this? I find myself having to dig through so many types just to see what's happening or what options I can pass to a function. Am i missing a package?

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