@rest-hooks/experimental

Experimental extensions for Rest Hooks

📖Read The Docs

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

Simple

const createUser = new Endpoint(postToUserFunction, {
  schema: User,
  update: (newUserId: string) => ({
    [userList.key({})]: (users = []) => [newUserId, ...users],
  }),
});

Multiple updates

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>
  );
}