Switch to fetch away from axios

[sarayourfriend]

Problem

Currently we use axios to manage making HTTP requests on the client. Bytes over the network aren't free and now that browsers and Node have the same fetch api, we could switch to using fully native APIs for network requests that won't add bytes to the bundle.

Description

Explore switching from axios to fetch. Axios has some nice features like middleware and easy-to-use request making. It also has different symantics around what constitutes an "error" (fetch only throws on status codes > 499 whereas axios throws > 399).

Alternatives

Stick with axios. It's not that heavy of a dependency and there are probably less critical paths we can do dependency optimization for (I'm assuming, I'm not sure).

Implementation

• 🙋 I would be interested in implementing this feature.

[sarayourfriend]

@obulat Any thoughts on whether this is worth doing? It looks like most of our axios usage is concentrated in the API service of the frontend, along with usage in the i18n utils. Axios is 30.2 kB minified: https://bundlephobia.com/package/[email protected]

Could be a good "help wanted" issue?

[dhruvkb]

The i18n utils are quite decoupled from the frontend so switching them could very well be a standalone "good first"/"help wanted" issue. But it would be good to have consistency in the library used across the codebase or at least within a stack layer so we should only switch if we plan on going all in with it.

[sarayourfriend]

Would it help to separate this into two issues, then? One for the application code and one for the i18n code? The i18n utilities would need to use node-fetch anyway, so it's good to handle as a separate issue, I think.

[sarayourfriend]

Actually, we need node-fetch for SSR as well, so maybe that point is moot.

We do need to make sure node-fetch doesn't accidentally get used in the client bundle, so we might need to have separate files exporting the fetch function to use:

// utils/fetch.client.ts
export const fetch = window.fetch;


// utils/fetch.server.ts
export fetch from 'node-fetch'

Something along those lines.