tessl/npm-swrv

A library using the Vue Composition API for remote data fetching with stale-while-revalidate caching strategy

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

swrv

Name: tessl/npm-swrv
Author: tessl

swrv (pronounced "swerve") is a library using the Vue Composition API for remote data fetching with stale-while-revalidate caching strategy. It enables developers to create fast, reactive UIs by returning cached data immediately while simultaneously fetching fresh data in the background.

Package Information

Package Name: swrv
Package Type: npm
Language: TypeScript
Installation: npm install swrv
Vue Compatibility: Vue 3.x, Vue 2.7+

Core Imports

import useSWRV, { mutate, SWRVCache, IConfig } from "swrv";

For CommonJS:

const useSWRV = require("swrv");
const { mutate, SWRVCache } = require("swrv");

Basic Usage

import useSWRV from "swrv";

export default {
  setup() {
    const { data, error, isValidating, mutate } = useSWRV('/api/user', fetch);

    return {
      data,
      error,
      isValidating,
      mutate
    };
  }
};

Architecture

swrv is built around several key components:

Core Hook: useSWRV composable that provides reactive data fetching with automatic caching
Global Cache: Shared cache instances that deduplicate requests and store responses
Request Deduplication: Automatic deduplication of identical requests within configurable time windows
Revalidation System: Automatic background revalidation triggered by focus, intervals, or manual calls
Error Handling: Built-in retry logic with exponential backoff and error boundaries
Cache Adapters: Pluggable cache implementations including memory and localStorage options

Capabilities

Data Fetching Hook

Core composable for reactive data fetching with automatic caching, revalidation, and error handling.

function useSWRV<Data = any, Error = any>(
  key: IKey
): IResponse<Data, Error>;

function useSWRV<Data = any, Error = any>(
  key: IKey,
  fn: fetcherFn<Data> | undefined | null,
  config?: IConfig
): IResponse<Data, Error>;

Data Fetching

Global State Management

Global mutation function and cache management for coordinating data updates across components.

function mutate<Data>(
  key: string,
  res: Promise<Data> | Data,
  cache?: SWRVCache<any>,
  ttl?: number
): Promise<{data: Data, error: any, isValidating: boolean}>;

Global State Management

Cache System

Configurable cache implementations for storing fetched data with TTL support and automatic expiration.

class SWRVCache<CacheData> {
  constructor(ttl?: number);
  get(k: string): ICacheItem<CacheData>;
  set(k: string, v: any, ttl: number): void;
  delete(serializedKey: string): void;
  serializeKey(key: IKey): string;
}

Cache System

Core Types

type IKey = keyType | WatchSource<keyType>;
type keyType = string | any[] | null | undefined;
type fetcherFn<Data> = (...args: any) => Data | Promise<Data>;

interface IResponse<Data = any, Error = any> {
  data: Ref<Data | undefined>;
  error: Ref<Error | undefined>;
  isValidating: Ref<boolean>;
  isLoading: Ref<boolean>;
  mutate: (data?: fetcherFn<Data>, opts?: revalidateOptions) => Promise<void>;
}

interface IConfig<Data = any, Fn extends fetcherFn<Data> = fetcherFn<Data>> {
  refreshInterval?: number;
  cache?: LocalStorageCache | SWRVCache<any>;
  dedupingInterval?: number;
  ttl?: number;
  serverTTL?: number;
  revalidateOnFocus?: boolean;
  revalidateDebounce?: number;
  shouldRetryOnError?: boolean;
  errorRetryInterval?: number;
  errorRetryCount?: number;
  fetcher?: Fn;
  isOnline?: () => boolean;
  isDocumentVisible?: () => boolean;
}

interface revalidateOptions {
  shouldRetryOnError?: boolean;
  errorRetryCount?: number;
  forceRevalidate?: boolean;
}

interface ICacheItem<Data> {
  data: Data;
  createdAt: number;
  expiresAt: number;
}