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
How to use ValidateLinkOptions to type a React Aria Component MenuItem that uses createLink?
Hi - I have been really struggling to get types to work correctly when creating a wrapper around a RAC
MenuItem component. The docs say to use ValidateLinkOptions when passing link related params...the issue is that createLink returns the actual type of the component instead of converting it to an anchor tag, which means I get DOM event mismatch errors when spreading the props on the "link" such the one below since the original MenuItem component is a div...
Type 'MouseEventHandler<HTMLAnchorElement> | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'...here is the example i was going off from the docs but combined with RAC and
createLink. And here's a stackblitz playground that uses this code for convenience: https://stackblitz.com/edit/github-utepv35x?file=package.json,src%2Fmain.tsx,src%2Froutes%2Findex.tsx...Router + Query integration // route invalidation
I'm torn between 2 things:
```ts
loaderDeps = ({ search }) => search,
loader: ({ context: { queryClient }, deps, params }) => ...
Link navigates using stale param despite the href using the updated param
I'm running into a bizarre situation where the links I render use the correct params but then navigating to them uses a stale param. For example:
1. Navigate to
/projects/$projectId where projectId: 1, which renders link that navigates to /projects/1/members with the same project id param used
2. Navigate to /projects/$projectId where projectId: 2, which renders link that navigates to /projects/1/members, despite the href being /projects/2/members...Migrating from TanStack Router to Start
Has anyone put together instructions or even an AI prompt for converting from tanstack router to start?
Scoped view transitions
I couldn't find any threads discussing this, so I wanted to ask what (if any) are the plans with scoped view transitions:
https://developer.chrome.com/blog/scoped-view-transitions-feedback
I've recently migrated my personal application from motion -> view transitions, and the immediate problem I have is that view transitions block the entire page - making navigation or cancellation of a transition impossible. Scoped view transitions should solve this by allowing the browser to only animate a particular sub tree of the browser.
...
typesafe pathname?
Hi why useLocation().pathname is a string? Why can't codegen get the type properly? What other function gives me typed all possible pathnames?
URL hash manipulation ??
Hey everyone,
This might seem like a stupid question, but how do you manipulate a url hash in tanstack router ?
Like how could I read, update and delete
hello from this url http://example.com/page#hello ?...SSR error on build in new project
I set up a completely new project using
pnpm dlx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn and then ran pnpm run build in it.
I am getting the following error:
```
error during build:...Redirect on Login
I want to be a able to go back in previous page after sign in .How can perform such redirect.Where should i store previous route history and pick it up after successful sign in mutation
Is it possible to access router.buildLocation() in a Server Route?
Did a cursory search for buildLocation, and no results returned...but is it possible to access
buildLocation() (or something simillar) on a server route so that I can build a typesafe redirect url?
```
export const Route = createFileRoute("/(api)/api/auth/callback")({
validateSearch: z.object({...Multiple Convex calls on SSR with Clerk auth — 5 calls, one unauthorized on refresh
Hi! I’m using TanStack Start + Convex + Clerk following official guides.
On client nav, one Convex call works fine. But on a full refresh, I see 5 identical Convex queries, and one fails with ctx.auth.getUserIdentity() = null (UNAUTHORIZED).
The failed call has the current timestamp, while the 4 others have older ones since they are cached....
Eslint rule `@typescript-eslint/no-unsafe-assignment` triggers on `useParams` or `useSearch`
I've recently tried to update my code all the way up to the latest version and noticed a few eslint issues here and there in my codebase.
I could trace it down to a change between
1.132.0-alpha.4 and 1.132.0-alpha.8.
I get the following error:...Couldn't get pendingComponent to render
I know I'm using
createServerFn from Start, but I think this is more of a Router question, so I think it fits here.
Anyway. I'm working on a fresh Start project via pnpm create @tanstack/start@latest. I'm still new to the whole Tanstack stack. I'm reading the doc about Data Loading, and in the Showing a pending component section, it is said that pendingComponent will be shown when it takes more than 1 sec for the loader to resolve.
EDIT...Router not building on mac
Hey guys, I'm developping an electron app, mainly on Windows. Now I'm travelling, and just cloned the repo on my macbook, and I get some errors when building, and I have no clue why it does trigger those errors, since I don't have it on my vscode, and it works on my windows.
Errors on the image, here is my routeTree.gen.ts: https://pastebin.com/mjWxY7gT
Any idea what is going on ?...
solid-router have some problem i think it's on cli
when i start the server it import react-router instead of solid-router for all routes
import { createFileRoute } from '@tanstack/react-router'// even if i remove thisit import it automatically why is that
import { createFileRoute } from '@tanstack/solid-router'
export const Route = createFileRoute('/')({...
Is it possible to access browser QueryClient without passing it as a function parameter?
I couldn't seem to find a quick answer, but I have a
beforeLoad that I'd like to call to verify permissions and since I'm use Tanstack Query I want to use ensureQueryData so I can utilize browser cache if it exists. I would like to extract the logic in to a function and I was curious if I could access my client without needing to pass it as a function parameter?
```
const hasPermission = async (queryClient: QueryClient, permission: PermissionEnum) => {
// implementation......Random failure of file-based route matches across unrelated folders
đŸ¤¯ I'm encountering a mind-bending issue with file-based routing: in our setup, each folder has route.tsx and index.tsx as siblings, both calling createFileRoute, and we expect two matches (one for each).
For certain folders, the index.tsx match (the one rendering the component) completely fails to register, leaving only the route.tsx match.
To make it worse, the issue seems interdependent—renaming or removing unrelated folders sometimes resolves or breaks it for others.
I have a private repo that reproduces the bug and can share it privately.
...
Does code-based router works with SSR?
Is it possible to run SSR with code-based router?
Didn't find anyinformation about limitations of code-based router in documentation. But it looks like when I try to use SSR it tries to generate routeTree from files anyway, and of course there is no __root file and I get such error.
Did anybody tried code-based router with ssr?...
thrown errors in context lifecycle method renders nothing (errorComponent)
Hi, the route
context() lifecycle method "hangs" when thrown errors happen, leading to no content being rendered at all. I expect the errorBoundary to show, much like it happens in beforeLoad. Is this intentional?SSG
https://x.com/tannerlinsley/status/1887914853215649947
How can I do static site generation (html files) when deplyong to Vercel?
I'm aware of this https://tanstack.com/start/latest/docs/framework/react/guide/static-prerendering but it seems to only work when I do NOT use the nitro plugin on vite.config.ts...