@scotttrinh/remote-data-ts
v1.0.0
Published
Algebraic Data Type for Remote Data
Downloads
13
Maintainers
Readme
RemoteData
A Fork of remote-data-ts
Description
RemoteData is an ADT (algebraic data type) described in this article. Heavily based on fp-ts lib.
How is this different from devex-web-frontend/remote-data-ts
?
- The main difference is the addition of another type in the union:
RemoteRefresh
which captures the state where you have data, but you are refreshing it from your remote data source. - Did some reorganizing of the code for personal ergonomics.
Installation
npm i --save @scotttrinh/remote-data-ts
How to lift (wrap) your data in RemoteData:
RemoteData is an union of few types: RemoteInitial
, RemotePending
,
RemoteFailure
, RemoteRefresh
, and RemoteSuccess
.
While your data in initial or pending state just use the initial
or
pending
constant.
import { initial, pending } from '@scotttrinh/remote-data-ts';
const customers = initial;
// or
const customers = pending;
When you receive data from server, use the failure
or success
constructor:
import { failure, success } from '@scotttrinh/remote-data-ts';
import { apiClient } from 'apiClient';
import { TCustomer } from './MyModel';
const getCustomers = (): RemoteData<Error, TCustomer[]> => {
const rawData: TCustomer[] = apiClient.get('/customers');
try {
const length = rawData.length;
return success(rawData);
}
catch(err) {
return failure(new Error('parse error'));
}
}
When you need to re-fetch or refresh your data, use the refresh
constructor.
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} />,
stale => <Refreshing oldItems={stale} />
data => <ul>{data.map(item => <li>{item.name}</li>)}</ul>
);