TanStackT
TanStack•9mo ago•
17 replies
then-purple

Dynamic search params without reloadDocument

I try to achieve dyanamic filters component based on searchParams.
On my page i want to display products which need to be filtered by selected filters.

It works like expected but due to change search params, the whole route reload.
Once we have these deps in place, the route will always reload when the deps change.

On my filters component I use share params to select/deselect filters checkboxes.
If request take a while, the checkbox select with delay because search params update after loader finish.

There is any way to update searchParams and not triger route reload?

void navigate({
      to: '.',
      search: {
        "color": "red",
      },
      reloadDocument: false,
    });


export const Route = createFileRoute('/_pathlessLayout/$')({
  component: RouteComponent,
  loaderDeps: (search) => search,
  loader: async ({ params, deps }) => {
    const { products, filters } = await fetchSearchProducts({
      data: {
        filters: deps.search,
      },
    });
    return {
      products,
      filters,
    };
  },
});
Was this page helpful?