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.
- 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
<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.
swr-vue is inspired by these great works:
The MIT License.