Axios

WARNING

Axios client is currently in beta. The interface might change before it becomes stable. We encourage you to leave feedback on GitHub.

Axios is a simple promise based HTTP client for the browser and Node.js. Axios provides a simple to use library in a small package with a very extensible interface.

Installation

Start by adding @hey-api/client-axios to your dependencies.

npm

npm install @hey-api/client-axios

pnpm

pnpm add @hey-api/client-axios

yarn

yarn add @hey-api/client-axios

bun

bun add @hey-api/client-axios

Ensure you have already configured @hey-api/openapi-ts. Update your configuration to use the Axios client package.

export default {
  client: '@hey-api/client-axios', 
  input: 'path/to/openapi.json',
  output: 'src/client',
};

You can now run openapi-ts to use the new Axios client. 🎉

Configuration

If you're using SDKs, you will want to configure the internal client instance. You can do that with the setConfig() method. Call it at the beginning of your application.

import { client } from 'client/sdk.gen';

client.setConfig({
  baseURL: 'https://example.com',
});

If you aren't using SDKs, you can create your own client instance.

import { createClient } from '@hey-api/client-axios';

const client = createClient({
  baseURL: 'https://example.com',
});

Interceptors

Interceptors (middleware) can be used to modify requests before they're sent or responses before they're returned to the rest of your application. Axios provides interceptors, please refer to their documentation on interceptors.

We expose the Axios instance through the instance field.

import { client } from 'client/sdk.gen';

client.instance.interceptors.request.use((config) => {
  config.headers.set('Authorization', 'Bearer <my_token>');
  return config;
});

Customization

The Axios client is built as a thin wrapper on top of Axios, extending its functionality to work with Hey API. If you're already familiar with Axios, customizing your client will feel like working directly with Axios. You can customize requests in three ways – through SDKs, per client, or per request.

SDKs

This is the most common requirement. Our generated SDKs consume an internal Axios instance, so you will want to configure that.

import { client } from 'client/sdk.gen';

client.setConfig({
  baseURL: 'https://example.com',
});

You can pass any Axios configuration option to setConfig(), and even your own Axios implementation.

Client

If you need to create a client pointing to a different domain, you can create your own client instance.

import { createClient } from '@hey-api/client-axios';

const myClient = createClient({
  baseURL: 'https://example.com',
});

You can then pass this instance to any SDK function through the client option. This will override the internal instance.

const response = await getFoo({
  client: myClient,
});

Request

Alternatively, you can pass the Axios configuration options to each SDK function. This is useful if you don't want to create a client instance for one-off use cases.

const response = await getFoo({
  baseURL: 'https://example.com', // <-- override internal configuration
});

Build URL

WARNING

To use this feature, you must opt in to the experimental parser.

If you need to access the compiled URL, you can use the buildUrl() method. It's loosely typed by default to accept almost any value; in practice, you will want to pass a type hint.

type FooData = {
  path: {
    fooId: number;
  };
  query?: {
    bar?: string;
  };
  url: '/foo/{fooId}';
};

const url = client.buildUrl<FooData>({
  path: {
    fooId: 1,
  },
  query: {
    bar: 'baz',
  },
  url: '/foo/{fooId}',
});
console.log(url); // prints '/foo/1?bar=baz'

Bundling

Sometimes, you may not want to declare client packages as a dependency. This scenario is common if you're using Hey API to generate output that is repackaged and published for other consumers under your own brand. For such cases, our clients support bundling through the client.bundle configuration option.

export default {
  client: {
    bundle: true, 
    name: '@hey-api/client-axios',
  },
  input: 'path/to/openapi.json',
  output: 'src/client',
};

Examples

You can view live examples on StackBlitz.

Sponsoring

Love Hey API? Become our sponsor.

•