Remote Data

Tiny (less than 450 bytes) tools for fetching data from remote sources (incl. HTTP). For a detailed write up of why Remote Data helps, read this post.

Installation

NPM

$ npm install @roebuk/remote-data

ES Modules

<script type="module">
  import RemoteData from 'https://cdn.skypack.dev/@roebuk/remote-data';
</script>

Script Tag

<script src="https://unpkg.com/@roebuk/remote-data"></script>

Documentation

API Docs

Basic Example

import * as RemoteData from '@roebuk/remote-data';

// Set the initial state
var remoteUsers = RemoteData.NotAsked();

// An interaction starts off the request
remoteUsers = RemoteData.Loading();

// Once the request is complete,
// it will either be in a `Success` or `Failure` state.
remoteUsers = await fetch('/api/users')
                        .then(res => res.json())
                        .then(users => RemoteData.Success(users))
                        .catch(err => RemoteData.Failure(err));


// "Pattern match" on the RemoteData type and extract the current state. 
// The return value of the functions should all be of the same type.
RemoteData.match({
    notAsked: () => 'Not Requested the data'
    loading: () => 'Loading...'
    success: users => `Loaded ${users.length} users`,
    failed: err => `Something when wrong. Details: ${err.message}`
}, remoteUsers);

React Example

React & Remote Data on StackBlitz

Building & Testing

npm ci
npm run build
npm t