Skip to main content
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

ClientUse CaseKey FeaturesBundle Size
FetchUniversalNative API, zero deps~2KB
AxiosNode.js, advancedInterceptors, cancellation~13KB
AngularAngular appsDI, RxJS observablesN/A
KyModern browsersRetry, timeout, hooks~5KB
Next.jsNext.js appsServer components, caching~2KB
NuxtNuxt appsComposables, SSRN/A
ofetchUniversalAdvanced features, hooks~3KB
CustomAny libraryFull controlVaries

​
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

1

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.
2

Evaluate dependencies

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

Check feature requirements

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

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

Build docs developers (and LLMs) love

Get started for freeTalk to us