@rest-hooks/experimental
v9.4.1
Published
Experimental extensions for Rest Hooks
Downloads
248
Readme
Experimental extensions for Rest Hooks
Motivation
Field application of designs help smooth edges of a theoretical design. New designs can be iterated on here, breaking freely without worry of legacy support plans.
Usage
useController()
const controller = useController();
return (
<form onSubmit={() => controller.fetch(User.create(), userPayload)}>
<button onClick={() => controller.fetch(User.list())}>Refresh list</button>
<button onClick={() => controller.invalidate(User.list())}>Suspend list</button>
</form>
);
Endpoint.update
const createUser = new Endpoint(postToUserFunction, {
schema: User,
update: (newUserId: string) => ({
[userList.key({})]: (users = []) => [newUserId, ...users],
}),
});
const createUser = new Endpoint(postToUserFunction, {
schema: User,
update: (newUserId: string, newUser: User) => {
const updates = {
[userList.key()]: (users = []) => [newUserId, ...users],
[userList.key({ sortBy: 'createdAt' })]: (users = [], { sortBy }) => {
const ret = [newUserId, ...users];
ret.sortBy(sortBy);
return ret;
},
];
if (newUser.isAdmin) {
updates[userList.key({ admin: true })] = (users = []) => [newUserId, ...users];
}
return updates;
},
});
Entity, EntityRecord, Resource, BaseResource
- Normalizes to pojo
- Faster
- Entity has no defined key lookups - but EntityRecord does.
- BaseResource is missing predefined endpoints (list, detail, etc), but has everything else
Resource.list() declarative pagination
Addition of paginated()
.
class NewsResource extends Resource {
static listPage<T extends typeof NewsResource>(this: T) {
return this.list().paginated(({ cursor, ...rest }) => [rest]);
}
}
import { useSuspense, useController } from '@rest-hooks/react';
import NewsResource from 'resources/NewsResource';
function NewsList() {
const { results, cursor } = useSuspense(NewsResource.list(), {});
const curRef = useRef(cursor);
curRef.current = cursor;
const controller = useController();
const getNextPage = useCallback(
() => controller.fetch(NewsResource.listPage(), { cursor: curRef.current }),
[]
);
return (
<Pagination onPaginate={getNextPage} nextCursor={cursor}>
<NewsList data={results} />
</Pagination>
);
}