#Link with search param having multiple values for same key

1 messages · Page 1 of 1 (latest)

fallen flower
#

I'd like to provide a search property to my Link component where they query string key can have multiple values (an array)

<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>

This does work, but the query string in the browser is shown like this:

?group_by=%5B"foo"%2C"bar"%5D

It does work technically. But I'd like it to be:

?group_by=foo&group_by=bar

but I don't know how to make that happen. If I try to set the query string to the to property

<Link to="/foo/bar?group_by=foo&group_by=bar" ...>

I get a type error that the route is not any of those I've defined in my router config.

My current route definition is as follows:

  'type', 'size', 'height'
]);

const routeValidator = z.object({
  group_by: z.union([z.array(GroupByEnum), GroupByEnum]) // Accepts array or single value
});

export const Route = createFileRoute('/report')({
  validateSearch: zodSearchValidator(routeValidator),
});```
snow abyss
fallen flower
#

Thanks! I just quickly tried and it seems that part is deprecated..? I didn't have enough time to evaluate my IDE's suggestion about the params: {parse, stringify}, but at least in the first minutes I couldn't get it work. I'll go deeper later. 👍

snow abyss
#

what is deprecated?

fallen flower
#

Sorry for being so vague. My IDE says these properties are not available for the router:

  parseSearch: parseSearchWith(JSON.parse),
  stringifySearch: stringifySearchWith(JSON.stringify),
fallen flower
#

I get this kind of an error message. I'm not sure how to continue from here 😅

parse-search.png
snow abyss
#

can you please provide a complete minimal example?

#

e.g. by forking one of the existing examples on stackblitz

fallen flower
snow abyss
#

you need to adapt the parseSearch in createRouter

fallen flower
#

Not sure what you mean, this looks identical to my example. 😅 Even the stackblitz says the parseSearch isn't a valid property for the router. Nevertheless, I really appreciate you taking time trying to help me!

dense grotto
#

@fallen flower did you happen to figure this out? I'm currently working on the same thing 🙂

sand swallow
#

Manuel is referring to these methods from the docs: https://tanstack.com/router/latest/docs/framework/react/guide/custom-search-param-serialization

In your code you need to modify it:

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultStaleTime: 5000,
  parseSearch: parseSearchWith(JSON.parse), //Add a parse method like this
  stringifySearch: stringifySearchWith(JSON.stringify), //Add a stringify method like this
});

In your example you are not defining the methods added above: parseSearch or stringifySearch. In the docs I linked they show a few different libraries for this that have their own customization options, or you can write your own parse/stringify as well

Custom Search Param Serialization | TanStack Router React Docs

Diagram showing idempotent nature of URL search param serialization and deserializationBy default, TanStack Router parses and serializes your URL Search Params automatically using JSON.stringify and JSON.parse. This process involves escaping and unescaping the search string, which is a...