When search param is set to a stringified number ("11000"), validating or getting the param returns a number but is typed as string

[maxwellwalin]

I am currently navigating to a URL with the following search:

navigate({
  search(current) {
    return {
      ...current,
      clientId: "11000",
    };
  },
});

The clientId can be any string, including a stringified number like the above. The problem is that when parsing or getting this search parameter, it evaluates as a number.

I've attempted using preSearchFilters and postSearchFilters as I do not see a method of parsing/stringifying the search available, but that did not work (as I assume that is not what those options are for)!

Please let me know if this is a bug, or I am blindly missing the option that would resolve this. I appreciate the help.

[briavicenti]

Hey @maxwellwalin I know it's been a while, but I call out a (limited) solution for this issue in my thread here! I'm hoping for the ability to have more nuanced parsing behavior per usage of useSearch.

[rahulvils]

@maxwellwalin @briavicenti For now you can use a preprocess using Zod

import { createFileRoute } from '@tanstack/react-router';
import { z } from 'zod';

const resetPasswordSchema = z.object({
  token: z.preprocess((val) => (typeof val === 'number' ? val.toString() : val), z.string().optional()),
});

export const Route = createFileRoute('/auth/reset-password/')({
  validateSearch: (search) => resetPasswordSchema.parse(search),
});