|
| 1 | +--- |
| 2 | +title: 'Annonce SWR 1.0' |
| 3 | +image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png |
| 4 | +description: 'Il y a presque 2 ans, nous avons ouvert 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 !' |
| 5 | +date: 27 Août 2021 |
| 6 | +--- |
| 7 | + |
| 8 | +import { Callout } from 'nextra-theme-docs' |
| 9 | +import { Bleed } from 'nextra-theme-docs' |
| 10 | + |
| 11 | +import Authors, { Author } from 'components/authors' |
| 12 | + |
| 13 | +# Annonce SWR 1.0 [#announcing-swr-10] |
| 14 | + |
| 15 | +<Authors date="27 Août 2021" by="par"> |
| 16 | + <Author name="Shu Ding" link="https://twitter.com/shuding_" /> |
| 17 | + <Author name="Jiachi Liu" link="https://twitter.com/huozhi" /> |
| 18 | +</Authors> |
| 19 | + |
| 20 | +Il y a presque 2 ans, nous avons [ouvert](https://twitter.com/vercel/status/1188911002626097157) 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 ! |
| 21 | + |
| 22 | +## Les Nouveautés [#whats-new] |
| 23 | + |
| 24 | +### Plus petite taille [#smaller-size] |
| 25 | + |
| 26 | +La [Performance](/docs/advanced/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** : |
| 27 | + |
| 28 | +- 41% de réduction pour le coeur (24% de réduction quand gzippée, **3.9 kB**) |
| 29 | +- 52% de réduction pour la taille d’installation du package |
| 30 | +- Amélioration du tree-shaking |
| 31 | + |
| 32 | +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. |
| 33 | + |
| 34 | +Nous avons aussi amélioré le groupage des packages, et il supporte maintenant les imports de chemin : |
| 35 | + |
| 36 | +```js |
| 37 | +import useSWR from 'swr' |
| 38 | +import useSWRInfinite from 'swr/infinite' |
| 39 | +``` |
| 40 | + |
| 41 | +Si vous n’utilisez pas `useSWRInfinite`, il ne sera pas inclus dans votre application. |
| 42 | + |
| 43 | +### Données de secours [#fallback-data] |
| 44 | + |
| 45 | +En 1.0, il y a une nouvelle option `fallback` que vous pouvez fournir pour chaque hook SWR avec des clés spécifiques : |
| 46 | + |
| 47 | +```jsx |
| 48 | +<SWRConfig value={{ |
| 49 | + fallback: { |
| 50 | + '/api/user': { name: 'Bob', ... }, |
| 51 | + '/api/items': ..., |
| 52 | + ... |
| 53 | + } |
| 54 | +}}> |
| 55 | + <App/> |
| 56 | +</SWRConfig> |
| 57 | +``` |
| 58 | + |
| 59 | +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](/docs/with-nextjs) pour plus de détails. |
| 60 | + |
| 61 | +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é. |
| 62 | + |
| 63 | +### Mode Immuable [#immutable-mode] |
| 64 | + |
| 65 | +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 : |
| 66 | + |
| 67 | +```jsx |
| 68 | +import useSWRImmutable from 'swr/immutable' |
| 69 | + |
| 70 | +// ... |
| 71 | + |
| 72 | +useSWRImmutable(key, fetcher, options) |
| 73 | +``` |
| 74 | + |
| 75 | +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](/docs/revalidation#disable-automatic-revalidations). |
| 76 | + |
| 77 | +### Fournisseur de Cache Personnalisable [#custom-cache-provider] |
| 78 | + |
| 79 | +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` : |
| 80 | + |
| 81 | +```jsx |
| 82 | +<SWRConfig value={{ |
| 83 | + provider: () => myCache |
| 84 | +}}> |
| 85 | + <App/> |
| 86 | +</SWRConfig> |
| 87 | +``` |
| 88 | + |
| 89 | +Vous pouvez utiliser cette nouvelle fonctionnalité pour faire beaucoup de choses. Nous avons quelques exemples ici : [_Mutate Multiples Clés avec RegEx_](/docs/advanced/cache#mutate-multiple-keys-from-regex), [_Cache Persistant avec LocalStorage_](/docs/advanced/cache#localstorage-based-persistent-cache), [_Réinitialisation Cache entre les Testes_](/docs/advanced/cache#reset-cache-between-test-cases). |
| 90 | + |
| 91 | +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()`. |
| 92 | + |
| 93 | +Vous pouvez lire la documentation [Fournisseur de Cache](/docs/advanced/cache) pour plus de détails. |
| 94 | + |
| 95 | +### useSWRConfig() [#useswrconfig] |
| 96 | + |
| 97 | +Il y a un nouveau Hook API pour retourner toutes les configurations globales, incluant le fournisseur de cache actuel et la fonction `mutate` globale : |
| 98 | + |
| 99 | +```jsx |
| 100 | +import { useSWRConfig } from 'swr' |
| 101 | + |
| 102 | +function Foo () { |
| 103 | + const { refreshInterval, cache, mutate, ...restConfig } = useSWRConfig() |
| 104 | + |
| 105 | + // ... |
| 106 | +} |
| 107 | +``` |
| 108 | + |
| 109 | +Plus d’informations [ici](/docs/global-configuration#access-to-global-configurations). |
| 110 | + |
| 111 | +### Middleware [#middleware] |
| 112 | + |
| 113 | +SWR Middleware est une nouvelle fonctionnalité qui vous permet de créer des abstractions réutilisables au-dessus des hooks SWR : |
| 114 | + |
| 115 | +```jsx |
| 116 | +<SWRConfig value={{ use: [...middleware] }} /> |
| 117 | + |
| 118 | +// ... or directly in `useSWR`: |
| 119 | +useSWR(key, fetcher, { use: [...middleware] }) |
| 120 | +``` |
| 121 | + |
| 122 | +Beaucoup de nouvelles idées peuvent être implémentées avec cette fonctionnalité, et nous avons construit quelques exemples : [_Request Logger_](/docs/middleware#request-logger), [_Keep Previous Data When Changing the Key_](/docs/middleware#keep-previous-result), et [_Serialize Object Keys_](/docs/middleware#serialize-object-keys). |
| 123 | + |
| 124 | +Visitez la documentation [Middleware API](/docs/middleware) pour plus de détails. |
| 125 | + |
| 126 | +### Amélioration et Meilleure Test de couverture [#improvements-and-better-test-coverage] |
| 127 | + |
| 128 | +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](https://github.com/vercel/swr/releases) pour plus de détails. |
| 129 | + |
| 130 | +### Traductions de la documentation [#docs-translations] |
| 131 | + |
| 132 | +Grâce à nos [contributeurs](https://github.com/vercel/swr-site/graphs/contributors) et à la fonctionnalité [i18n](https://nextra.vercel.app/features/i18n) de Nextra, nous proposons maintenant la documentation SWR dans six langues différentes : |
| 133 | + |
| 134 | +- [Anglais](https://swr.vercel.app) |
| 135 | +- [Espagnol](https://swr.vercel.app/es-ES) |
| 136 | +- [Chinois Simplifié](https://swr.vercel.app/zh-CN) |
| 137 | +- [Japonnais](https://swr.vercel.app/ja) |
| 138 | +- [Coréen](https://swr.vercel.app/ko) |
| 139 | +- [Russe](https://swr.vercel.app/ru) |
| 140 | + |
| 141 | +## Guide de Migration [#migration-guide] |
| 142 | + |
| 143 | +### Update de l’import de `useSWRInfinite` [#update-useswrinfinite-imports] |
| 144 | + |
| 145 | +`useSWRInfinite` a besoin d’être importé depuis `swr/infinite`: |
| 146 | + |
| 147 | +```diff |
| 148 | +- import { useSWRInfinite } from 'swr' |
| 149 | ++ import useSWRInfinite from 'swr/infinite' |
| 150 | +``` |
| 151 | + |
| 152 | +Si vous utilisez les types correspondants, mettez à jour le chemin d’importation aussi : |
| 153 | + |
| 154 | +```diff |
| 155 | +- import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr' |
| 156 | ++ import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr/infinite' |
| 157 | +``` |
| 158 | + |
| 159 | +### Remplacement de `revalidate` par `mutate` [#change-revalidate-to-mutate] |
| 160 | + |
| 161 | +`useSWR` ne renvoid plus la méthode `revalidate`, modifier plutôt par `mutate`: |
| 162 | + |
| 163 | +```diff |
| 164 | +- const { revalidate } = useSWR(key, fetcher, options) |
| 165 | ++ const { mutate } = useSWR(key, fetcher, options) |
| 166 | + |
| 167 | + |
| 168 | + // ... |
| 169 | + |
| 170 | + |
| 171 | +- revalidate() |
| 172 | ++ mutate() |
| 173 | +``` |
| 174 | + |
| 175 | +### Renommage de `initialData` par `fallbackData` [#rename-initialdata-to-fallbackdata] |
| 176 | + |
| 177 | +```diff |
| 178 | +- useSWR(key, fetcher, { initialData: ... }) |
| 179 | ++ useSWR(key, fetcher, { fallbackData: ... }) |
| 180 | +``` |
| 181 | + |
| 182 | +### Plus de méthode de récupération par défaut [#no-more-default-fetcher] |
| 183 | + |
| 184 | +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>` : |
| 185 | + |
| 186 | +```jsx |
| 187 | +<SWRConfig value={{ fetcher: (url) => fetch(url).then(res => res.json()) }}> |
| 188 | + <App/> |
| 189 | +</SWRConfig> |
| 190 | + |
| 191 | +// ... or |
| 192 | +useSWR(key, (url) => fetch(url).then(res => res.json())) |
| 193 | +``` |
| 194 | + |
| 195 | +### Recommandation d’utiliser le Hook-Returned `mutate` [#recommend-to-use-the-hook-returned-mutate] |
| 196 | + |
| 197 | +Ce **n’est pas** un changement bloquant, mais nous _recommandons_ de toujours utiliser l’objet `mutate` renvoyé par le hook `useSWRConfig`: |
| 198 | + |
| 199 | +```diff |
| 200 | +- import { mutate } from 'swr' |
| 201 | ++ import { useSWRConfig } from 'swr' |
| 202 | + |
| 203 | + |
| 204 | + function Foo () { |
| 205 | ++ const { mutate } = useSWRConfig() |
| 206 | + |
| 207 | + return <button onClick={() => mutate('key')}> |
| 208 | + Mutate Key |
| 209 | + </button> |
| 210 | + } |
| 211 | +``` |
| 212 | + |
| 213 | +Si vous n’utilisez pas de cache provider, l’import global `import { mutate } from ’swr’` fonctionne toujours. |
| 214 | + |
| 215 | +### Renommage des Types [#renamed-types] |
| 216 | + |
| 217 | +Si vous utilisez TypeScript, les noms de types suivants ont été changés pour plus de cohérence : |
| 218 | + |
| 219 | +| 0.x (déprécier) | 1.0 | Note | |
| 220 | +| ------------------------------ | -------------------------- | ----------------------- | |
| 221 | +| `ConfigInterface` | `SWRConfiguration` | | |
| 222 | +| `keyInterface` | `Key` | | |
| 223 | +| `responseInterface` | `SWRResponse` | | |
| 224 | +| `RevalidateOptionInterface` | `RevalidatorOptions` | | |
| 225 | +| `revalidateType` | `Revalidator` | | |
| 226 | +| `SWRInfiniteResponseInterface` | `SWRInfiniteResponse` | moved to `swr/infinite` | |
| 227 | +| `SWRInfiniteConfigInterface` | `SWRInfiniteConfiguration` | moved to `swr/infinite` | |
| 228 | + |
| 229 | +### Fonctionnalités Utilisateurs en Beta et Non-officiel [#beta-and-unofficial-feature-users] |
| 230 | + |
| 231 | +Si vous utilisez une version beta de SWR, ou utilisez des APIs non documentées, veuillez prendre en compte les changements suivants : |
| 232 | + |
| 233 | +- `import { cache } from ’swr’` est supprimé; utilisez plutôt la nouvelle [API `useSWRConfig`](#useswrconfig). |
| 234 | +- `import { createCache } from ’swr’` est supprimé; utilisez plutôt la nouvelle [API fournisseur de cache](/docs/advanced/cache). |
| 235 | +- `revalidateWhenStale` est renommé par `revalidateIfStale`. |
| 236 | +- `middlewares` est renommé par `use`. |
| 237 | + |
| 238 | +### Changelog [#changelog] |
| 239 | + |
| 240 | +Lisez le Changelog complet [sur GitHub](https://github.com/vercel/swr/releases). |
| 241 | + |
| 242 | +## La suite ? [#whats-next] |
| 243 | + |
| 244 | +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. |
| 245 | + |
| 246 | +Si vous avez des retours sur cette release, merci de [nous le faire savoir](https://github.com/vercel/swr/discussions). |
| 247 | + |
| 248 | +## Merci ! [#thank-you] |
| 249 | + |
| 250 | +Nous remercions [Toru Kobayashi](https://twitter.com/koba04) et [Yixuan Xu](https://twitter.com/yixuanxu94) pour leurs contributions à la librairie, et [Paco Coursey](https://twitter.com/pacocoursey), [uttk](https://github.com/uttk), [Tomohiro SHIOYA](https://github.com/shioyang), [Markoz Peña](https://github.com/markozxuu), [SeulGi Choi](https://github.com/cs09g), [Fang Lu](https://github.com/huzhengen), [Valentin Politov](https://github.com/valentinpolitov) pour leur travail sur les traductions et la documentation. Cette release n’aurait pas pu exister sans eux. |
| 251 | + |
| 252 | +Nous voulons aussi remercier toute la communauté, nos [110 contributeurs](https://github.com/vercel/swr/graphs/contributors) (+ [45 contributeurs à la documentation](https://github.com/vercel/swr-site/graphs/contributors)), et tout ceux qui nous ont aidé et donné des retours ! |
0 commit comments