How to satisfy typescript with unsafe relative links ?

[Fenykepy]

I have deeply nested Link components, with relative to property, shared from multiple routes, so I can't easily know the from property.
I tried to pass down Route.to from the Route component but it passes it as a string and that doesn't satisfies typescript.
If I don't provide the from property, I get an error:

What is the good way to handle those cases without errors?

[schiller-manuel]

I tried to pass down Route.to from the Route component but it passes it as a string and that doesn't satisfies typescript.

what do you mean by "it passes it as a string"?

[Fenykepy]

Thank you for your reply :)

Considering such a route:

export const Route = createFileRoute(
  "/_footerLayout/$username/_userNavigationLayout/albums/$albumId",
)({
  loader: async ({ context: { queryClient }, params }) => {
    queryClient.ensureQueryData(albumDetailQueryOptions(params.albumId))
  },
  component: RouteComponent,
})

function RouteComponent() {
  const { albumId } = Route.useParams()

  return <UserPublicAlbumPhotosList albumId={albumId} from={Route.to}/>
}

Route.to gets a pretty complicated infered type (property) Route<Register, Route<Register, Route<Register, RootRoute<Register, ..., so child components can't know what precise type to expect. If I set child's from property type to string, it works, but only until I pass that string to <Link> from property (sorry if I'm not clear).

Sorry If I miss something obvious, I'm still learning typescript.

I found a workaround: I test presence of parameters to guess from. It works but it's pretty verbose for a simple link.
Here is a child component exemple:

interface MyComponentProps {
  photoId: string
  albumId?: string // set if in album's list context, undefined otherwise
}

function MyComponent({ photoId, albumId }: MyComponentProps) {
  const lightboxLinkOptions = albumId
    ? linkOptions({
        from: "/$username/albums/$albumId/photos/$photoId",
        to: "/$username/albums/$albumId/photos/$photoId/lightbox",
      })
    : linkOptions({
        from: "/$username/photos/$photoId",
        to: "/$username/photos/$photoId/lightbox",
      })

  return (
    <Link {...lightboxLinkOptions}>
      [...]
    </Link>
  )
}

[schiller-manuel]

this type util should help passing typesafe to

https://tanstack.com/router/v1/docs/guide/type-utilities#type-checking-link-options-with-validatelinkoptions

[Fenykepy]

Thank you!

I've read this section of the doc, it helps creating a generic link component, but I still need to pass a from property, which I don't know where the component is used.
Maybe I should explain what I try to achieve.

I have a photos application that displays lists of photos, detail of a photo, and a lightbox, in the same shared components from many different contexts. Here are a subset of my urls:

• "/$username" -> photos list in user context
• "/$username/photos/$photoId" -> photo detail in user context
• "/$username/photos/$photoId/lightbox" -> photo lightbox in user context
• "/$username/albums/$albumId" -> photos list in album context
• "/$username/albums/$albumId/photos/$photoId" -> photo detail in album context
• "/$username/albums/$albumId/photos/$photoId/lightbox" -> photo lightbox in album context
• "/" -> photos list in global context
• "/photos/$photoId" -> photo detail in global context
• "/photos/$photoId/lightbox" -> photo lightbox in global context
• (and many more on the same schema).

Now, if I have a nested <PhotoDetail /> component that includes 4 relative links, always the same no matter where the component is rendered:

• <Link to="../.." /> to go back to the list
• <Link to="./lightbox" /> to open lightbox
• <Link to="." params={{(prev) => ({ ...prev, photoId: photo.id })}} /> to go to the previous photo in the list
• <Link to="." params={{(prev) => ({ ...prev, photoId: photo.id })}} /> to go to the next photo in the list

This looks pretty straightforward to me, but typescript doesn't let me do that.
Is there a way to disable typescript's check (unsafe), like strict=false in useSearch hook? Any other (better) way?

I read this in the docs:

type ToOptions<
  TRouteTree extends AnyRoute = AnyRoute,
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = '',
> = {
   // `from` is an optional route ID or path. If it is not supplied, only absolute paths will be auto-completed and type-safe. It's    common to supply the route.fullPath of the origin route you are rendering from for convenience. If you don't know the origin route, leave this empty and work with absolute paths or unsafe relative paths.
  from?: string
[...]

So shouldn't working with unsafe relative paths be possible?

Thank you so much!