xenogeneic-maroon

Link search without from

I have links that I want to use in every list / table view in my app like this one:

<DropdownMenuItem asChild>
  <Link search={(prev) => ({ ...prev, sort: undefined })}>
    <Slash className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
    <FormattedMessage defaultMessage="Clear Sorting" />
  </Link>
</DropdownMenuItem>

<DropdownMenuItem asChild>
  <Link search={(prev) => ({ ...prev, sort: undefined })}>
    <Slash className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
    <FormattedMessage defaultMessage="Clear Sorting" />
  </Link>
</DropdownMenuItem>

They should only manipulate the search params without changing the route. I defined the necessary search params on the root route to have them available anywhere. But the Types are complaining unless I add a Route to to or from, which breaks my usecase. The TS error is:

Type '{ columnFilters: { id: string; value: string[]; }[]; sorting?: { id: string; desc: boolean; }[] | undefined; columnVisibility?: Record<string, boolean> | undefined; pagination?: { pageIndex: number; pageSize: number; } | undefined; ... 6 more ...; emailVerified?: boolean | undefined; }' is not assignable to type 'never'.

Type '{ columnFilters: { id: string; value: string[]; }[]; sorting?: { id: string; desc: boolean; }[] | undefined; columnVisibility?: Record<string, boolean> | undefined; pagination?: { pageIndex: number; pageSize: number; } | undefined; ... 6 more ...; emailVerified?: boolean | undefined; }' is not assignable to type 'never'.

14 Replies

rising-crimson•15mo ago

can you please provide a minimal complete example, e.g. by forking one of the existing examples on stackblitz?

xenogeneic-maroonOP•15mo ago

https://stackblitz.com/edit/tanstack-router-la8jm3?file=src%2Froutes%2Fabout.tsx&view=editor Here is a simplified example. Root defines search params. I was expecting these params would work on any link without defining to or from. See the links added in index or about

Carl

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

rising-crimson•15mo ago

thanks for the reproducer you need to be explicit and set to='.'

rising-crimson•15mo ago

https://stackblitz.com/edit/tanstack-router-5qkymz?file=src%2Froutes%2F__root.tsx,src%2Froutes%2Fabout.tsx,package.json&view=editor

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

xenogeneic-maroonOP•15mo ago

Thank you so much!

extended-salmon•15mo ago

Hi there! When I try this solution I get a TS error on the prev prop in parens that says "Parameter 'prev' implicitly has an 'any' type." – does that imply I've missed some important config somewhere?

rising-crimson•15mo ago

maybe 🙂 same for you: can you please provide a minimal complete example, e.g. by forking one of the existing examples on stackblitz?

extended-salmon•15mo ago

Okay I tried the Quickstart (code-based) and made a new nav element with to="." and the same search prop I have in my own code and it didn't throw a type error When I hover on (prev) it tells me the type of prev is {} So in my project I made my search look like this: search={(prev: {}) => ({ ...prev, detail: "new" })} and the TS error went away I'm going to test to make sure everything still behaves properly, but if this is what it takes to ship a bunch of other changes that got held up by upgrading TSR (from 1.51 to 1.58) then I'm happy enough!

rising-crimson•15mo ago

wait, now I understood what you did this should not be necessary

extended-salmon•15mo ago

Back in 1.51 I was just using search={{ detail: "new" }} and everything was groovy, but the release notes didn't give me a good clue of what may have changed

rising-crimson•15mo ago

if you can share a reproducer we will look at it

extended-salmon•15mo ago

Okay! I'm about to jump into a meeting but I'll see what I can do!

vicious-gold•4mo ago

Having the same issue now suddenly, how did u fix this?

xenogeneic-maroonOP•4mo ago

hey @Kevin Ris my code looks like this:

<DropdownMenuItem asChild>
    <Link
        to="."
        search={(prev) => ({
            ...prev,
            columnFilters: prev.columnFilters?.filter(
                (f) => f.id !== column.id,
            ),
        })}
    >
        <X />
        <FormattedMessage defaultMessage="Clear Filter" />
    </Link>
</DropdownMenuItem>

<DropdownMenuItem asChild>
    <Link
        to="."
        search={(prev) => ({
            ...prev,
            columnFilters: prev.columnFilters?.filter(
                (f) => f.id !== column.id,
            ),
        })}
    >
        <X />
        <FormattedMessage defaultMessage="Clear Filter" />
    </Link>
</DropdownMenuItem>

this works because, if no route is specified, tanstack router treats every routes search params as possible. they are all optional then. that's fine for my usecase

Gaming

Programming

Link search without from

Did you find this page helpful?