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

xenial-black
xenial-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....
correct-apricot
correct-apricot12/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...
adverse-sapphire
adverse-sapphire12/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
extended-salmon
extended-salmon12/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....
genetic-orange
genetic-orange12/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 ?
absent-sapphire
absent-sapphire12/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
absent-sapphire
absent-sapphire12/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:...
equal-jade
equal-jade12/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. ```...
absent-sapphire
absent-sapphire12/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.
ratty-blush
ratty-blush12/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....
adverse-sapphire
adverse-sapphire12/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
frail-apricot
frail-apricot12/12/2024

Implementing a Table of Contents (hash change scroll issue)

I am trying to implement a Table of Contents sidebar for an API documentation site (in one-page style) that contains hash links (e.g., to="#Auth"). When clicking on one of the Table of Contents links, having the browser scroll down to the anchor that matches the hash is working as expected. The part I'm running into some trouble with is when I try to update the hash as a result of the user scrolling down the content part of the site. When I try to update the hash in the URL, the browser scrolls to the anchor element, but I'd really like to avoid that behavior so the user can scroll at their own pace. I've tried using navigate, updating the location state using router.buildAndCommitLocation, and even just trying window.location.hash = '#Auth'. All of these result in the hash being updated in the address bar, but they also all take over scrolling. I believe the latter is happening because the history implementation is overwriting window.history to support the router's subscriptions. I found this PR, which seems relevant to the issue I'm experiencing: https://github.com/TanStack/router/pull/1105#issuecomment-2019026150 (the code causing the scrolling seems to have moved here: https://github.com/TanStack/router/blob/35af575ab4c623556ecdb613ac1c85864f0c95d9/packages/react-router/src/Transitioner.tsx#L146) If I'm understanding correctly, the recommendation was to try using the Scroll Restoration API. I wasn't able to get that to work either, unfortunately....
like-gold
like-gold12/11/2024

Is there a way to force throw away the previously rendered instance of the same page?

When navigating between two instances of the same page, i.e. just switching out a param, all the state of the page is maintained, which leads to bugs in our case. Is there a way to force the router to throw away the state of the old page? Like when you add a key to component
helpful-purple
helpful-purple12/11/2024

Router Memory History route not persisting upon page reload

I was using Browser History when setting up tanstack-router to my react-vite-electron project. Unfortunately, during build this was not working due to some Electron issues, which made me switch to Memory History. https://github.com/TanStack/router/discussions/835 I am new to Memory History and it seems like when I reload/force-reload the page in Electron, the route switches to the index route which did not happen when using Browser History. Is there a way to prevent this?...
extended-salmon
extended-salmon12/10/2024

Declarative Link Handling with Async Parameters

What’s the best practice for using the Link component when a parameter (e.g., sessionId) needs to be fetched via an async call? I know I can use router.navigate() imperatively, but is there a declarative way to handle this scenario? ```tsx <Link from={Route.fullPath}...
exotic-emerald
exotic-emerald12/10/2024

Scaffolding a new project fails

Running the CLI fresh fails to scaffold a router project. ❯ npm create @tanstack/router@latest Need to install the following packages: @tanstack/create-router@1.87.4...
extended-salmon
extended-salmon12/9/2024

Disable link when not allowed to visit

Is there a way to share some state between the route itself and the link? I have a permission check in the route and i want to disable the link when the user cant visit it but i want to prevent from writing this logic twice since it would be really easy to miss something? I thought of this ```ts export const hasPermission = () => { const user = queryClient.getQueryData(authQueries.getMe().queryKey)...
constant-blue
constant-blue12/9/2024

ELECTRON DYNAMIC ROUTES

Having massive dramas getting dynamic routes in electron to work for me. Any help would be great, It's successfully getting Id and triggering click. I've tried various patterns from docs to no success. The paths I have are src\pages\vehicles$vehicleId.tsx...
deep-jade
deep-jade12/8/2024

router.invalidate

Could somebody explain what router.invalidate actually does? I'm seeing this function a lot in the examples, and don't know why?
correct-apricot
correct-apricot12/7/2024

Library nuqs

Can the nuqs (https://nuqs.47ng.com/) library be used in the tanstack route? has anyone used it before? or is there another solution to make it easier to manage search params for universal use in a hook datatable tanstack table? the hook is like this but to be implemented in react vite and tanstack route is different to manage the search params...