Set base URL for matching relative paths in request

[mpittkin]

Is your feature request related to a problem? Please describe.
I have different API URLs for different environments, for instance in development it's http://localhost:8080 where in production it's a relative path /api. The paths are also different for Storybook, and I am using MSW in those as well.

So right now I have to create the full request URL (absolute or relative) for all the MSW handlers, e.g.

function apiURL(path) { return process.env.REACT_APP_API_URL + path; }

setupWorker(
    rest.get(apiURL('/users'), (req, res, ctx) => {...} )
);

Describe the solution you'd like
I'd like to be able to set a base URL for MSW, so that all relative paths are treated as extending from that, similar to the baseURL config property in Axios.

Describe alternatives you've considered
The above approach works, but it's annoying to have to wrap every path with a function like that.

I also tried using wildcards like */users, which works, but there is always the possibility that it would end up matching a different request, either from my application directly or from some other resource being pulled in from a library.

[marcosvega91]

Hi @mpittkin thanks for raising this :).

I think that this can be implemented like @kettanaito has done for graphql queries https://mswjs.io/docs/api/graphql/link.

[kettanaito]

Hey, @mpittkin. Thanks for raising this.

Please, how would you imagine this API?

[mpittkin]

Hi @marcosvega91, @kettanaito.
I initially imagined it as a part of the options to setupWorker or setupServer, similar to Axios (https://github.com/axios/axios#creating-an-instance)

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/'
});

That would probably be the simplest way, but the graphql implementation you linked above would offer more flexibility for mocking different APIs simultaneously.

In order to keep the API consistent across both rest and graphql maybe something that would be consumed like:

import { setupWorker, rest } from 'msw';
import mockUsers from './mockUsers';

const serverApi = rest.link('https://myapi.seriousbusiness.com');

const worker = setupWorker(
    serverApi.get("/users", (req, res, ctx) => {
        return res(ctx.json(mockUsers));
    });
);

[marcosvega91]

I think that can be very useful. Do you wanna work on a PR ? It will be very awesome 🙈

[kettanaito]

The feature is sensible, yet I’m not sure whether the term “link” has any value in the REST world. Is there something close to what we are looking for in the REST spec/usage patterns?

[marcosvega91]

the only thing about link that I know on the spec are headers link. link can be used as a header on a response.

[mpittkin]

I’d be happy to work on this issue, but I may need some guidance, as JS/TS is not my native language ;)

Also I’m dealing with some family medical issues so I’m off work taking care of our kids right now, and won’t be able to work on it for a week or two.

For the feature API, perhaps something like rest.baseURL that functions much the same as qraphQL.link?

[kettanaito]

Let's try using the same .link method so it's aligned with the graphql (and ws in the future) API we have. I feel that the similarity may be beneficial for the API.

[kettanaito]

Unfortunately, I have to close this. See the reasoning behind why this feature costs more than it brings.

It's officially recommended to create a custom high-order function if you wish to reuse the same base path for multiple handlers. Like so:

const github = (path) => {
  return new URL(path, 'https://github.com').toString()
}

rest.get(github('/repos/:owner/:repo'), resolver)