Allow `parameters.msw` to be a function that takes `args`

Hello! I’m stoked to see this library growing so much. At work we still have a custom setup for Storybook and MSW because we’re using args to result in dynamic MSW calls.

I wonder if you could add something like

if (typeof context.parameters.msw === "function") {
  api.use(...context.parameters.msw(context.args))
}

Where the story meta would be:

export default {
  ...,
  args: { isLoading },
  parameters: {
    msw: (args) => [
      rest.get("...", (_, res, ctx) =>
        res(ctx.delay(args.isLoading ? "infinite" : 0), ctx.json(...))
      )
    ]
  }
}

[yannbf]

Hey @itaditya thanks for referring that! There are a couple of things happening on the storybook side that will allow us to bring a proper control panel experience to this addon, I just need to discuss more with the team and prototype in this addon:

Targeted args will allow users to define args specifically for addons, which will not be passed down to the components props

Loaders that rerun on args change will allow us to move from exporting decorators to loaders so that the mock setup is done before the component renders (then we can support nextjs and its getServerProps for instance) and the mocks will be redone on args change

So @tmikeschu this feature is definitely going to happen, it might just take some time!

[itwasmattgregg]

Very excited for this feature. Let me know if you want assistance writing these changes.

I was able to make it work by implementing my own handler which could be done at the story or component level.

Example here:

import {getWorker} from 'msw-storybook-addon';

const worker = getWorker();

const Template: StoryFn = () => <TestPage />;

export const Story = Template.bind({});

export const OtherTemplate: StoryFn = ({maxAmount}) => {
  worker.use(
    graphql.query('GraphqlQueryName', (_, res, ctx) => {
      return res(
        ctx.delay(),
        ctx.data<GraphqlQueryNameQueryData>(
          generateMockData({
            maxAmount,
          }),
        ),
      );
    }),
  );
  return <TestPage />;
};

OtherTemplate.args = {
  maxAmount: '40000',
};
OtherTemplate.argTypes = {
  maxAmount: {
    options: ['500', '5000', '10000', '40000', '100000'],
    control: {type: 'select'},
  },
};