Enable custom http client like Axios

[lucianholt97]

It would be really helpful to allow overwriting or mock the default http client. This is especially useful when the existing app is based on axios with many predefined axios interceptors and also when using server side rendering.

[gone]

I have a structure where requests go over localhost for serverside calls and use a base url for client side calls. I have an axios interceptor that handles that currently, and it would be nice to be able to continue using that.

I have another non technical reason to +1 this request this as well - when making the case for spraypaint for some corporate clients who currently use axios across multiple apps, even though it doesn't get them anything, not having the ability to slot axios in has come up in several meetings and it would be nice to put that argument to bed (and then not use it.)

[openxyz]

I want this feature too. it seems to make fetch api adaptable , as https://github.com/graphiti-api/spraypaint.js/blob/c4e085a7f2ed202a83f207219f8bdc959d8cb54b/src/request.ts#L107

[jkcorrea]

Started a PR (#90) for this thinking I needed it, but ended up not. If you get a chance to try it out in the wild let me know if it does/doesn't work for your use case(s) :)

[avioli]

A very hacky solution, but in theory, since axios internally uses XMLHttpRequest and not fetch, you can override window.fetch.

const _fetch = window.fetch;
window.fetch = async function fetch(url, init) {
  if (typeof url !== 'string') {
    return _fetch(url, init);
  }
  const { method = 'get', headers } = init || {};
  const res = await axios({
    method,
    url,
    headers,
    // ... anything else that you feel makes sense
    responseType: 'arraybuffer',
  });
  const response = new Response(res.data, {
    status: res.status,
    statusText: res.statusText,
    headers: res.headers,
  });
  // Object.defineProperty(response, 'url', { enumerable: true, value: url });
  return response;
};

(I'll leave TypeScript types as an exercise to the user)

Alternatively you can override spraypaint's Request._fetch itself.

[lartheon]

I want to migrate our current app that uses Axios for api calls to spraypaint, is this still an issue?

[avioli]

I see no issue, since you are moving from axios to plain spraypaint.js, but there's a PR to specify a fetcher, which you can hope get merged someday: https://github.com/graphiti-api/spraypaint.js/pull/90

[lartheon]

I see no issue, since you are moving from axios to plain spraypaint.js, but there's a PR to specify a fetcher, which you can hope get merged someday: #90

oh wow Feb 6th, yeh someday

[richmolj]

This one flew under my radar :) It's now on it. /cc @wadetandy

[wadetandy]

Oh yeah i totally missed this as well, sorry about that. Will take a look.