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

deep-jade

4/18/2025

Get router search params imperatively one time

So I have form with about 10-15 fields and I’m trying synchronise form state values to the query params. I use routerApi.useSearch hook to get current search values on the first render and then I am managing that state in form only. To synchronise my form state with url search params I use onBlur. I can sync it in real time because when user editing it is very slow and sluggish, so that is why I updating search params only on blur....

frail-apricot

4/18/2025

Authenticated routes example white flash screen

Hi, I am comparing both Basic (file-based) and Authenticated routes examples from docs and I noticed that when we refresh the basic all looks fine but when we refresh the Authenticated routes examples then we see a white screen for ~ 100ms and then we see the page...

optimistic-gold

4/17/2025

Electron app doesn't load when using Tanstack Router

I am currently having an issue with Tanstack Router is an ElectronForge project with Webpack here For the moment, I have setup my project with 0 error from anywhere is the code. But when I run the project, the console tells me different: and the problem is here, at the index.tsx file, at the end of createFileRoute("/") function. ...

rising-crimson

4/17/2025

What's the point of ensureQueryData in RQ examples

Like here: https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-react-query?path=examples%2Freact%2Fstart-basic-react-query%2Fsrc%2Froutes%2Fusers.%24userId.tsx First the loader does this: ```tsx loader: async ({ context, params: { userId } }) => { await context.queryClient.ensureQueryData(userQueryOptions(userId))...

exotic-emerald

4/16/2025

Code review, need advice on Auth Guarding Setup

stackblitz: https://stackblitz.com/edit/vitejs-vite-aaw7yap9?file=src%2Froutes%2Flogin.tsx The demo isn't super functional, but it gets the gist across. I'm trying to find a standardized setup for auth guarding authenticated routes. ...

correct-apricot

4/16/2025

Context with query not updating

Hey guys, I'm testing Tanstack router in addition to Tanstack query. To manage my user (with authent), I made a hook that looks like this: ```ts...

ambitious-aqua

4/16/2025

How to props typesafety for a LinkCard component?

Basically I want my <LinkCard> component to error the same way <Link> from @tanstack/router if you fail to give it a to="" prop ```ts function LinkCard({ className, ...props }: LinkComponentProps) { return ( <Link...

exotic-emerald

4/16/2025

Navigating: Router Context always Undefined in beforeLoad

Hey all. I'm wondering what I misunderstood with router-context. What escapes me is that I have a _app folder which is my wrapper and in beforeLoad I check the context for an user object and I fetch it if not present in the context. But when I navigate between the pages the context is always undefined and the user info get's fetched every time....

automatic-azure

4/16/2025

Input box dynamically changing search params with out losing focus

My current implementation is causing a re-render of my input box on each key I type into the input box causing me to lose focus on that input box. Is there a pattern I can use to keep focus but still update my search params as I type.

automatic-azure

4/15/2025

Handling of failed search params against zod schema

I am looking for a good pattern to handle errors associated with incorrect search params not matching up with zod schema. Does tanstack provide a way of handling these search params. Like fixing or stripping out them if they fail against the schema?

jolly-crimson

4/14/2025

Type Errors when using navigate from useNavigate

Hi, I am getting type errors on my search params when I pass them to the navigate function created by useNavigate. I have put together a very basic example to replicate the issue I am facing: ``` import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { zodValidator } from "@tanstack/zod-adapter";...

adverse-sapphire

4/14/2025

Different SSR options

Hello! I noticed that there are two different ways of doing SSR, the documentation in https://tanstack.com/router/latest/docs/framework/react/examples/basic-ssr-file-based and full tanstack start, but both examples actually use TSS. My question is, wich approach is best or recomended? im just interested in regular server side rendering (not streaming) nor server functions or the other functionality in TSS...

xenial-black

4/14/2025

Invalidating query/route after mutation

Hello! I am using TS router with TS query in a Vite SPA application. I have a page that lists all events like so: ```typescript...

unwilling-turquoise

4/14/2025

Code splitting with Virtual File Routes

Does code splitting work with Virtual File Routes? I've tried setting autoCodeSplitting and renaming the route to use a .lazy.tsx suffix. When I try to use createLazyFileRoute the vite plugin renames it to createFileRoute.

exotic-emerald

4/14/2025

Update Router Context key/value

Hi all. I was wondering if I'm missing the docs or if it's possible to reset one key/value pair in the router context when I do a mutation of data? Basically I want to update the context from the component triggering the mutation....

harsh-harlequin

4/13/2025

Failed to fetch route id on fast-refresh with vite

The error occurs when i make changes to the inventroy-list route leading to poor DX that requires manual page reaload or browser refresh.

jolly-crimson

4/13/2025

need access to response of endpoint before any route

The structure of my app is - ``` <QueryClientProvider client={queryClient}> <RouterProvider router={router} />...

other-emerald

4/12/2025

How to match location with fullpath in beforeLoad method

Here https://stackblitz.com/edit/tanstack-router-wryvvkja?file=src%2Froutes%2F_appLayout.tsx I am currently in a situation where i need to match a pathname (i.e "/patients/agnes_smithson-132/diagnostic-history") with "/patients/$patient_slug/diagnostic-history". Please all these are dynamic as it is in the above code. Using router.routeByPath, i get all routes object, is it possible to use location to match the current route from the routes object....

genetic-orange

4/12/2025

How to do a correct redirect using queryOptions when the api returns an error i.e 404

On first image i try to catch the error 404 and redirect but I it will do an infinite loop. Then i try to remove that approach and instead check the user on the _dashboard loader and throw a redirect when user is null. The problem with 2nd approach is it doesn't trigger it. The error from the response will be triggered first (3rd image attached:tanner:)

absent-sapphire

4/12/2025

Best practice for layout

Trying to figure out best practice for a layout like this. I want sidebar section 1 to have its own loader/pending component. Should I just use useQuery in sidebar section 1 or is there a way to position the layout routes to give section 1 its own route/loader

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