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

conservation-jade

1/9/2024

Make a type safe URL string with params and searchParams so that users can copy i

Given a route, is there a way to create a strongly typed url string for users to copy? ```ts const rootRoute = new RootRoute(); const publicUrl = new Route({...

other-emerald

1/8/2024

mask search params on all routes

How can I mask search params on all routes? I've tried: ```ts...

wee-brown

1/8/2024

Getting back from oAuth / parsing URL

I'm quite sure there's a recipe but can't quickly figure it out so maybe someone can help me. Whole app is covered by the OIDC authentication, Router included; so that untill user is authenticated, the router is not initialized. For the authentication, we send user to the oAuth page, with redirect URL (base) and actual URL user requested in the state. What I want to do is to put that state into the storage shortly until Router is ready, and when it's ready, to handle the URL by TanStack router. The caveat is that URL is not parsed and I can't send routeId to the router, I have full path. Using that in navigate would lead to Invariant failed, as the href is not an actual route. What I'm doing is to use history somehow as a thin layer that will be updated so that router will handle that as an "external" update and will parse URL on it's own – it clearly can do that if I remember correctly and probably does that on the initial load. The trouble is that I can't get it to handle history yet, but maybe this "parsing" API is exposed and I'm missing something?...

fascinating-indigo

1/8/2024

Router and Vite dynamic import issues

Hey team Problem - I'm trying to import route based code splitting, but apparently Vite has some issues with dynamic imports (see issue here - https://github.com/vitejs/vite/issues/11804). Occasionally, I'll get an error on a route like failed to dynamically fetch [component]. This appears to be a Vite specific issue, but my question issue is - how do I best protect against this error using Tanstack Router? One of the recommended solutions is to do the following (for React Router) - ...

constant-blue

1/8/2024

useSearchState a good idea for a hook?

So I've been messing around a bit and felt the need to build this thing. It works really well for me so far, but I don't know tanstack router well enough to know if it's a naive idea or actually a good idea: ```typescript import type { AnyRoute,...

constant-blue

1/8/2024

Does tanstack router not promote potentially harmful conventions?

The useSearch and useParams hooks that exist on the Route instances could be promoting a harmful convention. Since all Route instances must have a runtime reference to their parents, using the hooks via the Route instances means that any hook consumer will have to effectively depend on the entire route tree. Here's an example of what I find problematic:...

quickest-silver

1/7/2024

Using Tailwind's Catalyst UI with Tanstack Router

Hello! Catalyst requires a bit of setup with the client-side router (https://catalyst.tailwindui.com/docs#client-side-router-integration) and attempting to strictly type the Link component. I pulled heavily from @Manuel Schiller's example from another thread (https://discord.com/channels/719702312431386674/1192472012585705504/1193343346215755828) and the below technically "works" but TS is stating that the type is wrong. Feel like I'm really close but overlooking something as I'm definitely out of my league here. Appreciate any help here and will create an issue in Tailwind's issues repo with the solution to add it to their docs! ```typescript...

fair-rose

1/7/2024

Authentication / Router question

Hi all, I'm new to Tanstack router and had some questions around setting up auth/nonAuth routes. I saw the post Tanner made in his docs regarding auth routing and I'm trying to get that to work but it doesn't seem to be. I split up my routes so root has Auth and NonAuth, where both of those have all non authenticated routes and authenticated routes. I want it so if the user goes to the root domain "/" without specifying a path it will route them to /dashboard if they're authenticated and /login if they are not. Also, if they are not authenticated and go to /dashboard or authenticated routes it should route them back to login, and if they are authenticated and try to go to /login or nonauthenticated routes it should route them to dashboard. Currently my code in the beforeLoad "to" value throws an error:TS2322: Type "/login" is not assignable to type "/" ...

protestant-coral

1/6/2024

SSG / ISR

Is there any way to have SSG / ISR using tanstack router with vite?

old-apricot

1/6/2024

Facing duplicate request while using tanstack router with tanstack query

When I hover a Link with preload set to intent, a network request is called and the data gets saved on router (checked in router devtools). After clicking the link and viewing the page, another request is made and this response are being saved to tanstack query (checked in query devtools). What I am missing here?

mute-gold

1/5/2024

I would like to try to integrate Tanstack router with the new SolidStart Beta 2 :)

Hello all, I'm actually using SolidStart Beta 2, and really enjoying the project. I see that tanstack router is finally available, and I wonder If you have some advices about how to integrate both 🙂 Also, wonder how the file base routing gonna work with this combo...

wee-brown

1/5/2024

Router Context is provided but matchContext is not

Having a weird issue that appeared out of blue without noticeable changes. Using Link throws errors can't access property "routeId" of undefined as in useMatch the const nearestMatchId = React.useContext(matchContext); always results in undefined. Considering that the Match Context is always a part of Outlet, why could it happen?

apparent-cyan

1/5/2024

Navigation blocking for tests

I am currently trying to build a decorator to allow me to block navigation when within a Storybook story. Tried using both the

<Block />

<Block />

component as well as the

useBlocker()

useBlocker()

hook within a wrapper component that would then render the story, but it seems (from the examples) that the block is only effective within the component which is performing some kind of navigation. Is that the case, or am I missing something?

rare-sapphire

1/5/2024

Issue with Navigation in Protected Routes v1.1.5

Hello Community, I'm working with v1.1.5 and encountering an issue related to navigation in protected routes. This problem seems to be connected to the handling of authentication state, particularly when a simulated delay is introduced during the login process. I'm unsure if this is an issue with React's internal behavior, Zustand state management, or my implementation. Any guidance or suggestions would be really highly valuable. Context:...

harsh-harlequin

1/5/2024

Dynamic basepath

Is it possible to have a dynamic basepath?

correct-apricot

1/4/2024

Type '{ children: never[]; router: Router<Route<any, "/", "/", string, "__root__", {}, {}, {}, {},

This is my first day with TS and i'm trying to migrate my codebase from JS to TS. I'm getting this error: TS2322: Type '{ children: never[]; router: Router<Route<any, "/", "/", string, "root", {}, {}, {}, {}, {}, {}, {}, RouteContext, {}, {}, {}, unknown, (Route<RootRoute<{}, {}, {}, RouteContext, {}, {}, unknown>, ... 17 more ..., AnyRoute> | Route<...>)[], any>, Record<...>>; }' is not assignable to type 'IntrinsicAttributes & Omit<RouterOptions<Route<any, "/", "/", string, "root", {}, {}, {}, {}, {}, {}, {}, RouteContext, {}, {}, {}, unknown, (Route<RootRoute<{}, ... 5 more ..., unknown>, ... 17 more ..., AnyRoute> | Route<...>)[], any>, Record<...>>, "context"> & { ...; }'....

subsequent-cyan

1/4/2024

TRPC + React Query

I am using Tanstack router and query with TRPC. I am transitioning an application to use the new router. I am normally doing data fetching at the component with hooks using react query like so: const posts = trpc.posts.getPosts.useQuery(); You cannot use these hooks inside of the loader method for routes, so I am using the trpc proxy client to create a none react client to use, so I can use: loader: () => trpcVanillaClient.posts.getPosts.query()...

genetic-orange

1/4/2024

Strictly typed Link wrapper

I'd like to create a strictly typed <Link> wrapper like the following example: ``` import { LinkProps, Link } from '@tanstack/react-router'; ...

fascinating-indigo

1/4/2024

How to work with custom queries?

Hello. We have a custom queries which are wrappers on useQuery hooks. Example: ``` export const useBillingPlansListQuery = <TSelect = BillingPlansListOutputType>({ paramsToApi,...

protestant-coral

1/4/2024

TanStackRouterDevtools error

when using lazy TanStackRouterDevtools I get errors "A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition." im using file based routing, with vite. __root.tsx...

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