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.

[lsalling]

Also interested in this.

[5ebastianMeier]

In the meantime I found a rather dirty solution that seems to work for my case.
I use this helper function to get the callback for all route masks.

export const getRouteMaskSearchParams = (pageType: PageRoute) => {
	return () => {
		const [currentMatch] = router.state.matches.slice(-1);
		const isNotCurrentPath = currentMatch.staticData.pageType !== pageType;
		if (isNotCurrentPath) {
			return true;
		}
		return router.latestLocation.search;
	};
};

If we stay on the same route and the searchParams change we can return router.latestLocation.search.
This works because of the evaluation order in the router itself.

At the time the function for the masks search params is invoked, the original route being masked has already been set as the latestLocation. I'm not aware of the pitfalls, but theoretically you could also use this to transform how the searchParams are displayed in the masked route (e.g. with a different name).

When declaring a route mask the search option looks as follows:

export const someMask = createRouteMask({
	routeTree: routeTree,
	from: "..."
	to: "...",
	params: true,
	search: getRouteMaskSearchParams(PageRoute.Dashboard),
});

This solution expects that the original route provides a value of the enum type PageRoute in its staticData in order to identify it in a stable fashion.

I discovered this by trial and error and it currently doesn't feel like this is an officially supported way of doing this.

I'd really appreciate if scenarios like these were supported though.
One use case that I'm currently using this for is as a way to migrate from an old route structure to a new one.
So the user can still use old routes which get redirected to the new route structure. A route mask then lets the new route appear as if it was the old route.

I'm not a huge fan of this, but the real world effort to switch your routing structure in a production app that has grown might be huge and a soft migration path can ease that pain.