
swrv
Data fetching for Vue Composition Api
Feature-rich Data Fetching
Transport and protocol agnostic data fetching, revalidation on focus, polling, in-flight de-duplication.
Vue Composition Api
Start developing with power of Vue 3, using the reactivity system of the Vue composition api. Supports both Vue 3 and @vue/composition-api
Stale-while-revalidate
Uses cache to serve pages fast, while revalidating data sources producing an eventually consistent UI.
swrv
(pronounced "swerve") is a library for for data fetching. It is largely a port of swr.
The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
<template>
<div>
<div v-if="error">failed to load</div>
<div v-if="!data">loading...</div>
<div v-else>hello {{ data.name }}</div>
</div>
</template>
<script>
import useSWRV from 'swrv'
export default {
name: 'Profile',
setup() {
const fetcher = key => fetch(key).then(res => res.json())
const { data, error } = useSWRV('/api/user', key => fetcher)
return {
data,
error
}
}
}
</script>
✨ Read the blogpost introducing swrv