mst-request

mst-request

A simple library for wrapping requests, using MobX-state-tree

Example

import { flow, types } from "mobx-state-tree";
import { isCancelled, isError, unwrap, Request } from "mst-request";

// This would be your API request
export async function getPotato(id: string) {
  return Promise.resolve({ id, name: "Jeremy" });
}

export const Potato = types.model({
  id: types.identifier,
  name: types.string,
});

export const PotatoStore = types
  .model("PotatoStore", {
    request: createRequest(getPotato),
    ///
    potato: types.maybe(Potato),
  })
  .actions(self => {
    const fetchPotatoById = flow(function* (id: string) {
      const result = yield* self.request.execute(id);
      if (isCancelled(result)) return; // make sure it is latest request (debouncing)
      if (isError(result)) throw new Error(result.error); // handle error
      self.potato = result.unwrap(); // we know it is success

      console.log(result);
      console.log(self.request.failed);
    });

    return {
      fetchPotatoByI$d,
    };
  });

Component

export const PotatoDisplay = observer<{ id: string }>(({ id }) => {
  const { potatoStore } = useStores();
  const {
    potato,
    request: { inProgress, error },
  } = potatoStore;

  useEffect(() => {
    potatoStore.fetchPotatoById(id);
  }, [id]);

  if (inProgress) {
    return <Spinner />;
  }

  if (error) {
    return <span className="error">Error inProgress potato: {error}</span>;
  }

  return (
    <span>
      Potato #{potato.id}: {potato.name}
    </span>
  );
});