useResource

Using async resources without tears (and boilerplate)

Demo

Codesandbox

Installation

1yarn add use-resource-hook

How to use

1interface User {
2  id: string;
3  name: string;
4}
5
6// Each function should return a promise that returns a `User` when resolves
7const [state, actions] = useResource<User>(); // `Options` can be passed
8
9actions.list(api.users.list());
10
11/*
12When the promise is called
13state => {
14  error: null,
15  action: 'list',
16  resources: [],
17  selected: null
18}
19
20Once is resolved
21state.resources => [{id: "1", name: "Gonzalo", meta: {error: null, action: null}}]
22
23On Error
24state => {
25  error: 'Error returned by the server',
26  action: null,
27  resources: [],
28  selected: null
29}
30*/
31
32// Also you can use its promise
33actions.list(api.users.list()).then((users: User[]) => actions.select(users[0].id));
34
35/*
36state.selected => {id: "1", name: "Gonzalo", meta: {error: null, action: null}}
37*/

Types

1type AsyncAction = 'get' | 'list' | 'update' | 'remove' | 'create';
2
3interface Options {
4  identifier: string // Property used to identify each resource, default: 'id'
5}
6
7interface ListOptions {
8  reset?: boolean;
9}
10
11interface Meta {
12  meta: {
13    action: null | AsyncAction;
14    error: null | string;
15  };
16}
17
18interface State<T> {
19  resources: (T & Meta)[];
20  selected: null | (T & Meta);
21  action: null | string;
22  error: null | string;
23}
24
25interface Methods<T> {
26  get: (identifier: string, promise: Promise<T>) => Promise<T>;
27  list: (promise: Promise<T[]>, options?: ListOptions) => Promise<T[]>;
28  update: (identifier: string, promise: Promise<T>) => Promise<T>;
29  remove: (identifier: string, promise: Promise<T | string | void>) => Promise<string>;
30  create: (promise: Promise<T>) => Promise<T>;
31  select: (identifier: string) => void;
32  reset: () => void;
33}