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

realistic-cyan
realistic-cyan12/19/2024

TanStack Router vs React Router V6 -> V7 (Stable) - Which is better?

Which provides more capabilities and a better developer experience? I've ran into some warnings of React Router V7 (RR7) still using Vite 5. In addition, using the new Framework style of RR7 - namely the Router Provider Framework style, there seems to be a weird injection of clientLoader, Loader and converting the routes to use this (https://reactrouter.com/upgrading/router-provider#1-move-route-definitions-into-route-modules). Seems to be Tanstack Router is cleaner, but I'd love to know the com...
absent-sapphire
absent-sapphire12/19/2024

href prop not working on `Link` component?

I am confused. What am I missing? https://stackblitz.com/edit/tanstack-router-tn3dvcbd?file=src%2Froutes%2Findex.tsx I have a Link component with href set to "https://google.com". I would expect this to display an anchor with that URL...
fair-rose
fair-rose12/19/2024

How to Link to same route (dynamic) with different parameters?

In version 1.53.1 I was able to render <Link params={{accountId: '456'}} /> without to or from and have it build hrefs for: - /accounts/$accountId - /accounts/$accountId/posts/$postId - ... ...
eastern-cyan
eastern-cyan12/19/2024

Optionally replace param

I'm trying to optionally replace a route param (e.g. /$lang/... to /$anotherLang/...). In practice I'm looking for something similar to useParams({ strict: false }) but for setting parameters. The behaviour would be:...
eastern-cyan
eastern-cyan12/18/2024

Change `<html lang>` attribute

Is there a way to change the <html> lang attribute in a nested route (e.g. /$lang) based on URL params? Thanks...
deep-jade
deep-jade12/18/2024

Rename `/app` to `/src` folder

Trying to make this work, but this leads to problems (in dev and not building...). Tried a lot of config adjustments. Latest is ``` export default defineConfig({ tsr: {...
stormy-gold
stormy-gold12/17/2024

TanStack Start SSR Hydration Failure when using loader() for Breadcrumbs component

Playing around with TanStack Start and was trying to implement the breadcrumbs component with useMatches() via the loaderData defined during createFileRoute(). ```javascript // _main.tsx const matches = useMatches();...
rival-black
rival-black12/17/2024

Redirect to another website if missing search params

Hello folks, from our main website we select the items etc and then user clicks on "Proceed" and they navigate to our SPA and we pass some search parameters like IDs, some flags, etc. All of them required, if one of them is missing we should redirect back to the main website they came from. Currently if the paran validation fails, I just display the general error screen and validate if error.routerCode === "VALIDATE_SEARCH" is true, then redirect the user to our main website. Is this the better approach? I dont wanna make our general error screen dirty, can I do the redirecting in the beforeLoad or something like that?...
eastern-cyan
eastern-cyan12/16/2024

Search params in loader (unclear part of the documentation)

Hi, I'm reading the documentation related to the rationale for not having search params directly available in the loader and I'm not sure I understand the rationale 😅: https://tanstack.com/router/v1/docs/framework/react/guide/data-loading#using-search-params-in-loaders Assuming the router scopes each request based on pathname + search params, in what case would using search params (vs different route segments) cause the issues described in the section? -----...
rival-black
rival-black12/16/2024

useBlock is the best approach for this use-case?

I have a 1 page SPA. From the url, the user always, come with queryParameters example internetPlanId=1&mobilePlanId=4 In the UI we populate selections based on those parameters....
ambitious-aqua
ambitious-aqua12/16/2024

Persisting Data with Query

Nested within _authed, I have several different routes and trees relying on profile ID. I'm looking for the best practice to store the ID. I originally started with Zustand for this but trying to utilize React Query for this as much as possible, but getting confused on integrating that with routers. Currently, I store the session info in router context and was looking to do the same with profile ID (after fetching with session.user.id) but not sure the best way to use that and fetch profile data for nested components. There is also a workflow for a user to view a separate profile so the profile ID would need to be changed on the fly. Is context the best approach? Do I need to worry about reloading the page and unnecessary re-fetching of the ID? Any advice on best practice and an example would be much appreciated! I'm getting confused with using context vs datastores and incorporating Query...
exotic-emerald
exotic-emerald12/15/2024

Possible to call a server function within an api route?

I can't get around this error: createServerFn must be called with a function that is marked with the 'use server' pragma. Are you using the @tanstack/start-vite-plugin
wise-white
wise-white12/15/2024

Possible to call loader without navigating to url?

Was wonder if it's possible with tanstack router to call the loader without triggering the navigation. I.e. would like to overwrite the <Link /> component to "onMouseDown" load the loader, so all data can already be fetched. onClick it naviates to the page....
homely-rose
homely-rose12/15/2024

Is there any way to have middleware for API Routes

As far as I can read from the docs, I can create middleware for server functions, however, it doesn't seem to state anything about API Routes, did I miss it ? Is there any way to create middleware for them ?
continuing-cyan
continuing-cyan12/14/2024

How to navigate to root path in splat route without TS complaining?

I have a route _authenticated.my-files.$.tsx which I want to catch /my-files, /my-files/folder, /my-files/any/folder-depth, and this works, however, when I go to /my-files/this/folder/does/not/exist, I make sure I throw the result of notFound() inside of the loader function of the Route which calls the notFound handler, and in this handler I want to return the user to the root path of the splat route which is /my-files, but I can't seem to do that without TS complaining. If I try to navigate the user to /my-files/$ which is what TS want me to do, then the URL doesn't change. Will I have to split my route into a route only for /my-files and then a catch all route for everything under /my-files? ```ts...
No description
continuing-cyan
continuing-cyan12/13/2024

How to make default search params to not be populated when visiting page.

I have a page "/my-files" with a bunch of search params where each parameter have a default value. I have a link to this page looking like so: <Link to="/my-files">. When clicking on this, the URL get's populated with the default search params so it looks like this: /my-files?sort=a-z&page=1&pageSize=10&query=. I would like the URL to be kept as /my-files and only have the URL be populated when a search param is different than the default. Is what I want to do an anti-pattern of sorts? This is my route configuration:...
extended-salmon
extended-salmon12/13/2024

Invariant failed useMatch

Hello, I don't exactly why but sometime, when I click on a <Link><Link>, I have Invariant failed which appear. ```...
continuing-cyan
continuing-cyan12/12/2024

Prevent search params from being inherited?

Can I make search params not being inherited in nested routes? I have a page /files which receives a bunch of search params for filtering and ordering files. Then I have a route /files/$fileId and it makes no sense to have search params for that route.
afraid-scarlet
afraid-scarlet12/12/2024

How to fix slow UI update on navigation using Link?

Hello, I've noticed that pages occasionally loads very slowly upon navigation. When I click on a menu item, the URL updates, but the UI doesn't respond right away. Sometimes it takes a long time to load, and other times I need to refresh the page to see the changes. I'm using Tanstack Start with Convex.dev. Some pages contains queries, but I haven't been able to isolate it to routes containing queires....
vicious-gold
vicious-gold12/12/2024

How to unit test (jest) route lazyRouteComponent?

Hi, i'm using lazyRouteComponent on Code Based Routing, but when i try to unit test (jest) which keep getting an error. any idea how to solve it? ... const homeRoute = createRoute({ getParentRoute: () => privateLayoutRoute,...
No description