upfetch est une bibliothèque JavaScript qui promet d'améliorer la manière dont nous effectuons des requêtes HTTP. Conçue pour être légère, sécurisée et facile à utiliser, upfetch s'impose comme une alternative moderne à la traditionnelle API Fetch.

Avec seulement 1.2kB gzippé et aucune dépendance, upfetch est extrêmement légère. Elle ne ralentira pas vos applications et s'intègre facilement dans vos projets existants.

Fonctionnalités clés

upfetch étend l'API Fetch native, ce qui signifie que vous pouvez utiliser toutes les options standard de Fetch tout en bénéficiant de fonctionnalités supplémentaires et de valeurs par défaut judicieuses.

Validation de schéma

Un des principaux atouts d'upfetch est qu'elle permet de valider les réponses grâce à Zod, Valibot ou Arktype. Le retour est ainsi analysé et doit répondre à la configuration demandé.
Cela garantit que les données que vous recevez sont conformes à vos attentes, réduisant ainsi les risques d'erreurs.

import { upfetch } from './upfetch';
import { z } from 'zod';

const user = await upfetch('https://api.monsite.fr/users/1', {
  schema: z.object({
    id: z.number(),
    name: z.string(),
    avatar: z.string().url(),
  }),
});

Configuration par défaut des requêtes

Vous pouvez définir des valeurs par défaut comme baseUrl ou headers une seule fois et les utiliser partout :

const upfetch = up(fetch, () => ({
   baseUrl: 'https://api.monsite.fr',
   timeout: 30000,
}))

Paramètres de requête simplifiés

Vous pouvez aussi vous simplifier la vie avec les Query Parameters. Avec l'API Fetch classique, vous pourriez avoir ceci :

fetch(
   `https://api.monsite.fr/todos?search=${search}&skip=${skip}&take=${take}`,
)

Avec upfetch, vous pouvez mapper les paramètres automatiquement :

upfetch('/todos', {
   params: { search, skip, take },
})

Gestion automatique du corps de la requête

upfetch gère automatiquement la sérialisation des corps de requête en JSON, ce qui évite d'avoir à le faire manuellement à chaque requête.
Avec fetch standard :

fetch('https://api.moniste.fr/todos', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({ title: 'New Todo' }),
})

Avec upfetch :

upfetch('/todos', {
   method: 'POST',
   body: { title: 'New Todo' },
})

Je vous laisse parcourir la doc pour découvrir les autres fonctionnalités d'upfetch !