[openapi-fetch] How to *always* use the global fetch

[michael-wolfenden]

I am using openapi-fetch with Remix and MSW.

When using HMR to restart MSW when the mock handlers change, openapi-fetch does not pickup the changes. I'm assuming this is because fetch is cached in createClient.

I tried adding a middleware to set fetch for each request, however the options are frozen and therefore read-only,

const alwaysUseGlobalFetchMiddleware: Middleware = {
  async onRequest({ options }) {
    options.fetch = global.fetch;
  },
};

My current workaround is to add a wrapper for each http method

export const fetchClient = createClient<paths>({
  baseUrl: "....",
});

function get<
  TPath extends PathsWithMethod<paths, "get">,
  TInit extends MaybeOptionalInit<paths[TPath], "get">,
>(path: TPath, ...init: InitParam<TInit>) {
  return fetchClient.GET(path, {
    // createClient captures the global fetch function so when mock handlers are updated
    // and the global fetch function is patched with the mock updates, these changes aren't picked up.
    // the fix is to use the global fetch for each call
    fetch: global.fetch,
    // biome-ignore lint/suspicious/noExplicitAny: unavoidable
    ...(init as any),
  });
}

Is there a better way?

[vincerubinetti]

Just curious, because I also have MSW set up in my project and I just added openapi-ts, is this only an issue with HMR? Hopefully refreshing will update everything?