The api setQueryParams not working

[echoulen]

Describe the bug
The method api.setQueryParams not working

To Reproduce

addons.register("storybook/something", (api) => {
  api.setQueryParams({abc: "hello"});
});

Expected behavior
expect api.getQueryParam("abc") to be "hello"

Screenshots

Code snippets

System:

"@storybook/addons": "^5.2.0",
"@storybook/react": "^5.2.0",

Additional context
The addon was not working with api.setQueryParams and api.getQueryParam any more
https://github.com/echoulen/storybook-addon-styled-component-theme

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[alexreardon]

I can confirm that this API is not working

[alexreardon]

"@storybook/react": "6.0.0-alpha.30"

[alexreardon]

This line is clearing the query string:

storybook/lib/api/src/modules/url.ts

Line 93 in b6136e1

setTimeout(() => navigate(`${queryPath}`, { replace: true }), 1);

[ndelangen]

The queryParam is for the preview, not the manager.

storybook/lib/api is code that only runs on the manager.

[alexreardon]

So is there a way from my addon panel to set something in the query string? I am using the API in the same way as it is being used in the docs: https://storybook.js.org/docs/addons/api/#apisetqueryparams

[ndelangen]

Why would you need to set something on the query of storybook's manager?

[echoulen]

Hi @ndelangen
For my example, I have to set the active tab in my addon from query params if the user refresh the page

[ndelangen]

For refreshes you could use the localStorage instead?

[echoulen]

the route trigger enable tab is more make sense, I had used this API a long time ago, it's was broken after I upgrade the storybook, so that's why I report the issue.

[ndelangen]

@echoulen you're 100% correct. The API used to set queries on the manager as well, but when we changed to use a router we removed this behavior so we could have clearer/readable URLs that wouldn't grow to be too long.

[alexreardon]

I would like to be able to set the URL for sharing purposes. Right now I am unable to do anything to the URL as an addon as it is always cleared

[ndelangen]

I agree that'd be useful

[echoulen]

@ndelangen I see

[ndelangen]

I think this problem has in essence been resolved by making globals persist on the URL:
https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals