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...'));


    npm i svelte-async-readable

    DownloadsWeekly Downloads






    Unpacked Size

    11.9 kB

    Total Files


    Last publish


    • cdellacqua