TypeScript icon, indicating that this package has built-in type declarations

4.0.2 • Public • Published


Svelte Readable Store bound to an async resource

NPM Package

npm install svelte-async-readable

Full documentation:

Working demo:

You can clone this repo and run npm run dev to see it working


Create an async readable associated with a GET request:

const myReadable = asyncReadable(writable(null), {
	dataProvider: () => axios.get('/path/to/api').then((response) =>,
myReadable.fetch().catch(() => console.error('ops, something went wrong'));

In a Svelte component, the created AsyncReadable can be used just like any other Readable:

Here is the resource:

A useful nested store named fetching is provided. It can be used, for example, to show a loading state:

	const myReadable = asyncReadable(...); // Initialized in some way
		.catch(() => console.log('ops, something went wrong')); // Start fetching asynchronously (don't forget, Promises always come with a catch!)
	const { fetching } = myReadable; // Extracts the fetching store
{#if $fetching}
	Here is the resource:

The fetch must be manually triggered (for example, after some changes to the app state)


If a fetching is already in progress, subsequent fetch calls will be ignored, unless you set the force flag to true


You can also pass a temporary value that will be assigned to the AsyncReadable to notify all subscribers while waiting for the new value that will be retrieved using the dataProvider. This also can be useful to show a loading/intermediate state

myReadable.fetch(true, null); // or myReadable.fetch(false, null);

Persisting data

AsyncReadable can be used with any store as its cache, this means that you can take advantage of libraries such as svelte-persistent-writable or svelte-persistent-store (and many more) to delegate the persistence logic.

As an example, the following code uses svelte-persistent-writable as a storage mechanism:

import { persistentWritable, localStorageAdapter } from 'svelte-persistent-writable';
import { asyncReadable } from 'svelte-async-readable';

export const myAsyncReadable = asyncReadable(
	persistentWritable(null, { storage: localStorageAdapter('myAsyncReadable') }),
	{ dataProvider: () => axios.get('/path/to/api').then((response) => }

myAsyncReadable.fetch().catch(() => console.error('oops...'));

Package Sidebar


npm i svelte-async-readable

Weekly Downloads






Unpacked Size

11.9 kB

Total Files


Last publish


  • cdellacqua