How a Real-World Problem Led Me to Become an Open Source Contributor to the World's Most Popular HTTP Client

#webdev #programming #opensource #typescript

Introduction

Sometimes, a real-world problem at work can lead you to unexpected places. In my case, it started with a limitation in Axios and Next.js, led to the creation of a new HTTP client (Traxios), and ended with me becoming an official open-source contributor to Axios—the world's most popular HTTP client.

The Origin: Traxios and a Real-World Problem

When Next.js 13 introduced new capabilities to the native fetch API, it broke the way we used Axios at Tractian. Axios didn't support the new fetch options like cache and next, which are essential for advanced caching and revalidation in Next.js.

To keep our developer experience and productivity high, I built Traxios from scratch—a lightweight HTTP client with an Axios-like API, but powered by the native fetch API and fully compatible with Next.js features.

Want to know more about this journey? Check out my article on building Traxios.

The Axios Update: A Partial Solution

Months after Traxios was born, Axios released an update that introduced the fetchOptions property (commit a3ff99b). This allowed developers to pass native fetch options directly to Axios requests, finally making it possible to use features like cache and revalidate with Next.js.

Problem solved? Not quite.

The new fetchOptions property was typed as Record<string, any>. This meant you could pass any value, but you lost all the benefits of TypeScript: autocomplete, type safety, and documentation. For teams that rely on TypeScript and care about developer experience, this was a significant gap.

My Contribution

As a TypeScript enthusiast, I knew this could be improved. I wanted developers to have the same great experience with fetchOptions as they do with the rest of Axios.

So, I opened a pull request to the official Axios repository, updating the type of fetchOptions to use the native RequestInit interface (omitting properties Axios already handles):

fetchOptions?: Omit<RequestInit, 'body' | 'headers' | 'method' | 'signal'> | Record<string, any>;

This small change made a big difference:

Autocomplete in your IDE
Type safety and documentation
A smoother experience for anyone using Axios with Next.js or fetch

Here's a before/after of the developer experience:

Before:

No autocomplete, no type safety.

After:

Full autocomplete and type safety for all native fetch options.

Conclusion

Sometimes, the best open source contributions come from real-world needs. If you spot something that can be improved, don't hesitate to contribute—you might end up helping a lot more people than you think.

Curious about how this all started? Read my article on building Traxios from scratch.