TanStack / TanStack/router

using redirect factory in `beforeLoad` breaks type inference

Open
#5,524 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement types
Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

Using beforeLoad factory with urls like ...entity/$entityId/info, ...entity/$entityId/detail breaks route types inference.

My route config looks like this:

export const Route = createFileRoute('/$companyId/_layout/entities/$entityId')({
  wrapInSuspense: true,
  component: EntityPage,
  beforeLoad: makeBeforeLoadRedirect({
    from: '/$companyId/user/entities/$entityId',
    to: '/$companyId/user/entities/$entityId/info',
  }),
});
Your Example Website or App

https://stackblitz.com/edit/tanstack-router-4u7q7qsv?file=src%2Froutes%2Fposts.%24postId.tsx

Steps to Reproduce the Bug or Issue
  1. Go to posts.$postId.tsx
  2. Look that postId param has any type
  3. Comment the beforeLoad code to fix the error
Expected behavior

I'm expecting that the createFileRoute call should define the types of my configuration and not vice versa.

The solution I found that requires changes in the router codebase is adding NoInfer to the types inside the beforeLoad BeforeLoadContextOptions on line https://github.com/TanStack/router/blob/57bb7950b63e0433f6284f414d2ba73d1452bc37/packages/router-core/src/route.ts#L963

Screenshots or Videos

No response

Platform
  • Router version: 1.133.13
Additional context

I've created MRE based on the basic React Query, but my actual use case for this is a bit more complex.
I have an entity page that contain my RouterTabs component that renders an Outlet. Each tab has its separate route like: ...entity/$entityId/info, ...entity/$entityId/detail.

This pattern is common in my project, so I use a beforeLoad factory that allows me to quickly generate a redirect call.

I didn't find it easy to use the typings of FilebaseRouteOptionsInterface in my codebase, but I also didn't find another solution to reuse my redirection logic.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the MRE's posts.$postId.tsx and inspect the beforeLoad factory typing, then read packages/router-core/src/route.ts around line 963 and its BeforeLoadContextOptions type. Verify the change preserves route configuration inference so postId is no longer any when beforeLoad is enabled, while the redirect factory still accepts the shown from and to paths.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.