rival-black

How to strip search parameters in beforeLoad or loader route methods?

Hi, I'm trying to consume some URLSearchParameters so that after a beforeLoad or loader async function finishes, the URL no longer has the search parameters used. Any strategies I should look into?

15 Replies

stormy-gold•7mo ago

we have a stripSearchParams middleware check the docs

rival-blackOP•7mo ago

do you know when the middleware functions are called within the data loading lifecycle? https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#the-route-loading-lifecycle From a glance I'm not under the impression that the parameters would be passed since the parameters are evaluated before the beforeLoad and loader fns. My testing seems to indicate this as well.

Data Loading | TanStack Router React Docs

Data loading is a common concern for web applications and is related to routing. When loading a page for your app, it's ideal if all of the page's async requirements are fetched and fulfilled as early...

stormy-gold•7mo ago

search Middleware happens before beforeLoad but it only affects the visible url in beforeLoad you still get the search params passed in

rival-blackOP•7mo ago

Here is the test I'm running

export const myRoute = createRoute({
    component: ComponentPage,
    getParentRoute: () => parentRoute,
    path: "/my-route",
    validateSearch: ZodApprovalSearchSchema,
    beforeLoad: async ({
        search: { approval_id, action },
    }) => {
        console.log("search", { approval_id, action });
        return {};
    },
    search: {
        middlewares: [stripSearchParams(["approval_id", "action"])],
    },
});

export const myRoute = createRoute({
    component: ComponentPage,
    getParentRoute: () => parentRoute,
    path: "/my-route",
    validateSearch: ZodApprovalSearchSchema,
    beforeLoad: async ({
        search: { approval_id, action },
    }) => {
        console.log("search", { approval_id, action });
        return {};
    },
    search: {
        middlewares: [stripSearchParams(["approval_id", "action"])],
    },
});

rival-blackOP•7mo ago

Well..this is the solution I landed on. It doesn't feel aligned with how tanstack react router wants you to use it but it works?

export const myRoute = createRoute({
    component: ComponentPage,
    getParentRoute: () => parentRoute,
    path: "/my-route",
    validateSearch: ZodApprovalSearchSchema,
    beforeLoad: async ({
        search: { approval_id, action },
    }) => {
        console.log("search", { approval_id, action });
        return {};
    },
    // search: {
    //     middlewares: [stripSearchParams(["approval_id", "action"])],
    // },
    onEnter: () => {
        const url = new URL(window.location.href);
        const params = url.searchParams;
        for (const paramName of ["approval_id", "action"]) {
            params.delete(paramName);
        }
        url.search = params.toString(); // Update the search part
        window.history.replaceState({}, "", url.toString());
    },
});

export const myRoute = createRoute({
    component: ComponentPage,
    getParentRoute: () => parentRoute,
    path: "/my-route",
    validateSearch: ZodApprovalSearchSchema,
    beforeLoad: async ({
        search: { approval_id, action },
    }) => {
        console.log("search", { approval_id, action });
        return {};
    },
    // search: {
    //     middlewares: [stripSearchParams(["approval_id", "action"])],
    // },
    onEnter: () => {
        const url = new URL(window.location.href);
        const params = url.searchParams;
        for (const paramName of ["approval_id", "action"]) {
            params.delete(paramName);
        }
        url.search = params.toString(); // Update the search part
        window.history.replaceState({}, "", url.toString());
    },
});

stormy-gold•7mo ago

ah sorry, the middleware was the wrong approach here you could throw a redirect from beforeLoad without those search params

rival-blackOP•7mo ago

That was my first approach, and that would have been fine if I didn't need to pass loader data to the route component. (I probably mislead you because the example route I made above is not doing that). My requirements are pretty edge case, but yes throwing the redirect could work for other scenarios.

stormy-gold•7mo ago

what is the problem with loader data here? you need access to the query params in the loader?

rival-blackOP•7mo ago

What I am trying to achieve is: reading the search params > making a http request based on those parameters > returning the response data as loader data + stripping the search parameters when the route component is finally rendered. I don't want to redirect because the loader data is dependent on the search

stormy-gold•7mo ago

and what happens after rendering?

rival-blackOP•7mo ago

conditionally rendering a component on the page component based on loader data (a banner)

stormy-gold•7mo ago

and just to understand this better, why do you want to remove the search param from the url?

rival-blackOP•7mo ago

Well all this would've been pretty trivial if the application was an SSR. We are sending an email to the end user that contains the URL of the client instead of the server as an authentication mechanism. We want to remove the search params because having them will trigger the http request if they were to say..share the URL with another user.

stormy-gold•7mo ago

they could still share the link out of the mail though?

rival-blackOP•7mo ago

yes they could, but we render a banner saying that another user has already approved. In all, the approach above works by using the loader and the onEnter callback

Gaming

Programming

How to strip search parameters in beforeLoad or loader route methods?

Did you find this page helpful?