Storybook and search Params (TanStack Router)

[WSINTRA]

Has anyone had any joy getting TanStack Router search params working inside a Story.
I have a component that fetches data depending on search params, inside my story I want to be able create those search params.

[WSINTRA]

My solution inject the search params to the router.

const meta = {
  title: 'WhatsOn',
  component: () => {
    const router = useRouter();
    useEffect(() => {
      router.__store.setState((prev) => {
        return {
          ...prev,
          matches: [
            {
              ...prev.matches[0],
              search: { onParam: { id: '1', sort: 'name' } },
            },
          ],
        };
      });
    }, [router]);

    return <WhatsOn />;
  },
} satisfies Meta<typeof WhatsOn>;

[TyIsI]

Thank you! I was able to adapt this to changing location.pathname as well.