Cicerchie Svelte-SWR

A stale-while-revalidate data fetching library for Svelte.

WARNING!

These components are still "experimental" (v0.x.x).
Some of them are not tested as rigourously as it should be and none of them have been through code review.
Use them at your own risk and check that them do what you want them to do.

Installation

npm install @cicerchie/svelte-swr

Usage

<script>
  import { useSWR } from "@cicerchie/svelte-swr";

  const players = useSWR<PlayerList>();

  $: players.update({
    key: `players?page=${page}&filter=${JSON.stringify(filter)}`,
    fn: () => playersService.list({ page, filter }),
  });
</script>

{#if $players.isLoading}
  Loading...
{:else if $players.error}
  {$players.error}
{:else}
  {#each $players.data.players as player (player.id)}
    ID: {player.id}
  {:else}
    No players yet
  {/each}
{/if}

Changelog

Is automagically updated with each release and you can read it here.

Features

• Transport and protocol agnostic
• Jamstack oriented
• Fast, lightweight and reusable data fetching (fast page navigation, fast UI)
• Built-in cache
• Cache data and retrieve it when needed
• Initial immediate data (offline or already cached)
• Global onError custom handler
• Typescript ready (still incomplete and so many any!)
• Pagination (done, docs needed)
• Requests deduplication
• Enable and disable it with a prop
• Polling on interval
• Revalidation on window focus
• Revalidation on network recovery
• Local mutation (Optimistic UI)
• Smart error retry
• Scroll position recovery
• Persist and restore from LocalStorage/IndexedDB
• Clear cache when you need to invalidate all data or specific keys

TODO

• Docs (HELP!)
• Tests (HELP!)
• Demo site (using routes dir: it's a SvelteKit app!)