Ability to pass URL parameters to stories

[vitalybe]

Is your feature request related to a problem? Please describe.
We're using URL parameters in many of our components, e.g ?mock=true. However, storybook (v5.0.2) discards all the additional URL parameters I am giving to it.

Describe the solution you'd like
The best solution would be if the user-defined URL parameters of the storybook would be automatically added to the iframe of the story. For example, it could be something like ?user-mock=true. Which would be added to the iframe of the story as ?mock=true.

If that's not possible, it would be nice if storybook at least wouldn't delete the unknown url parameters, as it does now. Then I could perhaps access from the story via parent.window.location or something like that.

Describe alternatives you've considered
Without URL option, I would have to use cookies or something along these lines :(

Are you able to assist bring the feature to reality?
Maybe...

[shilman]

This was an oversight in the v5 URL handling and I think we should add it back.

I think the trick will be to figure out an appropriate API to get this into the stories. @tmeasday @ndelangen opinions?

It would be a straightforward change here: https://github.com/storybooks/storybook/blob/next/lib/client-api/src/story_store.js#L68

[tmeasday]

Did we use to pass the URL from the manager to the preview unmodified?

@vitalybe I am curious about the use case here. I assume your components read from the URL directly? How do you go about setting the URL? Do you have to manually change it when you look at certain stories?

Perhaps we could have an addon that sets the preview URL query parameters based on a story parameter? Maybe that is a nicer solution?

.add(‘story’, () => ..., { query: { foo: “bar” } })

[vitalybe]

@tmeasday:

Some of the components perform AJAX calls to the backend when mounted, however, this behavior is disabled and mocks are used if ?mock=true is found in the URL by the BL-data classes which the component use.

In most cases when working with storybook, I like to work without any backend, so I would like to be able to add ?mock to the URL of storybook which will pass it to the stories to achieve this functionality.

How do you go about setting the URL?

I set it manually or via bookmark. I do have a "debug" floating window that I use to set the URL as well... So I guess it would be nice if I could also affect the URL storybook from the story as well, but that's just a nice to have.

Do you have to manually change it when you look at certain stories?

Yes. If I want to choose to use or not to use backend.

[tmeasday]

I wonder if there could be an addon which replicates the old functionality easily. It sounds like you want a bit more flexibility than the parameter based approach would provide (although maybe the parameters is a nice bonus that the addon could support)

[tmeasday]

cc @ndelangen

[amerjx]

i second @vitalybe, one of our components relies on a redirect from a payment result, and we would like to have that showcased in storybook.

[ndelangen]

@vitalybe an option for an alternative would be addon-context, and reading the mock boolean from there. You'd be able to switch mocking on and off from the storybook UI.

I understand if that's not really feasible. I second @tmeasday's suggestion of an queryParameters addon that would read parameters.query and change the url accordingly before calling the storyFn.

[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!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[markcellus]

@tmeasday @shilman can this issue be reopened? It appears to still be the case with latest storybook versions.

[markcellus]

Also a duplicate of #4506 which was also auto-closed by stale bot 😞

[shilman]

@mkay581 Have you tried addon-queryparams that's referenced above?

[markcellus]

I've tried using addon-queryparams but it doesn't satisfy my use case unfortunately. I have a theme query param that I need to persist between stories. The addon allows me to add the withQuery decorator to apply to all stories but the query param is removed whenever I switch between stories. At any rate, adding and removing query params is supported natively on the web and is orthogonal to Storybook. So it seems odd that Storybook would prevent such a feature which is why I was requesting that this be added to the core codebase.

for what it's worth, I agree with @vitalybe with the following statement in original post:

it would be nice if storybook at least wouldn't delete the unknown url parameters

[ndelangen]

@mkay581 here's the code where we set the query params in the preview:

storybook/lib/core/src/client/preview/url.ts

Lines 21 to 31 in c1ff295

	const { storyId, viewMode }: { storyId: StoryId; viewMode: ViewMode } = selection;
	const { path, selectedKind, selectedStory, ...rest } = qs.parse(document.location.search, {
	ignoreQueryPrefix: true,
	});
	const newPath = `${document.location.pathname}?${qs.stringify({
	...rest,
	id: storyId,
	viewMode,
	})}`;
	history.replaceState({}, '', newPath);
	};

As you can see we keep all existing queryparams whenever we navigate in the preview.

I do not see how we:

So it seems odd that Storybook would prevent such a feature

AFAICS we don't.

if 1 story sets a query param, it should be preserved indefinitely, unless the iframe is refreshed for some reason..

[markcellus]

Yes but I believe that is happening after the params have already been reset. I'm trying it out right now and can reproduce without failure. When I switch stories, somehow the query params I've set previously are removed.

[shilman]

cc @tmeasday

[tmeasday]

@mkay581 maybe can we open a new ticket with a reproduction that demonstrates the problem?

This one is kind of old and the code involved has changed a bit since then so it would probably be easier for everyone to start fresh.

[markcellus]

Sure @tmeasday but it'll just be the same content as the original request 🙂. Dont have much time to create a whole repo that reproduces the issue but reproducing is simple:

1. Load storybook
2. Click on a story
3. Add a new query param to the URL
4. Click on a different story

Actual Behavior:
The query param is removed.

Expected Behavior:
The query param persists and is not removed.

[ndelangen]

Add a new query param to the URL

How are you doing this exactly?
Are you modifying the URL of the manager or preview?

[markcellus]

@ndelangen I'm setting a param by doing the following:

const params = new URLSearchParams(location.search);
params.set('test', 'foo')
history.pushState(null, null, `?${params.toString()}`);

If I did this after a story loads, I would expect for the test param to persist when clicking between stories or if I were to do a full page reload.

[tmeasday]

@mkay581 is that code running inside one of your stories or in .storybook/preview.js?

[markcellus]

Inside a story. I'm attempting to do it using the onChange hook in storybook-addon-themes package. I'd like to set the selected theme as a query param that can persist through all stories so I can hard reload the page, bookmark it, and/or share URL to it with the theme param set.

[allison-palum]

I found this really helpful: #769

[shilman]

We have a recommended way to do this in Storybook 6.2: #13803

This brings URL sync to Storybook Args which can also be be controlled in the UI. We'll be building on this more in future versions of Storybook. @allison-palum