Mask Default Parameters in URL

[timglabisch]

Hello,

i've a route with a lot of searchParams. now when i open the url all the parameters are appended. most of the searchParams are optional and i don't want users to see them all. i also dont want to serialize default values to the url.
is there a way to (mask?) the default parameter values?

export const IncomingDocumentsWrapperRoute = createRoute({
    ....
    validateSearch: (search): TIncomingDocumentsWrapperRouteSearchSchema => {
        const parsed = XXXSchema.safeParse(search);
        if (parsed.success) {
            return parsed.data;
        }
        // ....
    },
    .....
});

const defaults = {
    pagination: {
        page: 1,
        limit: 10,
    },
    sorting: {
        field: "created_at",
        direction: "desc",
    },
    condition: {
        tab: "ALL",
    },
} as const;

export const XXXXSchema = z
    .object({
        pagination: z
            .object({
                page: z.number(),
                limit: z.number(),
            })
            .default(defaults.pagination),
        sorting: z
            .object({
                field: z.enum(["created_at", "due_date", "amount", "document_number", "external_number"]),
                direction: z.enum(["asc", "desc"]),
            })
            .default(defaults.sorting),
        condition: zod_ZodSchemaIncomingDocumentCondition_schema.default(defaults.condition), /// <<< complex form
    })
    .default(defaults);

[timglabisch]

i found this:

router/examples/react/basic-default-search-params/src/main.tsx

Lines 145 to 156 in fcc278f

	validateSearch: (
	input: {
	postId: number
	color?: 'white' | 'red' | 'green'
	} & SearchSchemaInput,
	) =>
	z
	.object({
	postId: z.number().catch(1),
	color: z.enum(['white', 'red', 'green']).catch('white'),
	})
	.parse(input),

but this also ends up with the searchparams in the url.

[5ebastianMeier]

You can control this if you create a Route Mask for the routes you want to hide the searchParams from.
But afaik you currently need to create an individual mask for every route affected.
However on these masks you can use the options to specify how to display the searchParams:

• false hides them all
• true displays them all
• a callback function has access to the previous state and can return any object that will be used for the searchParams

Unfortunately the masks seem to always reflect the last state of the masked route. I'm currently trying to get these route masks to reflect the current value of a navigation with declarative masks, rather than imperative masking - but that's a work in progress.
I'm no expert on this matter so this is just how far trial and error got me.
My use case is quite similar to yours though, because I'm dealing with filters and panels that are encoded into the URL.