@zimic/fetch NPM

@zimic/fetch is a minimal (1 kB minified and gzipped), zero-dependency, and type-safe fetch-like API client.

!WARNING
:construction: This library is experimental.

Features

:sparkles: Type-safe fetch: Create a type-safe fetch-like API client. Use your @zimic/http schema and have your requests and responses fully typed by default.
:muscle: Developer experience: @zimic/fetch seeks to be as compatible with the native Fetch API as possible, while providing an ergonomic interface to improve type safety. Define default options to apply to your requests, such as a base URL, headers, search parameters, and more. Inspect and modify requests and responses using onRequest and onResponse listeners.

Getting started

Installation

Manager	Command
npm	`npm install @zimic/http @zimic/fetch --save`
yarn	`yarn add @zimic/http @zimic/fetch`
pnpm	`pnpm add @zimic/http @zimic/fetch`

Basic usage

Declare your HTTP schema using @zimic/http:

import { type HttpSchema } from '@zimic/http';

interface User {
  username: string;
}

interface RequestError {
  code: string;
  message: string;
}

type Schema = HttpSchema<{
  '/users': {
    POST: {
      request: { body: User };
      response: {
        201: { body: User };
        400: { body: RequestError };
        409: { body: RequestError };
        500: { body: RequestError };
      };
    };

    GET: {
      request: {
        searchParams: {
          query?: string;
          limit?: `${number}`;
        };
      };
      response: {
        200: { body: User[] };
        404: { body: RequestError };
        500: { body: RequestError };
      };
    };
  };

  '/users/:userId': {
    PATCH: {
      request: {
        headers: { authorization: string };
        body: Partial<User>;
      };
      response: {
        204: {};
        400: { body: RequestError };
        500: { body: RequestError };
      };
    };
  };
}>;

Create your fetch client:

import { createFetch } from '@zimic/fetch';

const fetch = createFetch<Schema>({
  baseURL: 'http://localhost:3000',
});

Enjoy requests and responses typed by default!

const response = await fetch('/users', {
  method: 'GET',
  searchParams: { query: 'u', limit: '10' },
});

if (response.status === 404) {
  return null; // Not found
}

if (!response.ok) {
  throw response.error;
}

const users = await response.json();
return users; // User[]