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