swrv

swrv

[](https://www.npmjs.com/package/swrv) `swrv` (pronounced "swerve") is a library using the [Vue Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) for remote data fetching. It is largely a port of [swr](https://github.com/zeit/swr). - [Documentation](https://docs-swrv.netlify.app/) The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP [RFC 5861](https://tools.ietf.org/html/rfc5861). SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. Features: - Transport and protocol agnostic data fetching - Fast page navigation - Interval polling - ~~SSR support~~ (removed as of version `0.10.0` - [read more](https://github.com/Kong/swrv/pull/304)) - Vue 3 Support - Revalidation on focus - Request deduplication - TypeScript ready - Minimal API - Stale-if-error - Customizable cache implementation - Error Retry With `swrv`, components will get a stream of data updates constantly and automatically. Thus, the UI will be always fast and reactive. ## Table of Contents - [Installation](#installation) - [Vue 3](#vue-3) - [Vue 2](#vue-2) - [Getting Started](#getting-started) - [Api](#api) - [Parameters](#parameters) - [Return Values](#return-values) - [Config options](#config-options) - [Prefetching](#prefetching) - [Dependent Fetching](#dependent-fetching) - [Stale-if-error](#stale-if-error) - [State Management](#state-management) - [useSwrvState](#useswrvstate) - [Vuex](#vuex) - [Cache](#cache) - [localStorage](#localstorage) - [Serve from cache only](#serve-from-cache-only) - [Per-app cache isolation](#per-app-cache-isolation) - [In test suites](#in-test-suites) - [Writing to a provided cache](#writing-to-a-provided-cache) - [Error Handling](#error-handling) - [FAQ](#faq) - [How is swrv different from the swr react library](#how-is-swrv-different-from-the-swr-react-library) - [Why does swrv make so many requests](#why-does-swrv-make-so-many-requests) - [How can I refetch swrv data to update it](#how-can-i-refetch-swrv-data-to-update-it) - [Contributors ✨](#contributors-) ## Installation ### Vue 3 ```shell yarn add swrv ``` `swrv` supports every Vue 3 minor release since `3.2` (`^3.2.0`). Testing and bug reports track the latest patch of each minor. ### Vue 2 Vue 2 reached end of life on 31 December 2023 and is no longer supported. The last releases to support it stay installable: - Vue 2.7 — `[email protected]`, under the `v2-latest` tag - Vue 2.6 and below — `[email protected]`, under the `legacy` tag. It uses the external `@vue/composition-api` plugin, set up as described in [a previous version of the README](https://github.com/Kong/swrv/blob/b621aac02b7780a4143c5743682070223e793b10/README.md). ## Getting Started ```vue ``` In this example, the Vue Hook `useSWRV` accepts a `key` and a `fetcher` function. `key` is a unique identifier of the request, normally the URL of the API. And the fetcher accepts key as its parameter and returns the data asynchronously. `useSWRV` also returns 2 values: `data` and `error`. When the request (fetcher) is not yet finished, data will be `undefined`. And when we get a response, it sets `data` and `error` based on the result of fetcher and rerenders the component. This is because `data` and `error` are Vue [Refs](https://vuejs.org/api/reactivity-core.html#ref), and their values will be set by the fetcher response. Note that fetcher can be any asynchronous function, so you can use your favorite data-fetching library to handle that part. When omitted, swrv falls back to the browser [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). ## Api ```ts const { data, error, isValidating, mutate } = useSWRV(key, fetcher, options) ``` `useSWRV` must be called from a component `setup()` function or an active `effectScope()`. ### Parameters | Param | Required | Description | | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `key` | yes | a unique key string for the request (or a reactive reference / watcher function / null) (advanced usage) | | `fetcher` | | a Promise returning function to fetch your data. If `null`, swrv will fetch from cache only and not revalidate. If omitted (i.e. `undefined`) then the [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) api will be used. | | `options` | | an object of configuration options | ### Return Values - `data`: data for the given key resolved by fetcher (or undefined if not loaded) - `error`: error thrown by fetcher (or undefined) - `isValidating`: if there's a request or revalidation loading - `mutate`: function to trigger the validation manually ### Config options See [Config Defaults](https://github.com/Kong/swrv/blob/1587416e59dad12f9261e289b8cf63da81aa2dd4/src/use-swrv.ts#L43) - `refreshInterval = 0` - polling interval in milliseconds. 0 means this is disabled. - `dedupingInterval = 2000` - dedupe requests with the same key in this time span - `ttl = 0` - time to live of response data in cache. 0 mean it stays around forever. - `shouldRetryOnError = true` - retry when fetcher has an error - `errorRetryInterval = 5000` - error retry interval - `errorRetryCount: 5` - max error retry count - `revalidateOnFocus = true` - auto revalidate when window gets focused - `revalidateDebounce = 0` - debounce in milliseconds for revalidation. Useful for when a component is serving from the cache immediately, but then un-mounts soon thereafter (e.g. a user clicking "next" in pagination quickly) to avoid unnecessary fetches. - `cache` - caching instance to store response data in. See [src/lib/cache](src/lib/cache.ts), and [Cache](#cache) below. ## Prefetching Prefetching can be useful for when you anticipate user actions, like hovering over a link. SWRV exposes the `mutate` function so that results can be stored in the SWRV cache at a predetermined time. ```ts import { mutate } from 'swrv' function prefetch() { mutate( '/api/data', fetch('/api/data').then((res) => res.json()) ) // the second parameter is a Promise // SWRV will use the result when it resolves } ``` ## Dependent Fetching swrv also allows you to fetch data that depends on other data. It ensures the maximum possible parallelism (avoiding waterfalls), as well as serial fetching when a piece of dynamic data is required for the next data fetch to happen. ``` … ``` ## Stale-if-error One of the benefits of a stale content caching strategy is that the cache can be served when requests fail.`swrv` uses a [stale-if-error](https://tools.ietf.org/html/rfc5861#section-4) strategy and will maintain `data` in the cache even if a `useSWRV` fetch returns an `error`. ```vue

hello {{ data.name }} of {{ data.birthplace }}. This content will continue to appear even if future requests to {{ endpoint }} fail!

``` ## State Management ### useSwrvState Sometimes you might want to know the exact state where swrv is during stale-while-revalidate lifecyle. This is helpful when representing the UI as a function of state. Here is one way to detect state using a user-land composable `useSwrvState` function: ``` … ``` And then in your template you can use it like so: ``` … ``` ### Vuex Most of the features of swrv handle the complex logic / ceremony that you'd have to implement yourself inside a vuex store. All swrv instances use the same global cache, so if you are using swrv alongside vuex, you can use global watchers on resolved swrv returned refs. It is encouraged to wrap useSWRV in a custom composable function so that you can do application level side effects if desired (e.g. dispatch a vuex action when data changes to log events or perform some logic). Vue 3 example: ``` … ``` ## Cache By default, a custom cache implementation is used to store fetcher response data cache, in-flight promise cache, and ref cache. Response data cache can be customized via the `config.cache` property. Built in cache adapters: ### localStorage A common usage case to have a better _offline_ experience is to read from `localStorage`. Checkout the [PWA example](https://github.com/Kong/swrv/tree/master/examples/pwa) for more inspiration. ```ts import useSWRV, { LocalStorageCache } from 'swrv' function useTodos () { const { data, error } = useSWRV('/todos', undefined, { cache: new LocalStorageCache('swrv'), shouldRetryOnError: false }) return { data, error } } ``` ### Serve from cache only To only retrieve a swrv cache response without revalidating, you can set the fetcher function to `null` from the useSWRV call. This can be useful when there is some higher level swrv composable that is always sending data to other instances, so you can assume that composables with a `null` fetcher will have data available. This [isn't very intuitive](https://github.com/Kong/swrv/issues/148), so will be looking for ways to improve this api in the future. ```ts // Component A const { data } = useSWRV('/api/config', fetcher) // Component B, only retrieve from cache const { data } = useSWRV('/api/config', null) ``` ### Per-app cache isolation The response, in-flight promise, and ref caches are module singletons, shared by every `useSWRV` call in the process. That is what you want in an application, and what you do not want in a test suite: mounts share cache entries, so a later test can be served an entry left behind by an earlier one and its own fetcher never runs — silently, as stale data rather than an error. `provideSwrvCache` gives an app its own set of caches. Every `useSWRV` call within that app's component tree uses them instead of the singletons; apps without a provide are unaffected. ```ts import { provideSwrvCache } from 'swrv' const app = createApp(App) provideSwrvCache(app) ``` Pass `overrides` to swap in your own cache implementation for any of the three. Anything omitted gets a fresh instance. ```ts const bundle = provideSwrvCache(app, { data: new LocalStorageCache('swrv') }) ``` Calling it again on the same app is a no-op and returns the original bundle, so it is safe for a host app and a test harness to both call it. Passing `overrides` on that second call throws rather than discarding them — `overrides` replaces an implementation, so it only applies to the call that creates the bundle. To seed entries into a bundle, or to inspect what was cached, reach for the bundle itself rather than `overrides`. `getSwrvCache` returns it for an app that h