Swr-vue NPM | npm.io

Introduction

swr-vue is a Vue composables library for data fetching.

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 request (revalidate), and finally comes with the up-to-date data again.

Features

Fast and reusable data fetching
Transport and protocol agnostic
Built-in cache and request dedulication
Revalidation on focus
Revalidation on network recovery
Polling
Local mutation (Optimistic UI)
Type safe
Configurable

For a more details you can visit the documentation

If you are looking to contribute, please check CONTRIBUTING.md

Quick Start

<script setup lang="ts">
import { useSWR } from 'swr-vue';

const fetcher = async (url) => {
  const res = await fetch(url);
  
  return res.json();
}

const { data, error } = useSWR('/api/user', fetcher);
</script>

<template>
  <div v-if="error">failed to load</div>
  <div v-else-if="!data">loading...</div>
  <div v-else>hello {{ data.name }}!</div>
</template>

In this example, the composable useSWR accepts a key and a fetcher function. The 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.

useSWR returns 2 values: data and error. When the request is not yet finished, data and error will be undefined. And when we get a response, it sets data and error based on the result of fetcher.

fetcher can be any asynchronous function, you can use your favourite data-fetching library to handle that part.