zodValidator confusion

[michael-wolfenden]

I'm not understanding the difference between using

const productSearchSchemaCatch = z.object({
	page: z.number().catch(1),
	filter: z.string().catch(""),
	sort: z.enum(["newest", "oldest", "price"]).catch("newest"),
});

export const Route = createFileRoute("/")({
	component: App,
	validateSearch: zodValidator(productSearchSchemaFallback),
});

vs

const productSearchSchemaFallback = z.object({
	page: fallback(z.number(), 1).default(1),
	filter: fallback(z.string(), "").default(""),
	sort: fallback(z.enum(["newest", "oldest", "price"]), "newest").default(
		"newest",
	),
});

export const Route = createFileRoute("/")({
	component: App,
	validateSearch: zodValidator(productSearchSchemaFallback),
});

Functionally, they appear to be equivalent.

The docs state

However the use of catch here overrides the types and makes page, filter and sort unknown causing type loss.

However I'm not seeing that either.

I have an example below that shows both scenarios:
https://stackblitz.com/edit/github-edezuu8u?file=src%2Froutes%2Findex.tsx

[schiller-manuel]

the datatype is unknown with just catch():

[michael-wolfenden]

Ah my bad, I was looking at the type of useSearch

[michael-wolfenden]

@schiller-manuel is there difference with removing the default

const productSearchSchemaFallback = z.object({
	page: fallback(z.number(), 1).default(1),
	filter: fallback(z.string(), "").default(""),
	sort: fallback(z.enum(["newest", "oldest", "price"]), "newest").default(
		"newest",
	),
});

versus

const productSearchSchemaFallback = z.object({
	page: fallback(z.number(), 1),
	filter: fallback(z.string(), ""),
	sort: fallback(z.enum(["newest", "oldest", "price"]), "newest")
});

[schiller-manuel]

probably no difference.