[Bug]

[ndelangen]

This addon should clean up the added query parameters after navigating away from the story.

We could use the useEffect from @storybook/addons

import { useEffect } from '@storybook/addons';

export const decorator = () => {
  useEffect(() => {
    // add query-parameters from storybook-parameters
    return () => {
      // remove query-parameters we added before
    }
  }, [])
}

[ndelangen]

We should the following query-parameters from ever being deleted: id, viewmode, args, globals because they are storybook internals.

[kylorhall]

I encountered this on our project, not really sure if this is maintained. Addon was helpful enough and it was even putting the wrong query parameters into snapshots and a few other things, so felt good to fix.

Taking from the original idea of a useEffect, I now just have our a local decorator (and got rid of this dependency), but it's essentially the same code, so it was relatively easy to pop a PR: #3

Happy to go back to the addon if that resolves it.

---

I will note, a bit contrary to the OP idea, setting the history.setState({}, newLocation.search) inside of a useEffect did not work; the history.setState needs to be in the render, synchronous, as changes to history | location do not propagate into another render, so even if you do update the location.state, it will never render those changes again (unless a re-render occurs somehow). Hope that makes sense.

[carloschneider]

@shilman

[sballesteros]

would smtg like that work?

const withQuery = (Story, context) => {
  const [, forceRerender] = useState();
  const query = context?.parameters?.query;

  useLayoutEffect(() => {
    const href = window?.location?.href;
    if (!query || !href) return;

    const url = new URL(href);

    for (const [key, value] of Object.entries(query)) {
      url.searchParams.set(key, value);
    }

    window.history.replaceState(window.history.state, "", url.href);
    forceRerender({});

    return () => {
      // restore original url
      window.history.replaceState(window.history.state, "", href);
    };
  }, [query]);

  return <Story {...context} />;
};