Annonce SWR 1.0

Il y a presque 2 ans, nous avons ouvert (opens in a new tab) SWR, la petite librairie React de récupération de données que les gens adorent. Aujourd’hui, nous atteignons une autre étape : la version 1.0 de SWR !

Les Nouveautés

Plus petite taille

La Performance est l’une des choses les plus importantes de SWR. En 1.0, nous avons rendu la librairie significativement plus petite sans supprimer aucune fonctionnalité existante :

• 41% de réduction pour le coeur (24% de réduction quand gzippée, 3.9 kB)
• 52% de réduction pour la taille d’installation du package
• Amélioration du tree-shaking

There are many reasons to make the library lightweight: your application will have a smaller bundle, a leaner runtime, and a smaller node_modules directory.

Nous avons aussi amélioré le groupage des packages, et il supporte maintenant les imports de chemin :

import useSWR from 'swr'
import useSWRInfinite from 'swr/infinite'

Si vous n’utilisez pas useSWRInfinite, il ne sera pas inclus dans votre application.

Données de secours

En 1.0, il y a une nouvelle option fallback que vous pouvez fournir pour chaque hook SWR avec des clés spécifiques :

<SWRConfig value={{
  fallback: {
    '/api/user': { name: 'Bob', ... },
    '/api/items': ...,
    ...
  }
}}>
  <App/>
</SWRConfig>

C’est très utile pour les rendering SSG, SSR, et pour la création de données mockup pour les tests. Consultez la documentation Next.js SSG et SSR pour plus de détails.

Pour une meilleure cohérence et pour évité la confusion, initialData est maintenant renommé en fallbackData, qui fournit toujours une valeur de secours pour le hook donné.

Mode Immuable

Parfois, vous voulez marquer une ressource comme immuable pour qu’elle ne change jamais. Il est préférable de désactiver la revalidation automatique et de ne faire la requête qu’une seule fois. Il y a maintenant un hook helper pour rendre cela plus facile :

import useSWRImmutable from 'swr/immutable'
 
// ...
 
useSWRImmutable(key, fetcher, options)

C’est la même API que useSWR, mais la revalidation ne se fera pas sur un changement d’onglet ou sur une reconnexion. Il y a aussi une nouvelle option, revalidateIfStale, que vous pouvez utiliser pour contrôler le comportement précisément. Plus d’informations ici.

Fournisseur de Cache Personnalisable

Par défaut, SWR utilise un cache global et unique pour stocker l’ensemble des données. En 1.0, vous pouvez le personnalisé avec la nouvelle option provider :

<SWRConfig value={{
  provider: () => myCache
}}>
  <App/>
</SWRConfig>

Vous pouvez utiliser cette nouvelle fonctionnalité pour faire beaucoup de choses. Nous avons quelques exemples ici : Mutate Multiples Clés avec RegEx, Cache Persistant avec LocalStorage, Réinitialisation Cache entre les Testes.

Cette nouvelle API est aussi plus compatible avec le rendu concurrent de React 18. Si vous ajoutez un fournisseur de cache, assurez-vous d’utiliser la fonction mutate globale retournée par useSWRConfig().

Vous pouvez lire la documentation Fournisseur de Cache pour plus de détails.

useSWRConfig()

Il y a un nouveau Hook API pour retourner toutes les configurations globales, incluant le fournisseur de cache actuel et la fonction mutate globale :

import { useSWRConfig } from 'swr'
 
function Foo () {
  const { refreshInterval, cache, mutate, ...restConfig } = useSWRConfig()
 
  // ...
}

Plus d’informations ici.

Middleware

SWR Middleware est une nouvelle fonctionnalité qui vous permet de créer des abstractions réutilisables au-dessus des hooks SWR :

<SWRConfig value={{ use: [...middleware] }} />
 
// ... or directly in `useSWR`:
useSWR(key, fetcher, { use: [...middleware] })

Beaucoup de nouvelles idées peuvent être implémentées avec cette fonctionnalité, et nous avons construit quelques exemples : Request Logger, Keep Previous Data When Changing the Key, et Serialize Object Keys.

Visitez la documentation Middleware API pour plus de détails.

Amélioration et Meilleure Test de couverture

Depuis la 0.x, nous avons fait des centaines de petites améliorations et de corrections de bugs. SWR a maintenant 157 tests qui couvrent la plupart des effets de bord dans la récupération de données. Lisez le Changelog (opens in a new tab) pour plus de détails.

Traductions de la documentation

Grâce à nos contributeurs (opens in a new tab) et à la fonctionnalité i18n (opens in a new tab) de Nextra, nous proposons maintenant la documentation SWR dans six langues différentes :

• Anglais (opens in a new tab)
• Espagnol (opens in a new tab)
• Chinois Simplifié (opens in a new tab)
• Japonnais (opens in a new tab)
• Coréen (opens in a new tab)
• Russe (opens in a new tab)

Guide de Migration

Update de l’import de useSWRInfinite

useSWRInfinite a besoin d’être importé depuis swr/infinite:

- import { useSWRInfinite } from 'swr'
+ import useSWRInfinite from 'swr/infinite'

Si vous utilisez les types correspondants, mettez à jour le chemin d’importation aussi :

- import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr'
+ import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr/infinite'

Remplacement de revalidate par mutate

useSWR ne renvoid plus la méthode revalidate, modifier plutôt par mutate:

- const { revalidate } = useSWR(key, fetcher, options)
+ const { mutate } = useSWR(key, fetcher, options)
 
 
  // ...
 
 
- revalidate()
+ mutate()

Renommage de initialData par fallbackData

- useSWR(key, fetcher, { initialData: ... })
+ useSWR(key, fetcher, { fallbackData: ... })

Plus de méthode de récupération par défaut

SWR ne fourni plus de méthode de récupération par défaut (un appel fetch qui parse les données en JSON). La manière la plus simple de migrer ce changement est d’utiliser le composant <SWRConfig> :

<SWRConfig value={{ fetcher: (url) => fetch(url).then(res => res.json()) }}>
  <App/>
</SWRConfig>
 
// ... or
useSWR(key, (url) => fetch(url).then(res => res.json()))

Recommandation d’utiliser le Hook-Returned mutate

Ce n’est pas un changement bloquant, mais nous recommandons de toujours utiliser l’objet mutate renvoyé par le hook useSWRConfig:

- import { mutate } from 'swr'
+ import { useSWRConfig } from 'swr'
 
 
  function Foo () {
+   const { mutate } = useSWRConfig()
 
    return <button onClick={() => mutate('key')}>
      Mutate Key
    </button>
  }

Si vous n’utilisez pas de cache provider, l’import global import { mutate } from ’swr’ fonctionne toujours.

Renommage des Types

Si vous utilisez TypeScript, les noms de types suivants ont été changés pour plus de cohérence :

Fonctionnalités Utilisateurs en Beta et Non-officiel

Si vous utilisez une version beta de SWR, ou utilisez des APIs non documentées, veuillez prendre en compte les changements suivants :

• import { cache } from ’swr’ est supprimé; utilisez plutôt la nouvelle API useSWRConfig.
• import { createCache } from ’swr’ est supprimé; utilisez plutôt la nouvelle API fournisseur de cache.
• revalidateWhenStale est renommé par revalidateIfStale.
• middlewares est renommé par use.

Changelog

Lisez le Changelog complet sur GitHub (opens in a new tab).

La suite ?

Dans les futures releases, nous allons continuer à améliorer la librairie tout en maintenant la stabilité. Nous visons aussi à coller aux futures versions de React, car plusieurs nouvelles fonctionnalités et améliorations dans la version 1.0 sont déjà en préparation. Aussi, nous travaillons aussi sur de nouvelles fonctionnalités pour améliorer l’expérience de récupération de données avec React et l’expérience d’utilisation de cette librairie.

Si vous avez des retours sur cette release, merci de nous le faire savoir (opens in a new tab).

Merci !

Nous remercions Toru Kobayashi (opens in a new tab) et Yixuan Xu (opens in a new tab) pour leurs contributions à la librairie, et Paco Coursey (opens in a new tab), uttk (opens in a new tab), Tomohiro SHIOYA (opens in a new tab), Markoz Peña (opens in a new tab), SeulGi Choi (opens in a new tab), Fang Lu (opens in a new tab), Valentin Politov (opens in a new tab) pour leur travail sur les traductions et la documentation. Cette release n’aurait pas pu exister sans eux.

Nous voulons aussi remercier toute la communauté, nos 110 contributeurs (opens in a new tab) (+ 45 contributeurs à la documentation (opens in a new tab)), et tout ceux qui nous ont aidé et donné des retours !