How to set AbortController / timeout on a Fetch request?

[AdrianMrn]

I'm using the Fetch API client and have been trying to set a timeout time on requests, but I'm running into issues and can't seem to figure it out. Has anyone managed to get this working, or can you point me in the right direction?

const abortControllers = new Map<string, AbortController>();
const createAbortKey = (request: { method: string; url: string }) => {
  return `${request.method}:${request.url}`;
};

client.interceptors.request.use((request) => {
  const controller = new AbortController();
  const signal = controller.signal;
  abortControllers.set(createAbortKey(request), controller);


  setTimeout(() => {
    controller.abort();
    console.error("Request timed out");
  }, 15000);

  request.signal = signal; // gives error "Cannot set property signal of #<Request> which has only a getter"
  return request;
  // return { ...request, signal }; // also doesn't work, this causes the requests to look like http://localhost:3000/[object%20Object]
});

client.interceptors.response.use((response, request) => {
  // clean up when we get a response, could probably improved to also remove the setTimeout
  abortControllers.delete(createAbortKey(request));
  return response;
});