Relative url paths fallback to localhost/...

[josead]

trafficstars

Hello! Happy 2022!

I'm having an issue when using addon-mock on github pages. I'll try to explain here the situation;

• Local storybooks is running on http://localhost:7007 (default)
• Production storybooks is running on https://storybooks.mycompany.com under github pages

When doing stuff on local, the mock works fine because the API call is made to localhost:3000. So this works on local:

   //...
   mockData: [
      {
        url: `${window.location.origin}/api/endpoint-foo`, // Mock panel shows: http://localhost:7007/api/endpoint-foo as url
        method: 'POST',
        status: 200,
        response: {
          foo: 'bar'
        },
      },
   ]
   //...

First issue I see is that the port is ignored. The request to http://localhost:3000 is being mocked even though it should mock the http://localhost:7007, which is confusing after seeing this add-on's code, but it works.

The other issue is regarding the relative urls. I found some issues on the code that, following my line of thought, leave some questions unanswered;

https://github.com/nutboltu/storybook-addon-mock/blob/master/src/utils/url.test.js#L17 this tests is saying that given a relative path it will always expect localhost to be the origin? So is not possible to host storybook's elsewhere and mock requests.

Then here https://github.com/nutboltu/storybook-addon-mock/blob/master/src/utils/url.js#L3 it makes visible that it only accepts http as protocol, otherwise it will try to mock http://localhost ... this two behaviors makes some noise for me and I'd like to know how to write my mocks to overcome these difficulties. Or in the case we need to apply a patch I'll try to create a PR for you with a potential fix if it is welcomed!

Regards!

[nutboltu]

@josead

https://github.com/nutboltu/storybook-addon-mock/blob/master/src/utils/url.test.js#L17 this tests is saying that given a relative path it will always expect localhost to be the origin? So is not possible to host storybook's elsewhere and mock requests

Currently, if there's a relative path we replaced it with the localhost. The reason behind this, is we need a valid URL to parse the query parameters. One of the solutions would be to replace http://localhost with window.location.origin. I need to check if this is not breaking anything.

Then here https://github.com/nutboltu/storybook-addon-mock/blob/master/src/utils/url.js#L3 it makes visible that it only accepts http as protocol, otherwise it will try to mock http://localhost ... this two behaviors makes some noise for me and I'd like to know how to write my mocks to overcome these difficulties.

Yes. currently, it only accepts http and https. We don't have any plan right now to support other protocols. May I get to know which protocol are you using?

Also, you are very much welcome to raise a PR 🥳

[bmitchinson]

Would love this feature of relative paths falling back to window.location.origin

[pjaws]

This just isn't working at all for me, and I can't see a reason why.

Here's a simplified version of what I'm doing:

// Component
import useSWR from 'swr';

const fetcher = (query) => fetchViaApi(query).then((entry) => entry?.data?.list);

const Component = () => {
  const { data, error } = useSWR(query, fetcher);

  return (
    <>
      {data && <div>Yay!</div>}
      {error && <div>Oh no!</div>}
    </>
  );
};

// API client
export const fetchViaApi = async (query, preview = false) => {
  const res = await axios.post(
    '/api/contentful/graphql/',
    { query, preview },
    {
      headers: {
        'Content-Type': 'application/json',
      },
    }
  );

  return res.data;
};

// Story
import withMock from 'storybook-addon-mock';

import Component from 'components/Component';

export default {
  title: 'Component',
  component: Component,
  decorators: [withMock],
};

const Template = (args) => (
  <Component {...args} />
);

export const Default = Template.bind({});
Default.args = {
  ...
};
Default.parameters = {
  mockData: [
    {
      url: `${window.location.origin}/api/contentful/graphql/`,
      method: 'POST',
      status: 200,
      response: {
        data: {...},
      },
    },
  ],
};

Screenshot of 404:

[deger4beger]

This just isn't working at all for me, and I can't see a reason why.

Here's a simplified version of what I'm doing:

// Component
import useSWR from 'swr';

const fetcher = (query) => fetchViaApi(query).then((entry) => entry?.data?.list);

const Component = () => {
  const { data, error } = useSWR(query, fetcher);

  return (
    <>
      {data && <div>Yay!</div>}
      {error && <div>Oh no!</div>}
    </>
  );
};

// API client
export const fetchViaApi = async (query, preview = false) => {
  const res = await axios.post(
    '/api/contentful/graphql/',
    { query, preview },
    {
      headers: {
        'Content-Type': 'application/json',
      },
    }
  );

  return res.data;
};

// Story
import withMock from 'storybook-addon-mock';

import Component from 'components/Component';

export default {
  title: 'Component',
  component: Component,
  decorators: [withMock],
};

const Template = (args) => (
  <Component {...args} />
);

export const Default = Template.bind({});
Default.args = {
  ...
};
Default.parameters = {
  mockData: [
    {
      url: `${window.location.origin}/api/contentful/graphql/`,
      method: 'POST',
      status: 200,
      response: {
        data: {...},
      },
    },
  ],
};

Screenshot of 404:

Had the same issue with react-query lib, using relative url solved this problem to me:

Absolute url with window.location.origin not working when using react-query but works ok without react-query, don't know if it works the same for swr, but looks like it should.