HTTP Clients Overview

OpenAPI TypeScript supports multiple HTTP clients to match your project’s needs and framework requirements. Each client provides type-safe API calls with full TypeScript support.

Available Clients

Fetch

Native browser Fetch API client. Zero dependencies, works everywhere.

Axios

Popular HTTP client with request/response interceptors and advanced features.

Angular

Native Angular HttpClient integration with dependency injection support.

Ky

Tiny, elegant HTTP client built on the Fetch API with retry support.

Next.js

Optimized for Next.js with server components and caching support.

Nuxt

Native Nuxt integration with composables and SSR support.

ofetch

Universal fetch wrapper with advanced features and interceptors.

Custom

Build your own client adapter for any HTTP library.

Quick Comparison

Client	Use Case	Key Features	Bundle Size
Fetch	Universal	Native API, zero deps	~2KB
Axios	Node.js, advanced	Interceptors, cancellation	~13KB
Angular	Angular apps	DI, RxJS observables	N/A
Ky	Modern browsers	Retry, timeout, hooks	~5KB
Next.js	Next.js apps	Server components, caching	~2KB
Nuxt	Nuxt apps	Composables, SSR	N/A
ofetch	Universal	Advanced features, hooks	~3KB
Custom	Any library	Full control	Varies

Common Features

All clients share these core capabilities:

Type Safety

import { client } from './client';

// Fully typed request and response
const { data, error } = await client.get({
  url: '/users/{id}',
  path: { id: 123 },
});

// TypeScript knows the shape of data and error

Configuration

All clients support a common configuration interface:

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

const client = createClient({
  baseUrl: 'https://api.example.com',
  headers: {
    'Authorization': 'Bearer token',
  },
});

Authentication

Built-in support for API key and HTTP authentication:

const client = createClient({
  auth: async (auth) => {
    if (auth.type === 'http' && auth.scheme === 'bearer') {
      return getAccessToken();
    }
  },
});

Request/Response Interceptors

Most clients support interceptors for request and response transformation:

// Add request interceptor
client.interceptors.request.use((request, options) => {
  console.log('Request:', request.url);
  return request;
});

// Add response interceptor
client.interceptors.response.use((response, request, options) => {
  console.log('Response:', response.status);
  return response;
});

// Add error interceptor
client.interceptors.error.use((error, response, request, options) => {
  console.error('Error:', error);
  return error;
});

Server-Sent Events (SSE)

All clients support SSE for real-time data streaming:

const stream = await client.sse.get({
  url: '/events',
  onSseEvent: (event) => {
    console.log('Event:', event.data);
  },
});

// Close the stream when done
stream.close();

Response Styles

Most clients support two response styles:

Fields Style (Default)

Returns an object with data, error, request, and response fields:

const { data, error, response } = await client.get({
  url: '/users',
  responseStyle: 'fields', // default
});

if (error) {
  console.error('Error:', error);
} else {
  console.log('Data:', data);
}

Data Style

Returns only the data (or undefined on error):

const data = await client.get({
  url: '/users',
  responseStyle: 'data',
});

if (data) {
  console.log('Users:', data);
}

Error Handling

Two approaches to error handling:

Check error field (default)

const { data, error } = await client.get({ url: '/users' });

if (error) {
  // Handle error
} else {
  // Use data
}

Throw errors

try {
  const { data } = await client.get({
    url: '/users',
    throwOnError: true,
  });
  // Use data
} catch (error) {
  // Handle error
}

Choosing a Client

Consider your framework

If you’re using Angular, use @hey-api/client-angular. For Next.js, use @hey-api/client-next. For Nuxt, use @hey-api/client-nuxt.

Evaluate dependencies

If you want zero dependencies, use @hey-api/client-fetch. If you already use Axios, use @hey-api/client-axios.

Check feature requirements

Need retry logic? Use @hey-api/client-ky. Need advanced Node.js features? Use @hey-api/client-ofetch.

Start simple

When in doubt, start with @hey-api/client-fetch. It’s the default and works everywhere.

Next Steps

Get Started

Start with the Fetch client

Configuration

Learn about client configuration

Authentication

Set up API authentication

Interceptors

Add request/response interceptors

Get Started

Configuration

Core Plugins

HTTP Clients

Validators

State Management

Web Frameworks

Advanced

Available Clients

Fetch

Axios

Angular

Ky

Next.js

Nuxt

ofetch

Custom

Quick Comparison

Common Features

Type Safety

Configuration

Authentication

Request/Response Interceptors

Server-Sent Events (SSE)

Response Styles

Fields Style (Default)

Data Style

Error Handling

Check error field (default)

Throw errors

Choosing a Client

Next Steps

Get Started

Configuration

Authentication

Interceptors

​Available Clients

Fetch

Axios

Angular

Ky

Next.js

Nuxt

ofetch

Custom

​Quick Comparison

​Common Features

​Type Safety

​Configuration

​Authentication

​Request/Response Interceptors

​Server-Sent Events (SSE)

​Response Styles

​Fields Style (Default)

​Data Style

​Error Handling

​Check error field (default)

​Throw errors

​Choosing a Client

​Next Steps

Get Started

Configuration

Authentication

Interceptors

Available Clients

Quick Comparison

Common Features

Type Safety

Configuration

Authentication

Request/Response Interceptors

Server-Sent Events (SSE)

Response Styles

Fields Style (Default)

Data Style

Error Handling

Check error field (default)

Throw errors

Choosing a Client

Next Steps