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

rare-sapphire
rare-sapphire5/23/2025

Hi all,

Is there a way to access the data loaded from parent/grandparent routes in a child page's loader method? My case is user is loaded at grandparent route, then projects at parent, then docs at child. In order to fetch the doc I need the user id and project id to do so, and this seems fairly difficult to get. I'm currently going down the router context path on sticking my user onto the context, but this feels unintuitive, as I would feel like all the data loaded in the chain should be available to...
jolly-crimson
jolly-crimson5/23/2025

Zod V4 fallback

Did anyone already tried Zod V4 with Tanstack router search params? I have this search params object ```ts export const GroupsRequest = GroupsFilters.extend({...
deep-jade
deep-jade5/23/2025

does tanstack router has api routes for backend codes?

i guess i have some issues during build
inland-turquoise
inland-turquoise5/22/2025

How to wait upper loaders

Is it possible for a sub-route loader to wait for the loaders in the upper trees? Ex: /users -> has loader...
eastern-cyan
eastern-cyan5/22/2025

What does color do in manifest link element in __root.tsx?

I have outlined color in the image.
No description
fascinating-indigo
fascinating-indigo5/22/2025

Preload only after a user has hovered for a set amount of time

Is it possible to make the preload until a user has hovered for a certain amount of time?
sensitive-blue
sensitive-blue5/22/2025

Get data before ANYTHING load

I am fetching data this way export const Route = createFileRoute("/snippets/$snippetId")({ loader: ({ context: { queryClient }, params: { snippetId } }) => { return queryClient.ensureQueryData(snippetQueryOption(snippetId)); },...
No description
extended-salmon
extended-salmon5/22/2025

Avoiding duplicate routing

Take the following routing example: posts/$postId posts/$postId/meta posts/$postId/settings posts/$postId/content...
deep-jade
deep-jade5/22/2025

what's the ts type for context?

export const Route = createFileRoute("/")({
loader: async ({ context }) => {
export const Route = createFileRoute("/")({
loader: async ({ context }) => {
...
harsh-harlequin
harsh-harlequin5/21/2025

Link on mousedown breaks view transitions on phones

I created this CustomLink component to be able to navigate instantly on mousedown, but it breaks view transitions on phones 👀 : ```ts import { createLink, type LinkComponent } from '@tanstack/react-router'; export const CustomLinkComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {...
eastern-cyan
eastern-cyan5/21/2025

how to add loading on change page

Hello, I would like to know how I can add a load until the page loads
stormy-gold
stormy-gold5/20/2025

Navigating while refetch is in progress results in cache not being used

I was wondering if the behavior I am observing is a bug, or if I am doing something wrong. When defining a loader with long loading time I see the stale data as expected when navigating to the route from another route. The navigation also correctly triggers the refetch of the stale data. Now when I navigate to another route after triggering the refetch without waiting for the refetch to be done, and navigating back to the route immediately, I don't get the stale data, but instead have to wait for the loader to be done....
like-gold
like-gold5/20/2025

How to detect previous route?

I can get to a route from 2 different route, and I want to be able to render the breadcrumb differently. So it would have 3 to 4 items in the breadcrumb depending how I get to that view. Thanks in advance!
genetic-orange
genetic-orange5/20/2025

expose route context select

Hi! I'm working on a big component and for perf reasons, I don't want to pass all recursive data top down but rather only the top data and each component is responsible for getting the right data: ```tsx <Example> {ids.map(id => <ExampleGroup key={id} id={id} />)} </Example>...
fair-rose
fair-rose5/20/2025

Best Practices: Pagination / Filtering via Search Parame

Hello, I am working on a table search/filtering page - pagination: next, prev 1..2…….n-1…n...
ambitious-aqua
ambitious-aqua5/20/2025

Custom serializer?

The docs mention you can set a custom serializer for ssr, however this api seems to have changed as there is no serializer key anymore. Is this still supported or is there another place this is defined now? on version 1.120.5...
No description
passive-yellow
passive-yellow5/19/2025

Set staleTime in the loader?

Is there a way to set the staleTime from inside the loader? Depending on the params/searchParams I'd like to set a different staleTime. Here's my use case, and I'm open to other ways of achieving it! - I have a basic search page...
broad-brown
broad-brown5/19/2025

Navigation blocking but ignoring search parameter changes

I have a form that initializes based on a query parameter (type: string). Inside the form, the user may change the 'preset' type in case they initially chose the wrong one. To support copying the link and sharing it with others, I wish to then update the query parameters with the form as the source of truth. ...
sensitive-blue
sensitive-blue5/18/2025

Reading that route path is empty.

Have routing that is $ida/$idb . I need to persist an item in the $ida route, but this item needs to access the current idb value to determine weather to make this item invisible or not. Which I normally do through
const idb= useParams({from: '/$ida/$idb/'}).idb;
const idb= useParams({from: '/$ida/$idb/'}).idb;
However when I visit $ida page, it errors with Invariant failed: Could not find an active match from "/$ida/$ifb/"...