Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

RemoteData type Build Status


RemoteData is an ADT (algebraic data type) described in this article. Heavily based on fp-ts lib.


npm i --save @devexperts/remote-data-ts

How to lift (wrap) your data in RemoteData:

As you remember RemoteData is an union of few types: RemoteInitial, RemotePending, RemoteFailure and RemoteSuccess.

While your data in initial or pending state just use initial or pending constant, because you don't have any real values in this case.

import { initial, pending } from '@devexperts/remote-data-ts';

const customers = initial;
// or
const customers = pending;

When you receive data from server, use failure or success function, it depends on what you received:

import { failure, success } from '@devexperts/remote-data-ts';
import { apiClient } from 'apiClient';
import { TCustomer } from './MyModel';

const getCustomers = (): RemoteData<TCustomer[]> => {
   const rawData: TCustomer[] = apiClient.get('/customers');

   try {
        const length = rawData.length;

        return success(rawData);
   catch(err) {
        return failure(new Error('parse error'));

How to fold (unwrap) your data from RemoteData:

Finally you pass data to the component and want to render values, so now it's time to get our values back from RemoteData wrapper:

import { NoData, Pending, Failure } from './MyPlaceholders';
import { TCustomer } from './MyModel';

type TCustomersList = {
    entities: RemoteData<TCustomer[]>;

const CustomersList: SFC<TCustomersList> = ({ entities }) => entities.foldL(
    () => <NoData />,
    () => <Pending />,
    err => <Failure error={err} />,
    data => <ul>{ => <li>{}</li>)}</ul>

Docs & Examples

Coming soon (check the source)



Don't forget to run npm run changelog and to commit the changes